/* COLORS
======================================================================
	#b3b3b3 : grey (footer)
	#ffc200 : yellow (nav bar)
	#faec97 : yellow / light (text/links)
	#99d200 : green (title bar)
====================================================================== */


@import url(base.css);


/* GENERAL
====================================================================== */

html {}

body {
	min-width: 980px;
	background-color: #b3b3b3;
}

body, input, select, textarea {
	font-family: "Lucida Grande", arial, sans-serif;
}

h1 {
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	/* padding: 11px 18px 9px 18px; */
	padding: 8px 9px 6px 19px;
	background: #ccc;
	background: #99d200;
	border-bottom: 20px solid #fff;
	overflow: auto;
}

h1.Active {
	background: #99d200;
}

h1 span {
	padding: 3px 0 3px 0;
	display: block;
	float: left;
}

h1 a:link,
h1 a:visited {
	margin-left: 9px;
	float: right;
}

h1 em {
	font-style: normal;
	font-size: .8em;
	font-weight: normal;
	text-transform: lowercase;
	letter-spacing: 0;
	padding-left: 5px;
}

h2 {
	color: #faec97;
	font-size: 1em;
	line-height: 1;
	font-weight: bold;
	text-transform: uppercase;
	margin: 20px 0 -8px 0;
}

#icon_sections .Section h2 {
	font-size: .85em;
}

h3, h4, h5, h6 {
	margin-top: 2.2em;
	/* color: #333; */
	font-size: .8em;
	line-height: 1.4;
}

h4, h5, h6 {
	/* color: #666; */
}

h5, h6 {
	font-weight: normal
}

p, address, dl, ul, ol, table, label {
	color: #fff;
	margin-top: 1.2em;
	font-size: .75em;
	line-height: 1.8;
}

address p {
	font-size: 1em;
}

h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
	/* use to reduse space above first paragraph under any header */
}

p img,
dd img {
	margin: 5px 10px 5px 0;
}

img.Left,
img.Right {
	margin: 5px 20px 15px 20px;
}

img.Left,
p img[align="left"] {
	margin-left: 0;
}

img.Right,
p img[align="right"] {
	margin-right: 0;
}

img.Left {
	float: left;
}

img.Right {
	float: right;
}

ul {
	margin-left: 1.5em;
	list-style-type: disc;
}

ul ul {
	margin-top: 0;
	list-style-type: circle;
}

ol {
	margin-left: 1.5em;
	list-style-type: decimal;
}

ol ol {
	margin-top: 0;
	margin-left: 1.5em;
	list-style-type: lower-alpha
}

dl {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

dt {
	font-weight: bold;
	font-style: italic;
}

dd {
	margin-bottom: 1.5em;
}

blockquote {
	margin: 2em 0;
	padding: .5em 2em 1.5em 2em;
	/* good place to define a background */
}

blockquote p {
	/* good place to define typical font-size, line-height and margins */
}

cite {
	text-align: right;
	display: block;
}

cite:before {
  content: "- ";
}

em, q { font-style: italic; }

strong { font-weight: bold; }

a:link,
a:visited {
	color: #faec97;
}

a:hover,
a:active {
	color: #fff;
}



/* FORMS
====================================================================== */
/*
form {
	margin-top: 20px;
	width: 202px;
	text-align: left;
}

input, textarea {
	margin-bottom: 7px;
	padding: 5px;
	width: 190px;
	border: 1px solid #fff;
	display: block;
	color: #999;
	font-size: .7em;
}

input:focus, textarea:focus {
	color: #333;
}

textarea {
	padding: 5px 3px;
	width: 194px;
	height: 72px;
}

input.submit {
	width: 100%;
	padding: 4px 0 3px 0;
	color: #faec97;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0;
	background: #c0c0c0;
	border: none;
	cursor: pointer;
}

form[id="form-contactus"] input.submit:hover {
	background-color: #999;
}
*/
#section_download form {
/*    width: auto; */
}
    #section_download input {
        padding: 5px;
        width: 190px;
        border: 1px solid #fff;
        color: #999;
    }
    #section_download label {
        display: block;
        width: 200px;
        padding: 10px 0 0 0;
        clear: both;
        margin: 0;
    }
    #section_download input.submit {
        color: #faec97;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 0;
        background: #999;
        margin: 25px 0;
        width: 200px;
		cursor: pointer;
    }
    #section_download input.submit:hover {
        background: #666;
    }


