/* Eric Meyer Reset
----------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
ol, ul { list-style: none; }

/* Structure
----------------------------------------------------------------------------- */
body { 
    background: #FFF;
}
.container { 
    width: 799px;
    margin: 0 auto;
}

/* Header
----------------------------------------------------------------------------- */
#header_home { 
    height: 189px; 
}
#header { 
    height: 59px;
}
#header_home #logo {
    float: left;
    margin-top: 130px;
}
#header #logo {
    float: left;
}
#header_home #tagline_home {
    float: right;
}
#header #tagline {
    float: right;
    margin-top: 30px;
}
/* Footer
----------------------------------------------------------------------------- */
#footer {
    font-size: 12px;
    border-top: 5px solid #aab300;
    padding-top: 3px;
}
#footer_plain {
    font-size: 12px;
    padding-top: 3px;
}
#footer p,
#footer_plain p {
    color: #ADADAD;
    float: right;
}
#footer .vcard,
#footer_plain .vcard {
    color: #229769;
    float: left;
    width: 460px;
}
#footer .vcard div,
#footer .vcard span,
#footer_plain .vcard div,
#footer_plain .vcard span {
    float: left;
}
#footer .street-address,
#footer .extended-address,
#footer .locality,
#footer .postal-code,
#footer_plain .street-address,
#footer_plain .extended-address,
#footer_plain .locality,
#footer_plain .postal-code {
    background: url(../img/footer_pipe.png) no-repeat left;
    padding-left: 10px;
    padding-right: 10px;
}
#footer .locality,
#footer_plain .locality {
    padding-right: 0;
}
#footer .region,
#footer_plain .region {
    padding-right: 5px;
    padding-left: 5px;
}
#footer .tel,
#footer_plain .tel {
    padding-right: 10px;
}
#footer .vcard .org,
#footer_plain .vcard .org {
    display: none;
}

/* Typography
----------------------------------------------------------------------------- */
body {
    font: 75%/1.5em Arial, Helvetica, sans-serif;
    color: #333;
}

a 			{ color: #0000CC; text-decoration: underline;}
a:visited 	{ color: #6600CC; }
a:hover 	{ color: #0000CC; }

strong {
	font-weight: bold;
}

/* spacing */
p,dl,hr,h1,h2,h3,ol,ul,pre,table,address,fieldset {
    margin-bottom: 20px;  
}

h1.mir,
h2.mir {
    letter-spacing: -1000em;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    color: #666;
}
h1.greenis      { background: url(../img/h1_greenis.png) no-repeat; width: 92px; height: 16px;}
h2.durable      { background: url(../img/h1_durable.png) no-repeat; width: 92px; height: 16px;}
h2.efficient    { background: url(../img/h1_efficient.png) no-repeat; width: 101px; height: 16px;}
h2.healthy      { background: url(../img/h1_healthy.png) no-repeat; width: 91px; height: 16px;}
h2.beautiful    { background: url(../img/h1_beautiful.png) no-repeat; width: 109px; height: 16px;}
h1.designbuild  { background: url(../img/h1_designbuild.png) no-repeat; width: 147px; height: 16px; margin-bottom: 10px;}
h1.stepbystep   { background: url(../img/h1_stepbystep.png) no-repeat; width: 133px; height: 16px;}
h1.projects     { background: url(../img/h1_projects.png) no-repeat; width: 95px; height: 20px;}
h1.people       { background: url(../img/h1_people.png) no-repeat; width: 74px; height: 15px;}
h1.contact      { background: url(../img/h1_contact.png) no-repeat; width: 95px; height: 16px;}
h2.think        { background: url(../img/h2_think.png) no-repeat; width: 66px; height: 16px; margin-bottom: 10px;}
h2.do           { background: url(../img/h2_do.png) no-repeat; width: 31px; height: 16px; margin-bottom: 10px;}

h1#sbs_0        { background: url(../img/h1_stepbystep.png) no-repeat; width: 133px; height: 16px; margin-bottom: 0;}
h1#sbs_1        { background: url(../img/h1_stepbystep1.png) no-repeat; width: 799px; height: 40px; margin-bottom: 0;}
h1#sbs_2        { background: url(../img/h1_stepbystep2.png) no-repeat; width: 799px; height: 40px; margin-bottom: 0;}
h1#sbs_3        { background: url(../img/h1_stepbystep3.png) no-repeat; width: 799px; height: 40px; margin-bottom: 0;}
h1#sbs_4        { background: url(../img/h1_stepbystep4.png) no-repeat; width: 799px; height: 40px; margin-bottom: 0;}
h1#sbs_5        { background: url(../img/h1_stepbystep5.png) no-repeat; width: 799px; height: 40px; margin-bottom: 0;}

/* Navigation
----------------------------------------------------------------------------- */
#nav {
    float: right;
    height: 14px;
    width: 371px;
    z-index: 1000;
    margin-top: 6px;
}
#nav ul {
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
    display: block;
}
#nav li a {
    color: #FFF;
    display: block;
    padding: 0;
}
#nav li span {
    position: absolute;
    left: -9384px;
}

