/*

	Foster Design Group -  by Booyant, Inc.
	Contact Info: team@booyant.com  / 978.729.8408
	VERSION 1.0
	
	CONTENTS ----------
	
	   1.BODY
	   2.DEFAULT STYLING
	   3.HEADINGS
	   4.LINKS
	   5.IMAGES
	   6.LAYOUT
	   7.BRANDING/MASTHEAD
	   8.NAVIGATION
	   9.SITEINFO/FOOTER
	   10.HOME PAGE
	   11.PRIMARY CONTENT
	   12.SECONDARY CONTENT
	   13.INTERNAL PAGES
	   14.FORMS
	   
	   
    -------------------
	
*/



@import url(reset.css); /* RESET CSS */


/* 1.BODY
---------------------------------------------------------------------- */

body {font-family: Helvetica, Arial, sans-serif; font-size: 62.5%; color: #6d6e70; padding-top: 7em; background: #33261f url(../images/bg_body.gif) right top no-repeat;}
html {height: 100%; margin-bottom: 1px;}
ul#nav_access { position:absolute; top:-9999px; left:-9999px; }


/* 2.BODY class templating and associated variations
---------------------------------------------------------------------- */


	/* 2(i) /// FDG template */
	
	.pg-fdg p {margin-bottom: 0.8em;}
	
		/* Image replacement for headers */
		body.industries h2 {background-image: url(../images/titles/industries.jpg);height: 26px;}
		body.profile h2 {background-image: url(../images/titles/profile.jpg);height: 34px;}
		body.services h2 {background-image: url(../images/titles/services.jpg);height: 25px;}
		body.philosophy h2 {background-image: url(../images/titles/philosophy.jpg);height: 33px;}
		body.branding h2 {background-image: url(../images/titles/brands.jpg);height: 26px;  }
		body.history h2 {background-image: url(../images/titles/history.jpg);height: 34px;}
		
		/* Extra spacing for absolutely positioned banners */
		#banner div#content-primary {padding-bottom:220px;}
		#banner2 div#content-primary {padding-bottom:260px;}
		img#banner {position: absolute; left: -41px; bottom:48px; z-index: 2;}
		
		
	
	/* 2(ii) /// BRAND template */
	
	body.pg-brand h3 {color: #F15A29;font-size: 1.3em; margin-bottom: 0.3em;}
	body.pg-brand div#content-primary {padding: 40px 0px 20px 20px;}
	body.pg-brand div#content-secondary {background: url(../images/bg-wrap-shadow.gif) left top repeat-x;}
	
	
	/* 2(iii) /// Column Template Variations */
	
	div.col1 {width: 285px; float: left; margin-right: 23px; }
	div.col2 {width: 305px; float: left; margin-right: 23px; }
	div.col3 {width: 305px; float: right; }
	
	.two-col div.col2 {width: 570px; margin-right: 64px;}
	.two-col div.col3 {display: none;}
	
	
	/* 2(iv) /// variations for pages with lists */
	body.lists dl {margin: 0em 2em 1em 1em;}
	body.lists div.col1 dl {margin: 0em 2em 1em 0em;}
	body.lists dl dt {margin-bottom: 0.3em;}
	body.lists dl dd {margin-bottom: 0.15em;}
	body.lists p {line-height: 1.2em; margin-bottom: 1.5em;}
	body.lists h2 {margin-top: 0px; margin-bottom: 1em; }
	body.lists div.col2, body.lists div.col3 {margin-top: 36px;}
	
	
	/* 2(v) /// Top level navigation highlighting */
	
		/* FDG section */
		body.profile ul#main-nav li.profile a,
		body.services ul#main-nav li.services a,
		body.philosophy ul#main-nav li.philosophy a,
		body.branding ul#main-nav li.branding a,
		body.history ul#main-nav li.history a,
		
		/* BRAND section */
		body.pg-brand ul#main-nav li.brands a,
		body.pg-design ul#main-nav li.design a,
		body.pg-identity ul#main-nav li.identity a,
		body.pg-web ul#main-nav li.web a,
		body.pg-photography ul#main-nav li.photography a,
		
		/* CLIENTS section */
		body.pg-industries ul#main-nav li.industries a {color: #000;}


	/* 2(vi) /// Shows navigation options depending on section */
	
	body.pg-brand #section-nav li.brands ul, 
	body.pg-design #section-nav li.design ul,
	body.pg-identity #section-nav li.identity ul,
	body.pg-web #section-nav li.web ul,
	body.pg-photography #section-nav li.photography ul {display: block;}
	
	body.pg-brand #section-nav li.brands a, 
	body.pg-design #section-nav li.design a,
	body.pg-identity #section-nav li.identity a,
	body.pg-web #section-nav li.web a,
	body.pg-photography #section-nav li.photography a {color: #ea6f34;}
	
	
	
	
	
	

/* 2.DEFAULT STYLING
---------------------------------------------------------------------- */


p {font-size: 1.1em; line-height: 1.8em; }
hr { height:0; border:0; border-top:1px dotted #ccc; margin: 0.8em 0 0.2em 0; }
dl {font-size: 1.2em; margin-bottom: 1em;}
dt {color: #231F20; padding-bottom: 0.1em;}


blockquote { font-style:italic; background:#eee; padding:1.2em; margin: 0.8em 0 1.2em 0; }
blockquote cite { display:block; font-style:normal; text-transform:uppercase; font-size:1em; letter-spacing:1px; color:#666;  margin-top: 0.5em;}

pre {  }
pre code {  }
code {  }

abbr { border-bottom:1px solid #ccc; cursor:help; }
abbr:hover { border-color:#999; }
del { color:#999; }
strong { font-weight:bold; }
em { font-style: italic; }
sup { font-size:0.75em; position:relative; top:-3px; }
em {font-style:italic;}



/* 3.HEADINGS
---------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { margin-bottom: 0.3em;}
h1 {width:178px; height:21px; text-indent:-9999em; margin: 0px 0px 30px 15px; }
h1 a {background: url(/images/logo.jpg) top left no-repeat; width:178px; height:21px; display: block; }
h2 {text-align: center; margin: 60px 0px 0px -20px; background-position: center top; background-repeat: no-repeat; width: 100%; text-indent:-9999em;}
h3 {font-size: 1.5em; color:#231F20; margin-bottom: 1.2em; }
h4 {font-size: 1.2em; color: #4D4D4D; font-weight: bold; }
h4 span {font-size: 0.8em; font-weight: normal;}
h5 {font-size: 1.3em; color: #4D4D4D; margin-bottom: 0;border-bottom: 1px dotted #cdc7bb; padding-bottom: 6px; margin-top: 2em;}
h6 {font-size: 1.2em; font-style: italic;}

h2 img {padding-top: 60px;}




/* 4.LINKS
---------------------------------------------------------------------- */
a {color:#007698; }
a:link,
a:visited, {  }
a:hover,
a:focus {color:#000;}


/* 5.IMAGES
---------------------------------------------------------------------- */

img {}

img.fl { float:left; }
img.fr { float:right; }




/* 6.LAYOUT
---------------------------------------------------------------------- */

div#wrap {margin:0 auto; width: 1044px; background:#fff url(/images/telno.gif) right top no-repeat;  }
div#main-body {width: 964px; margin: 0 40px; padding: 52px 0 0 0; position: relative;  }
div#header {padding-bottom: 40px;}
div#main-nav {float:left; width:224px; }
div#content-primary { border: 1px solid #fcdca9; padding: 50px 0px 20px 20px; font-size: 1.2em; line-height: 1.3em; position: relative;}
div#content-secondary {padding: 40px 0 0 0; clear: both; color: #666; line-height: 1.8em; font-size: 1.1em;}


.clear {clear: both; height: 0px; line-height: 0px; overflow: hidden; margin: 0; padding: 0;}
.group:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}


/* 7.BRANDING/MASTHEAD
---------------------------------------------------------------------- */





/* 8.NAVIGATION
---------------------------------------------------------------------- */


ul#main-nav ul {float: left; width: 100%; }
ul#main-nav li {float: left; width: 306px; margin-right: 23px; text-indent:-9999em; padding: 20px 0; }
ul#main-nav li ul li {width: auto; margin-right: 0px; text-indent: 0; padding: 0;}
ul#main-nav li ul li a {color: #fff; display: block; text-decoration: none; line-height: 30px; padding: 0 6px; font-size: 1.3em; letter-spacing: 0.01em;}
ul#main-nav a:hover {color: #000; }

/*Image replacement */
ul#main-nav li.fdg {background: url(../images/nav/fdg.jpg) 50% top no-repeat;}
ul#main-nav li.fdg ul li.first {margin-left: 2px;}

ul#main-nav li.brand {background: url(../images/nav/brand.jpg) 50% top no-repeat;}
ul#main-nav li.brand ul li.first {margin-left: 15px;}

ul#main-nav li.clients {margin-right: 0px; background: url(../images/nav/clients.jpg) 50% top no-repeat;}
ul#main-nav li.clients ul li.first {margin-left: 70px;}

ul#main-nav li.fdg ul {background: #ea6f34;  }
ul#main-nav li.brand ul {background: #bed73d;}
ul#main-nav li.clients ul {background: #57b7df; }

ul#main-nav li.think {display: none;}
.pg-home ul#main-nav li.think {display: block;}
ul#main-nav li.think {background: #faf6ea url(../images/home/think.gif) 50% 50% no-repeat; height: 305px; width: 305px; border: 1px solid #ccc;}
ul#main-nav li.think ul {float: right; margin-top: 191px; width: 100px; text-align: right;}
ul#main-nav li.think ul li a {color:#6d6e70} 

/*Sub nav on brand sections */
div#section-nav {float: left; width: 118px; padding: 44px 28px 0 0px; font-size: 1.1em;}
div#section-nav ul ul {margin: 0 0 14px 18px; display: none;}

div#section-nav li a:link,
div#section-nav li a:visited {display: block; color: #000; text-decoration: none; padding: 3px 0;}
#content-primary div#section-nav li ul li a:link,
#content-primary div#section-nav li ul li a:visited {color: #a7a8aa;  }

div#section-nav li a:hover {color: #ea6f34; }
#content-primary div#section-nav li ul li a:hover, #content-primary div#section-nav li ul li a.selected {color: #8cc63c; }


ul#breadcrumbs {font-size: 1.2em; text-transform: lowercase; position: absolute; top: -30px; left: 0px; z-index: 2; color: #fff;}
ul#breadcrumbs li {float: left; margin-right: 1em;}
ul#breadcrumbs li a {color:#fff; background: url(../images/bg_breadcrumb.gif) right 50% no-repeat; padding-right: 16px; text-decoration: none; display: block;}

ul.thumbnail-nav {float: right; margin: 40px 12px 0 0;}
ul.thumbnail-nav li {float: left; margin-right: 13px;}
ul.thumbnail-nav li a img {padding: 0 0 6px 0; border-bottom: 2px solid #fff}
ul.thumbnail-nav li a:hover img, ul.thumbnail-nav li a img.on {border-bottom: 2px solid #BED73D;}


ul#utility-nav {border: 1px solid #666; width: 307px; margin: 20px auto; font-size: 1.2em; }
ul#utility-nav li {float: left; margin-right: 12px;  }
ul#utility-nav a {color: #666; text-decoration: none; display: block; height: 24px; padding-top: 5px;}
ul#utility-nav li.think a {background: url(../images/footer/think.jpg) left top no-repeat; width: 91px; }
ul#utility-nav li.button a {background: url(../images/footer/button.jpg) left top no-repeat; width: 23px; margin-right: 20px;}




/* 9. SITEINFO/FOOTER
---------------------------------------------------------------------- */

ul#footer {font-size: 1.2em; width: 320px; margin: 10px auto 30px auto; color: #fff; text-transform:lowercase; letter-spacing: 0.1em;}
ul#footer li {float:left; margin-right: 24px; }
ul#footer li.contact {margin-right: 0;}
ul#footer a:link,
ul#footer a:visited {color: #fff; display: block; text-decoration: none;}
ul#footer a:hover {}

/* 10.HOME PAGE
---------------------------------------------------------------------- */

/*homepage nav variations */
.pg-home ul#main-nav {width: 660px; float: left; }
.pg-home ul#main-nav li {height: 306px; padding: 0; margin: 0 23px 23px 0;  }
.pg-home ul#main-nav li ul li {height: auto; margin: 0; float: none;}
.pg-home ul#main-nav li ul li a {line-height: 20px;}

.pg-home ul#main-nav li.fdg { background: #ea6f34 url(../images/home/fdg.gif) 50% 50% no-repeat;}
.pg-home ul#main-nav li.brand { background: #bed73d url(../images/home/brand.gif) 50% 50% no-repeat;}
.pg-home ul#main-nav li.clients { background: #57b7df url(../images/home/clients.gif) 50% 50% no-repeat; margin-right: 23px;}

.pg-home ul#main-nav li.fdg ul li {float: left;}

.pg-home ul#main-nav li.brand ul {float: right; width: 100px; }
.pg-home ul#main-nav li.brand ul li {text-align: right;}

.pg-home ul#main-nav li.clients ul li {}
.pg-home ul#main-nav li.clients ul li.first {margin-left: 0px;}

.pg-home div#content-primary { float: right; border: none; padding: 0px; width: 280px; height: 638px; }
.pg-home div#content-primary h2 {font-size: 2em; color: #ea6f34; line-height: 1em; margin: 0 0 20px 0;}
.pg-home div#content-primary p {line-height: 1.4em;}
.pg-home div#content-secondary {padding: 0;}
.pg-home div#main-body {padding: 52px 0 30px 0;   }


.pg-home h2 {text-align: left; margin: 0px; text-indent:0em;}
.pg-home #content-primary h2 p {line-height: 1em; }



span.section {color: #9D9D9D; font-size: 1.4em; display: block; margin: 10px 0;}

ul#homepage-slider-nav {position: absolute; left: 60px; bottom: 0px;}
ul#homepage-slider-nav li {float: left; margin-right: 12px;  }
div#content-primary ul#homepage-slider-nav li.last {margin-right: 0px;}
ul#homepage-slider-nav li a {background: url(/images/home/box.gif) 50% 50% no-repeat; width: 19px; height: 19px; display: block;}
ul#homepage-slider-nav li a.on {background: url(/images/home/button.jpg) left top no-repeat; }

div.homepage-slider {width: 100%; }
#content-primary div.homepage-slider a {color: #4D4D4D; text-decoration: none;}
div.homepage-slider div {width: 270px; padding: 20px 0 0 20px; }
div.homepage-slider div span.link {font-size: 1.1em; display: block; text-align: right; padding: 10px 60px 0 0; color: #000; text-decoration: none;}
div.homepage-slider a:hover div span.link {text-decoration: underline;}
div.homepage-slider div a:hover {text-decoration: underline;}

div.on {display: block;}
div.off {display: none;}

/* 11.PRIMARY CONTENT
---------------------------------------------------------------------- */
div.img-viewer {float: right; width: 762px; margin-right: 20px;}
div.img-viewer img {/*margin-right: 23px;*/}

div.img-viewer img.on {}
div.img-viewer img.off {display:none;}


/* 12.SECONDARY CONTENT
---------------------------------------------------------------------- */

dl#abstracts dt {padding-bottom: 0;}
dl#abstracts dd {width: 260px;}

div.img-title {border-left: 1px solid #ababab; border-right: 1px solid #ababab; width: 332px; margin: 0 auto; text-align: center; font-size: 1.6em; color: #E86E34; padding: 35px 0; letter-spacing: 0.1em;}

ul.project-attributes {font-size: 0.9em;}
ul.project-attributes li {float: left; width: 277px; padding: 0 20px; background: url(../images/bg-line.gif) left 29px no-repeat;}
ul.project-attributes li.challenge {background: none;}
ul.project-attributes dl {width: 300px;}
ul.project-attributes dt {float: left; width: 80px; color: #231F20;}



.pg-blog #content-primary {background: #fcfaed url(../images/bg_blogtop.jpg) left top no-repeat; border: none; margin: 0; padding: 9px 0 0 0; font-family: "Times New Roman", Times, serif; color: #231F20;}
.pg-blog #content-primary p {margin-bottom: 1em;}
#blog-wrap {border-left: 1px solid #e8e5dc; border-right:1px solid #e8e5dc;  /*padding-bottom: 98px;*/}
div.blog-end {background: url(../images/bg_blogbottom.jpg) left bottom no-repeat; height: 98px;}

.pg-blog h2 {text-align: left; margin: 56px 0px 20px 0px; width: auto; text-indent: 0; background: url(../images/bg_h2_blog.jpg) 50% bottom no-repeat; padding-bottom: 20px;}
.pg-blog h2 a {color: #736B59; font-size: 3.3em; line-height: 1em; text-transform: uppercase; text-decoration: none; }
.pg-blog h2 a:hover {text-decoration: underline;}
.pg-blog h3 {text-transform: uppercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 2em; text-align: right; background: url(../images/bg_h2_blog.jpg) right bottom no-repeat; letter-spacing: 0.05em; padding: 0 0 18px 0; color: #3f3029;}
.pg-blog h3 span {color: #13B5EA;}
.pg-blog div.col1 {width: 437px; padding: 10px 30px; border-right: 1px solid #cdc7bb;}

span.date, span.author {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; display: block; margin-bottom: 20px;}
span.tagline {display: block; font-size: 1.1em; font-style: italic;}
span.tagline span {font-weight: bold;}

.pg-blog div.col2 {width: 400px; padding: 20px 0 0 0; float: right;}

div.entry {margin-bottom: 20px;}
div.entry img {float: left; width: 160px; margin-bottom: 20px;}
div.entry p {float: right; width: 220px; font-style: italic; clear: right; }
/*.expand div.entry p {width: 100%; font-style: normal;}
.expand div.entry img {float: right;}*/
div.entry p a {color: #13B5EA;  float: none; display: inline;}
div.entry a {color: #736B59; font-style: normal; display: block; float: right; text-decoration: none; clear: right;}
div.entry a:hover {text-decoration: underline;}

div.comments {background: #fff; padding: 20px; margin: 20px 0px 30px 0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; border-top: 2px solid #cbc7bb;border-bottom: 2px solid #cbc7bb;}
span.comments-tally {background: url(../images/blog/comments.jpg) left top no-repeat; height: 21px; width: 28px; color: #fff; text-align: center; display: block; position: relative; float: left;}
span.commentary {text-transform: uppercase; color: #E7A614;width: auto; position: absolute; top: 21px; left: 0px; }


div.comment-content {float: right; width: 260px;  }
div.comment-content a.commBtn {display: block; float: right; background: url(../images/blog/arrow.jpg) left top no-repeat; height: 7px; width: 21px; text-indent: -9999em;}
div.comment-content p {line-height: 1.1em; font-size: 0.9em;}

span.user-name {color: #F15A29; display: block; margin: -6px 0 2px 0;}

a.read-more, a.more-articles {font-style: normal; display: block; float: right; text-decoration: none;}
a.read-more {color: #E7A614;}
a.more-articles {color: #13B5EA; clear: right; font-variant: small-caps; }
a.more-articles span {font-style: italic; font-variant: normal; margin-top: 10px;}


div.comment-return {background: #fff; padding: 20px; margin: 10px 0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; border-top: 2px solid #cbc7bb;border-bottom: 2px solid #cbc7bb; font-size: 0.8em; clear: both; }

div.comment-return p.info {color: #666;}
p.info em, p.info strong {color: #000;}
 
a#rss {position: absolute; right:-30px; top: 10px; z-index: 30; }
a#rss img {width: 30px;}


/* 13.INTERNAL PAGES
---------------------------------------------------------------------- */


/* 14.FORMS
---------------------------------------------------------------------- */


dl#comment-form {width: 500px; margin-top: 30px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
dl#comment-form dt {float: left; width: 80px; padding-top: 3px;}
dl#comment-form dd {margin-bottom: 10px;}
textarea#comment-text {margin-top: 20px; width: 100%;}




#contact-fdg {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 200px;
	background: #f3f3f3;
	display: none;
}