/* CONTAINERS
====================================================================== */
#inner {
	background: #fff url(../_images/bg-left-sm.png) no-repeat left 215px;
}

#section_home #inner,
#section_contact #inner,
#section_archive #inner {
	background-image: url(../_images/bg-left.png);
}

#inner_two {
	background: transparent url(../_images/bg-right-sm.png) no-repeat right 40px;
}

#section_home #inner_two,
#section_contact #inner_two,
#section_archive #inner_two {
	background-image: url(../_images/bg-right.png);
}

#section_home #inner_two,
#section_contact #inner_two,
#section_news_and_press #inner_two,
#section_process #inner_two,
#section_studio #inner_two,
#section_archive #inner_two,
#section_download #inner_two {
	min-height: 450px;
}

#section_projects #inner_two {
	min-height: 570px;
}

#content {
	position: relative;
	width: 880px;
	margin: 0 auto;
}

#splash {
	text-align: center;
}

.ContentInner {
	position: absolute;
	top: 20px;
	left: 206px;
	width: 468px;
	min-height: 415px;
	padding-bottom: 20px;
	background: #b3b3b3;
}

.ContentInner .Post,
.ContentInner dl,
.ContentInner .Section,
.ContentInner #icon_sections .Section {
	padding: 0 20px 10px 20px;
}

.ContentInner dl {
	padding-top: 20px;
}




/* NAVIGATION
====================================================================== */
ul#nav {
	margin: 0;
	list-style-type: none;
	text-align: center;
	background: #eaaf00 url(../_images/nav-bg.gif) no-repeat center top;
}

#nav li {
	display: -moz-inline-box;  /* for Mozilla based browsers */
	display: inline-block;
}

#nav li a:link,
#nav li a:visited {
	display: block;  /* for Mozilla based browsers */
	display: inline-block;
	padding: 6px 36px;
	color: #fff;
	font-weight: bold;
}

#nav li.Last a:link,
#nav li.Last a:visited {

}

#nav li.Current a:link,
#nav li.Current a:visited {
}

#nav li a:link span,
#nav li a:visited span {
	border-bottom: 2px solid #eaaf00;
	-webkit-transition: all .1s linear;
}

#nav li a:hover span,
#nav li a:active span {
	border-bottom: 2px solid #fff;
}

#nav li.Current a:link span,
#nav li.Current a:visited span {
	border-bottom: 2px solid #ffe083;
}




/* SUB-NAVIGATION
====================================================================== */
.SubNav {
	position: absolute;
	top: 10px;
	font-size: .9em;
	background: url(../_images/subnav-bg.png) 0 0 repeat-y;
}

#sub_nav_left {
	left: 0;
	text-align: right;
}

#sub_nav_right {
	right: 0;
	text-align: left;
}

p.SubNavHeader,
p.SubNavHeader a:link,
p.SubNavHeader a:visited,
p.SubNavHeader a:hover,
p.SubNavHeader a:active {
	color: #99d200;
	font-size: .9em;
	margin-bottom: 12px;
	padding-bottom: 8px;
}

#sub_nav_left p.SubNavHeader {
	margin-right: 40px;
	padding-right: 13px;
	background: url(../_images/subnav_header-left.gif) right top no-repeat;
}

#sub_nav_right p.SubNavHeader {
	margin-left: 40px;
	padding-left: 13px;
	background: url(../_images/subnav_header-right.gif) left top no-repeat;
}

#sub_nav_left li {
	padding-right: 40px;
}

#sub_nav_right li {
	padding-left: 40px;
}