li#green_is a, li#process a, li#projects a, li#people a, li#contact a {
    display: block;
    position: relative;
    height: 14px;
    background: url(../img/nav.png) no-repeat;
}

li#green_is     { width: 74px; }
li#process      { width: 74px; }
li#projects     { width: 75px; }
li#people       { width: 74px; }
li#contact      { width: 74px; }

li#green_is a   { background-position: 0 0;      }
li#process a    { background-position: -74px 0;  }
li#projects a   { background-position: -148px 0; }
li#people a   	{ background-position: -223px 0; }
li#contact a 	{ background-position: -297px 0; }

li#green_is a:hover, li#green_is:hover a, li#green_is.over a
    { background-position: 0 -14px; }
li#process a:hover, li#process:hover a, li#process.over a
    { background-position: -74px -14px; }
li#projects a:hover, li#projects:hover a, li#projects.over a
    { background-position: -148px -14px; }
li#people a:hover, li#people:hover a, li#people.over a
    { background-position: -223px -14px; }
li#contact a:hover, li#contact:hover a, li#contact.over a
    { background-position: -297px -14px; }

/* 2nd Level */
#nav li ul {
    position: absolute;
    left: -999em;
    width: 200px;
    background: url(../img/dropdown_bg.png) bottom right;
    border-top: 4px solid #FFF;
    z-index: 1000;
    padding-bottom: 5px;
}
#nav li#green_is ul {
    width: 370px;
}
#nav li ul li {
    background: url(../img/arrow_nav.png) no-repeat 10px 10px;
}
#nav li#green_is ul li {
    display: block;
    width: 370px;
}
#nav li#process ul {
    width: 296px;
}
#nav li#process ul li {
    display: block;
    width: 296px;
}
#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
#nav li:hover, #nav li.hover {  
	position: static;  
}  
#nav li ul li a {
    height: 20px;
    background: transparent;
    padding: 5px 0 0 0;
    padding-left: 20px;
    text-decoration: none;
    font-size: 12px;
    color: #FFF;
}
#nav li ul li a:hover {
    font-weight: bold;
}
#nav li ul li:hover {
    background: url(../img/arrow_navbold.png) no-repeat 9px 10px;
}

    
/* Tagline Navigation
----------------------------------------------------------------------------- */
#tagline_nav {
    float: right;
    height: 22px;
    width: 621px;
    z-index: 1000;
    margin-bottom: 7px;
}
#tagline_nav ul {
    margin: 0;
    padding: 0;
}
#tagline_nav li {
    float: left;
    display: block;
}
#tagline_nav li a {
    color: #FFF;
    display: block;
    padding: 0;
}
#tagline_nav li span {
    position: absolute;
    left: -9384px;
}

li#durable a, li#efficient a, li#healthy a, li#beautiful a {
    display: block;
    position: relative;
    height: 22px;
    background: url(../img/tagline_nav.png) no-repeat;
}