#sub_nav_right p.SubNavHeader,
#sub_nav_right p.SubNavHeader a:link,
#sub_nav_right p.SubNavHeader a:visited,
#sub_nav_right p.SubNavHeader a:hover,
#sub_nav_right p.SubNavHeader a:active {
	color: #ffc200;
}

.SubNav ul {
	margin: 0;
	width: 206px;
	list-style-type: none;
	color: #c0c0c0;
}
.SubNav li {
    line-height: 1.2;
}

.SubNav li span,
.SubNav li a:link,
.SubNav li a:visited {
	color: #c0c0c0;
	padding: 0 0 12px 0;
	-webkit-transition: color .1s linear;
	line-height: 1.2;
}
.SubNav li a:link,
.SubNav li a:visited {
    display: inline-block;
}
.SubNav li span {
    display: block;
}

.SubNav address p a:link,
.SubNav address p a:visited {
	color: #c0c0c0;
	-webkit-transition: color .1s linear;
}

.SubNav address {
	margin: 0 0 15px 0;
	padding: 0 0 0 53px;
	width: 154px;
}

.SubNav address p {
	margin: 0 0 1em 0;
	font-size: 1em;
	line-height: 1.6;
	color: #c0c0c0;
	-webkit-transition: color .1s linear;
}

.SubNav address:hover p {
	color: #999;
}

#sub_nav_left li span,
#sub_nav_left li a:link,
#sub_nav_left li a:visited {
	padding-right: 13px;
}

#sub_nav_right li span,
#sub_nav_right li a:link,
#sub_nav_right li a:visited {
	padding-left: 13px;
}

.SubNav ul:hover li a:link,
.SubNav ul:hover li a:visited,
.SubNav address p a:hover {
	color: #999;
}

#sub_nav_left li.Current a:link,
#sub_nav_left li.Current a:visited {
	background: url(../_images/subnav_arrow-left.gif) right 4px no-repeat;
}

#sub_nav_right li.Current a:link,
#sub_nav_right li.Current a:visited {
	background: url(../_images/subnav_arrow-right.gif) left 4px no-repeat;
}

.SubNav li a:hover,
.SubNav li a:active,
.SubNav ul:hover li a:hover,
.SubNav ul:hover li a:active {
	color: #444;
}




/* HEADER
====================================================================== */
#header {
	padding-top: 22px;
	text-align: center;
}




/* FOOTER
====================================================================== */
#footer {
	padding: 10px;
	background-color: #b3b3b3;
	overflow: auto;
}

#footer p {
	margin: 0;
}

#copy_credit, #client_login {
	font-size: .75em;
	font-weight: bold;
}

#client_login {
	font-size: .65em;
}

#copy_credit {
	float: left;
}

#client_login {
	float: right;
}

#footer,
#footer a:link,
#footer a:visited {
	color: #fff;
}

#footer #credit a:link,
#footer #credit a:visited {
	color: #e1e1e1;
}

#footer a:hover,
#footer a:active,
#footer #credit a:hover,
#footer #credit a:active {
	color: #faec97;
}

#footer #client_login a:link,
#footer #client_login a:visited {
	background: url(../_images/arrow-small.gif) right 0 no-repeat;
	padding: 1px 20px 2px 0;
}

#footer #client_login a:hover,
#footer #client_login a:active {
	background-position: right -30px;
}




/* HOME
====================================================================== */
#three_words {
	padding: 25px 0 0 0;
	text-align: center;
}

#three_words a:link span,
#three_words a:visited span {
	display: none;
}

#three_words a:link,
#three_words a:visited {
	margin: 0 30px;
	height: 30px;
	background-position: center 0;
	background-repeat: no-repeat;
	display: block;  /* for Mozilla based browsers */
	display: -moz-inline-box;  /* for Mozilla based browsers */
	display: inline-block;
}

#three_words a:hover,
#three_words a:active {
	background-position: center -60px;
}

#three_words_beautiful {
	width: 140px;
	background-image: url(../_images/3words-beautiful.gif);
}

#three_words_sustainable {
	width: 155px;
	background-image: url(../_images/3words-sustainable.gif);
}