li#durable      { width: 140px; }
li#efficient    { width: 164px; }
li#healthy      { width: 151px; }
li#beautiful    { width: 166px; }

li#durable a    { background-position: 0 0;       }
li#efficient a  { background-position: -140px 0;  }
li#healthy a    { background-position: -304px 0;  }
li#beautiful a  { background-position: -455px 0; }

li#durable a:hover, li#durable:hover a, li#durable.over a
    { background-position: 0 0;       }
li#efficient a:hover, li#efficient:hover a, li#efficient.over a
    { background-position: -140px 0;  }
li#healthy a:hover, li#healthy:hover a, li#healthy.over a
    { background-position: -304px 0;  }
li#beautiful a:hover, li#beautiful:hover a, li#beautiful.over a
    { background-position: -455px 0; }

/* Content areas
----------------------------------------------------------------------------- */
#content {
    font-size: 13px;
    border-top: 5px solid #aab300;
    padding: 10px 0;
}
.green_info {
    background: url(../img/tree2.png) no-repeat bottom right;
    border: 1px solid #FFF;
}
.green_info p,
.green_info ul {
    width: 475px;
}
.green_info li {
    margin-bottom: 5px;
}

.gi_nav li {
    display: inline;
    font-weight: bold;
    text-transform: lowercase;
    color: #666;
    background: url(../img/arrow_gray_right.png) no-repeat left 5px;
    padding-left: 10px;
    padding-right: 10px;
}
.gi_nav li.back {
    background: url(../img/arrow_gray_left.png) no-repeat left 4px;
    padding-right: 0;
    text-transform: none;
}
.gi_nav li.next {
    background: url(../img/arrow_gray_right.png) no-repeat right 4px;
    text-transform: none;
}
.gi_nav li.gi {
    padding-left: 12px;
    background: url(../img/arrow_gray_right.png) no-repeat left 4px;
    text-transform: none;
    color: #abb402;
}
.gi_nav li.gi span {
    padding-right: 12px;
    background: url(../img/gi_pipe.png) no-repeat right 3px;
}
.gi_nav li a {
    color: #666;
    text-decoration: none;
}
.gi_nav li.gi a {
    color: #abb402;
}

/* Design/Build steps
----------------------------------------------------------------------------- */
.step_info {
    color: #FFF;
    font-size: 13px;
    background: #aab300 url(../img/step_info_bg.png) no-repeat 40px bottom;
    padding: 20px 40px 0 250px;
    margin-bottom: 10px;
    min-height: 180px
}
.step_info h3 {
    color: #703319;
    margin-bottom: 0;
    font-weight: bold;
}
.step_info a {
    color: #FFF;
}
.step_info li {
    background: url(../img/arrow_white_right.png) no-repeat left 5px;
    padding-left: 10px;
}
#step_2 #cd_info {
    width: 270px;
    background: #aab300 url(../img/step2_arrow.png) no-repeat right;
    float: left;
    padding-right: 70px;
}
#step_2 #cd_li ul {
    float: left;
    margin-top: 65px;
    padding-left: 20px;
}
#step_2 #cd_li li {
    color: #660000;
    background: url(../img/arrow_brown_right.png) no-repeat left 5px;
    padding-left: 10px;
}
#step_5 h3 {
    font-size: 18px;
    color: #FFF;
    text-transform: uppercase;
}

/* Design/Build info panels
----------------------------------------------------------------------------- */
#design_info {
    float: left;
    width: 200px;
    color: #aab300;
    margin-right: 60px;
}
#design_info a {
    color: #000;
}
#design_think {
    float: left;
    width: 240px;
    border-right: 2px solid #aab300;
    padding-right: 20px;
}
#design_think a {
    color: #000;
}
#design_do {
    float: left;
    width: 240px;
    padding-left: 20px;
}

/* Projects
----------------------------------------------------------------------------- */
div#projects {
    font-size: 13px;
    border-top: 5px solid #aab300;
    padding-bottom: 10px;
}
div#projects h1 {
    float: left;
    margin-top: 10px;
    margin-right: 20px;
}
div#projects #projects_nav {
    float: left;
    margin-top: 7px;
}
div#projects a#next_prj {
    float: right;
}
div#projects a {
    color: #685c53;
}

#project_info {
    color: #aab300;
    float: left;
    width: 225px;
    border-right: 2px solid #aab300;
    padding-right: 20px;
}
.project {
    margin-left: 270px;
    padding-right: 20px;
}
.project h3 {
    font-weight: bold;
    margin-bottom: 0;
}

/* People
----------------------------------------------------------------------------- */
#people_list {
    float: left;
    display: inline;
    width: 150px;
}
#people_list li {
    padding-left: 12px;
    background: url(../img/arrow_gray_right.png) no-repeat left 5px;
    margin-bottom: 5px;
}
#people_list li a {
    color: #666;
    font-weight: bold;
    text-decoration: none;
}
#people_list li a:hover,
#people_list li a.on {
    color: #abb402;
}
#people_list li.on {
    color: #abb402;
    background: url(../img/arrow_green_right.png) no-repeat left 5px;
}

.person {
    border-left: 2px solid #aab300;
    padding-left: 10px;
    float: left;
    display: inline;
    width: 620px;
}
.person h3 {
    font-weight: bold;
    margin-bottom: 0;
}
.person img {
    margin-bottom: 5px;
}
.person .person_photos {
    width: 160px;
    float: left;
    display: inline;
}
.person .person_bio {
    float: left;
    display: inline;
    width: 400px;
}
.person a {
    color: #685c53;
}


/* 8-step projects step menu
----------------------------------------------------------------------------- */
#projects_nav {
    height: 22px;
    width: 381px;
    z-index: 1000;
}
#projects_nav ul {
    margin: 0;
    padding: 0;
}
#projects_nav li {
    float: left;
    display: block;
}
#projects_nav li a {
    color: #FFF;
    display: block;
    padding: 0;
}
#projects_nav li span {
    position: absolute;
    left: -9384px;
}

li#prj_1 a, li#prj_2 a, li#prj_3 a, li#prj_4 a,
li#prj_5 a, li#prj_6 a, li#prj_7 a, li#prj_8 a {
    display: block;
    position: relative;
    height: 22px;
    background: url(../img/projects_nav.png) no-repeat;
}

li#prj_1   { width: 37px; }
li#prj_2   { width: 52px; }
li#prj_3   { width: 51px; }
li#prj_4   { width: 51px; }
li#prj_5   { width: 52px; }
li#prj_6   { width: 49px; }
li#prj_7   { width: 51px; }
li#prj_8   { width: 38px; }

li#prj_1 a { background-position: 0 0;      }
li#prj_2 a { background-position: -37px 0;  }
li#prj_3 a { background-position: -89px 0;  }
li#prj_4 a { background-position: -140px 0; }
li#prj_5 a { background-position: -191px 0; }
li#prj_6 a { background-position: -242px 0; }
li#prj_7 a { background-position: -294px 0; }
li#prj_8 a { background-position: -345px 0; }

li#prj_1 a:hover, li#prj_1:hover a, li#prj_1.over a
    { background-position: 0 -22px; }
li#prj_2 a:hover, li#prj_2:hover a, li#prj_2.over a
    { background-position: -37px -22px; }
li#prj_3 a:hover, li#prj_3:hover a, li#prj_3.over a
    { background-position: -89px -22px; }
li#prj_4 a:hover, li#prj_4:hover a, li#prj_4.over a
    { background-position: -140px -22px; }
li#prj_5 a:hover, li#prj_5:hover a, li#prj_5.over a
    { background-position: -191px -22px; }
li#prj_6 a:hover, li#prj_6:hover a, li#prj_6.over a
    { background-position: -242px -22px; }
li#prj_7 a:hover, li#prj_7:hover a, li#prj_7.over a
    { background-position: -294px -22px; }