#three_words_attainable {
	width: 140px;
	background-image: url(../_images/3words-attainable.gif);
}

.NewsFlashOuter {
	position: absolute;
	top: 380px;
	width: 100%;
	padding-bottom: 20px;
}

.NewsFlash a:link,
.NewsFlash a:visited {
	margin: 0 auto 5px auto;
	display: block;
	width: 525px;
	height: 27px;
	text-align: center;
	color: #fff;
	font-size: .75em;
	line-height: 2.4;
	background: url(../_images/news_flash.gif) center 0 no-repeat;
}

.NewsFlash a:link span,
.NewsFlash a:visited span {
	display: block;
	margin: 0 auto;
	width: 450px;
	height: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.NewsFlash a:link strong,
.NewsFlash a:visited strong {
	padding-right: .5em;
	color: #faec97;
}

.NewsFlash a:hover,
.NewsFlash a:active {
	background-position: right -54px;
}




/* PROJECTS
====================================================================== */
#projects_grid {
	background: #fff;
	overflow: auto;
}

#section_archive #projects_grid {
	background: transparent;
	overflow: auto;
	border: 0;
}

#projects_grid a:link,
#projects_grid a:visited {
	height: 60px;
	width: 60px;
	margin: 0 21px 21px 0;
	display: block;
	float: left;
	opacity: .5;
	-moz-opacity: .5;
	-webkit-transition: opacity .1s linear;
}

#section_archive #projects_grid a:link,
#section_archive #projects_grid a:visited {
	width: 204px;
	width: 164px;
	margin: 0 0 21px 0;
	padding: 20px;
	opacity: 1;
	-moz-opacity: 1;
}

#projects_grid a.Last:link,
#projects_grid a.Last:visited {
	margin-right: 0;
}

#projects_grid a:link img,
#projects_grid a:visited img {
	margin: 0;
}

#section_archive #projects_grid a:link img,
#section_archive #projects_grid a:visited img {
	border: 3px solid #fff;
	margin-right: 10px;
	float: left;
}

#section_archive #projects_grid a:link span,
#section_archive #projects_grid a:visited span {
	float: left;
	font-size: .8em;
	font-weight: bold;
	line-height: 1.2;
	display: block;
	width: 88px;
}

#projects_grid a:hover,
#projects_grid a:active {
	opacity: 1;
	-moz-opacity: 1;
}

#projects_built,
#projects_progress {
	margin: 0;
	padding: 0;
	width: 222px;
	list-style-type: none;
	float: left;
}

#projects_progress {
	float: right;
}

#archives_note {
	color: #ccc;
	font-size: .85em;
	padding: 0 20px 10px 20px;
}

#archives_note a:link,
#archives_note a:visited {
	color: #fff;
	font-weight: bold;
}

#archives_note a:hover,
#archives_note a:active {
	color: #faec97;
}

#archives_note a.Archive {
	margin: 16px 30px 0 0;
	display: block;
	float: left;
	background: #fff;
	border: 1px solid #fff;
}

#archives_note a img {
	opacity: .4;
	filter: alpha(opacity=40);
}

/*
#archives_note a img:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
*/

#archives_note a.Last {
	margin-right: 0px;
}

#project_photos {
	background: #fff;
	border-bottom: 20px solid #fff;
	overflow: auto;
}

#project_photos p {
	margin: 6px 0 10px 0;
	height: 36px;
	color: #c0c0c0;
	font-size: .6em;
	overflow: hidden;
}

#project_photos strong {
	color: #999;
	font-weight: normal;
	padding-right: 2px;
}

#project_photos #featured {
	float: left;
	margin: 0 15px 0 0;
}

#project_photos a:link,
#project_photos a:visited {
	margin: 0 3px 3px 0;
	display: block;
	float: left;
}

#project_photos a#featured:link img,
#project_photos a#featured:visited img {
	width: 198px;
	height: 135px;
}

#project_photos a:link img,
#project_photos a:visited img {
	width: 40px;
	height: 40px;
}

#project_photos a#featured:hover img,
#project_photos a#featured:active img {
	border: none;
	width: 198px;
	height: 135px;
}

#project_photos a:hover img,
#project_photos a:active img {
	border: 2px solid #fff;
	width: 36px;
	height: 36px;
}

#project_photos a.Last:link,
#project_photos a.Last:visited {
	margin: 0 0 3px 0;
}

#project_photos div.Row {
	overflow: auto;
}

.ContentInner #icon_sections .Section {
	padding-left: 70px;
	padding-top: 1px;
	background-position: 20px 12px;
	background-repeat: no-repeat;
}

.ContentInner #icon_sections {
	padding-top: 20px;
}

#award_winning {
	background-image: url(../_images/icons/award_winning-lg.gif);
}

#budget, #budget_economy {
	background-image: url(../_images/icons/budget-lg.gif);
}

#sustainable_landscape {
	background-image: url(../_images/icons/sustainable_landscape-lg.gif);
}

#energy_efficient {
	background-image: url(../_images/icons/energy_efficient-lg.gif);
}

#in_town {
	background-image: url(../_images/icons/in_town-lg.gif);
}

#renewable_materials {
	background-image: url(../_images/icons/renewable_materials-lg.gif);
}

#renewable_power {
	background-image: url(../_images/icons/renewable_power-lg.gif);
}

#renovation {
	background-image: url(../_images/icons/renovation-lg.gif);
}

#sustainable_landscape {
	background-image: url(../_images/icons/sustainable_landscape-lg.gif);
}

#water_conservation {
	background-image: url(../_images/icons/water_conservation-lg.gif);
}




/* CONTACT
====================================================================== */
#map {
	margin: 20px 20px 0 20px;
	display: block;
	float: left;
}

a#map:link img,
a#map:visited img {
	border: 3px solid #ccc;
}

#section_contact address {
	padding: 0 20px 15px 20px;
	border-bottom: 3px solid #c2c2c2;
	overflow: auto;
}

#section_contact address p {
	font-size: 1.2em;
	line-height: 1.6;
	font-weight: bold;
	margin: 0;
}

#section_contact address p.Left {
	float: left;
	text-align: left;
}

#section_contact address p.Right {
	float: right;
	text-align: right;
}

#section_contact form {
	float: left;
}





/* CUSTOM CLASSES
====================================================================== */
.Post p.Date {
	margin: 6px 0 0 0;
	border-bottom: 3px solid #c2c2c2;
	color: #d9d9d9;
	font-weight: bold;
	font-style: italic;
	text-align: right;
	clear: both;
}

.Post img,
dd img {
	border: 3px solid #fff;
}

dl.Featured dt {
	color: #faec97;
	font-size: 1.2em;
	font-weight: bold;
	font-style: normal;
	text-transform: uppercase;
}

dl.Featured dd {
	margin-bottom: 2.4em;
}

img.BioPhoto {
	float: right;
	border: 20px solid #fff;
	border-width: 0 0 20px 20px;
	margin: 0 0 20px 20px;
}

p.Msg {
	padding: 20px;
	clear: left;
}

p.Msg strong {
	color: #faec97;
}

#honeypot {
	position: absolute;
	left: -4000px;
	height: 1px;
	width: 1px;
	visibility: hidden;
}

/*  style fancy zoom images
a[href $='.jpg'] {
}
*/

#email {
	font-size: 1.2em;
	font-weight: bold;
}

a#podcast {
	margin: 6px 0 0 0;
	font-weight: bold;
	font-style: italic;
	text-align: right;
	clear: both;
}


#projects_grid a.attainable_thumb {
    width: 30px;
    height: 30px;
    display: block;
    margin: 15px 21px 36px 15px;
    padding: 0 15px 0 0;
    background-image: url("../_images/butterfly.gif");
    background-position: left top;
    background-repeat: no-repeat;
    opacity: 1;
    -moz-opacity: 1;
}
#projects_grid a.attainable_thumb:hover,
#projects_grid a.attainable_thumb:active {
    background-position: left bottom;
}