li#prj_8 a:hover, li#prj_8:hover a, li#prj_8.over a
    { background-position: -345px -22px; }

/* Slideshow
----------------------------------------------------------------------------- */
#slideshow {
    list-style: none;
    margin-bottom: 10px;
}

/* Photo and Overlay
   http://host.sonspring.com/png_overlay/
----------------------------------------------------------------------------- */
.photo {
	position: relative;
	width: 799px;
	height: 345px;
	padding-bottom: 10px;
}

.photo_overlay {
	background: url(../img/photo_overlay.png) no-repeat;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 256px;
	height: 345px;
	z-index: 1000;
}
.photo_overlay_plain {
	background: url(../img/photo_overlay_plain.png) no-repeat;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 256px;
	height: 345px;
	z-index: 1000;
}

.photo_before {
    float: left;
    margin-right: 4px;
}
.photo_after {
    float: left;
}

/* Divs that need to be hidden by default
----------------------------------------------------------------------------- */
/*
#project_2, #project_3, #project_4, #project_5, #project_6, #project_7, #project_8,
#prjp_2, #prjp_3, #prjp_4, #prjp_5, #prjp_6, #prjp_7, #prjp_8,
#gi_1, #gi_2, #gi_3, #gi_4,
#step_1, #step_2, #step_3, #step_4, #step_5, #bp_2, #build_nav {
    display: none;
}
*/
h1#sbs_1, h1#sbs_2, h1#sbs_3, h1#sbs_4, h1#sbs_5 {
    display: none;
}

/* Design/Build step menu
----------------------------------------------------------------------------- */
#build_nav {
    height: 32px;
    width: 555px;
    z-index: 1000;
    margin-left: 170px;
    margin-bottom: 20px;
}
#build_nav ul {
    margin: 0;
    padding: 0;
}
#build_nav li {
    float: left;
    display: block;
}
#build_nav li a {
    color: #FFF;
    display: block;
    padding: 0;
}
#build_nav li span {
    position: absolute;
    left: -9384px;
}

li#bs_1 a, li#bs_2 a, li#bs_3 a, li#bs_4 a, li#bs_5 a {
    display: block;
    position: relative;
    height: 32px;
    background: url(../img/step_menu.png) no-repeat;
}

li#bs_1     { width: 77px;  }
li#bs_2     { width: 135px; }
li#bs_3     { width: 139px; }
li#bs_4     { width: 130px; }
li#bs_5     { width: 74px;  }

li#bs_1 a   { background-position: 0 0;      }
li#bs_2 a   { background-position: -77px 0;  }
li#bs_3 a   { background-position: -212px 0; }
li#bs_4 a   { background-position: -351px 0; }
li#bs_5 a 	{ background-position: -481px 0; }

li#bs_1 a:hover, li#bs_1:hover a, li#bs_1.over a
    { background-position: 0 -32px; }
li#bs_2 a:hover, li#bs_2:hover a, li#bs_2.over a
    { background-position: -77px -32px; }
li#bs_3 a:hover, li#bs_3:hover a, li#bs_3.over a
    { background-position: -212px -32px; }
li#bs_4 a:hover, li#bs_4:hover a, li#bs_4.over a
    { background-position: -351px -32px; }
li#bs_5 a:hover, li#bs_5:hover a, li#bs_5.over a
    { background-position: -481px -32px; }

/* Contact page
----------------------------------------------------------------------------- */
#contact_info {
    width: 325px;
    float: left;
    margin-right: 40px;
}
#contact_info .vcard {
    color: #aab300;
}
#contact_form {
    width: 390px;
    float: left;
    border-left: 2px solid #aab300;
    padding-left: 40px;
}
#contact_form label {
    font-weight: bold;
    color: #aab300;
    width: 120px;
    float: left;
}
#contact_form .text_input {
    width: 260px;
    border: 2px solid #CCC;
    margin-bottom: 5px;
}

/* Misc
----------------------------------------------------------------------------- */
/* http://sonspring.com/journal/clearing-floats */
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}