body { color: #666; font-family: helvetica, arial, sans-serif;}

#header { height: 320px;}
.wrapper { width: 1110px; margin: 0 auto; position: relative;}

#header h1 { position: absolute; width: 46px; height: 260px; top: 340px; left: 0;}
#nav, #overview { width: 980px; margin: 0 65px;}
#nav li { float: left;}
#nav li a { background-position: 0 0; background-repeat: no-repeat; width: 139px; height: 60px; float: left; border-left: 1px solid #888; text-indent: -5000px;}
#nav li a:hover, .projects #projects a, .services #services a, .profile #profile a, .philosophy #philosophy a, .news #news a, .contact #contact a { background-position: 0 -60px;}

#nav li#home a { width: 140px; border: 0;}
#home a { background-image: url(/images/site/nav_home.png);}
#profile a { background-image: url(/images/site/nav_profile.gif);}
#philosophy a { background-image: url(/images/site/nav_philosophy.gif);}
#services a { background-image: url(/images/site/nav_services.gif);}
#projects a { background-image: url(/images/site/nav_projects.gif);}
#news a { background-image: url(/images/site/nav_news.gif);}
#contact a { background-image: url(/images/site/nav_contact.png);}

#overview { background-color: #fff; width: 620px; height: 200px; float: left; margin-top: 20px; margin-right: 0; padding: 20px;}
#page { background-position: 0 0; background-repeat: repeat-y; width: 1110px; margin: 20px auto; clear: left; overflow: auto;}
#page .wrapper { width: 960px; margin: 0 75px; overflow: hidden;}
#footer { background: #fff url(/images/site/bg_footer.gif) 0 0 no-repeat; width: 940px; float: left; margin: 10px 10px 0 10px; padding-top: 24px;}
.news #footer { background-image: url(/images/site/bg_footer_news.gif); width: 720px; padding: 34px 10px 0 10px; margin: 0;}
.home #footer { display: none;}

.news #subnav, .news #subnav li a, .profile #subnav, .profile #subnav li a, 
.philosophy #subnav, .philosophy #subnav li a { width: 320px; margin-right: 0;}


.services #page, .profile #page, .philosophy #page, .contact #page { background-image: url(/images/site/bg_page.gif);}
.projects #page { background-image: url(/images/site/bg_project.gif);}
.type #page { background-image: url(/images/site/bg_type.gif);}
.news #page { background-image: url(/images/site/bg_news.gif);}
.profile #page.bg300-620, .philosophy #page.bg300-620 { background-image: url(/images/site/bg300-620.gif);}
.profile #page.bg940 { background-image: url(/images/site/bg940.gif);}
.our-team #page { background-image: url(/images/site/bg_team.gif);}

.services-index #page, .projects-index #page { background: none; padding-top: 280px;}

.col { width: 380px; float: left; margin: 0 10px;}
.right { float: right;}
.col img, .html_photoset { margin: 10px 0;}

.w220 { width: 220px;}
.w300 { width: 300px;}
.w460 { width: 460px;}
.w540 { width: 540px;}
.w620 { width: 620px;}
.w940 { width: 940px;}

.w200 { width: 200px;}
.w500 { width: 500px;}

.col1 { width: 160px; margin: 0;}
.col2 { width: 320px; margin: 0;}
.col3 { width: 480px; margin: 0;}
.col4 { width: 640px; margin: 0;}
.col6 { width: 960px; margin: 0;}

#crumbs { color: #999; font-size: 0.75em; margin: -5px 0 20px 2px;}
#crumbs a, #crumb a:visited { color: #666; border: 0;}
#crumbs a:hover { color: #f93;}

#subnav { width: 640px;}
#subnav li, #overview dd { float: left;}
#subnav li a, #overview dd a { color: #666; width: 295px; float: left; padding: 6px 0 3px 5px; font-size: 0.6875em; line-height: 1.25em; text-transform: uppercase; border-top: 1px solid #ddd;}
#subnav li a { margin: -1px 20px 0 0; border-bottom: 1px solid #ddd;}
#subnav li a.active { color: #aaa;}
#subnav li a:hover, #overview dd a:hover { color: #f93; background-color: #eee;}

#overview dl { width: 300px; border-bottom: 1px solid #ddd; overflow: auto;}
#overview dt { background: url(/images/site/dt_right.gif) top right no-repeat; float: left; margin-bottom: 8px;}
#overview dt a { color: #fff; background: url(/images/site/dt_left.gif) top left no-repeat; float: left; padding: 0.4167em 0.583em; font-size: 0.75em; font-weight: bold;}

#type_list li, #listed li { width: 120px; height: 120px; float: left; margin: 0 10px 20px 10px; padding: 10px; position: relative;}
#type_list li div, #type_list img { position: absolute; top: 0; left: 0; margin: 0;}
#type_list li div, #type_list li div.overlay { width: 120px; height: 120px; padding: 10px; z-index: 20;}
#type_list li div { background: none; }
#type_list li div.overlay { background: #000; width: 140px; height: 140px; padding: 0; margin: 0; z-index: 15; opacity: 0.6; filter: alpha(opacity=60);}
#type_list h3, #listed h3, #type_list p, #listed p { color: #fff; font-size: 0.75em; line-height: 1.333em; margin: 0;}
#type_list h3 a { color: #f93;}
#listed h3 { color: #fff;}

.clear { clear: both;}
.right { left: 160px;}

.public #featured_type, .museums #featured_type, .residential #type_list { height: 640px;}
.heritage #featured_type { height: 320px;}
.institutional #listed_type, .industrial #type_list, .infrastructure #listed { height: 470px;}
.commercial #type_list, .education #type_list { height: 320px;}

.residential #page .wrapper { background: url(/images/site/bg_residential.gif) 10px 0 no-repeat;}
.education #page .wrapper { background: url(/images/site/bg_education.gif) 330px 0 no-repeat;}
.commercial #page .wrapper { background: url(/images/site/bg_commercial.gif) 330px 0 no-repeat;}
.religious #page .wrapper { background: url(/images/site/bg_religious.gif) 330px 0 no-repeat;}
.industrial #page .wrapper { background: url(/images/site/bg_industrial.jpg) 330px 0 no-repeat;}
.infrastructure #page .wrapper { background: url(/images/site/bg_infrastructure.gif) 330px 0 no-repeat;}
.institutional #page .wrapper { background: url(/images/site/bg_institutional.gif) 10px 0 no-repeat;}
.monuments #page .wrapper { background: url(/images/site/bg_monuments.gif) 330px 0 no-repeat;}
.museums #page .wrapper { background: url(/images/site/bg_museums.jpg) 330px 0 no-repeat;}
.heritage #page .wrapper { background: url(/images/site/bg_heritage.gif) 330px 0 no-repeat;}
.public #page .wrapper { background: url(/images/site/bg_public.jpg) 330px 0 no-repeat;}

#slideshow li h3, #slideshow li p { font-size: 0.75em; line-height: 1.333em;}
#slideshow li h3 { margin: 10px 0 0 0;}
#slideshow li p { color: #888;}

.services #slideshow { width: 300px;}
.projects #slideshow h3 { font-weight: normal; margin: 0;}
.projects #slideshow h3 a { font-weight: bold;}

#project_list li { width: 300px; float: left; font-size: 0.75em; line-height: 1.333em; margin-bottom: 0.833em; overflow: hidden;}
#project_list li a { color: #666; font-weight: bold; display: block;}
#project_list li a:hover { color: #f93;}
#project_list h3 { color: #f93; font-size: 1.125em; margin-bottom: 0.5em;}

#gallery ul { overflow: hidden; margin-bottom: 20px; clear: left;}
#gallery img { top: 0; left: 0;}
#gallery li p { color: #aaa;}
#gallery li p strong { color: #777;}

#controls p { margin: 0; font-size: 0.6875em; text-transform: uppercase;}
#controls a { color: #fff; background: #ddd; float: left; padding: 5px 10px; margin-right: 5px; border: 0; }
#controls a:hover { background: #aaa;}

#team li { width: 140px; height: 11.25em; float: left; margin: 0 10px 20px 10px; position: relative;}
#team li img { margin: 0 0 5px 0;}
#team li h2 { font-size: 0.8em;}
#team dl, #team dt, #team dd { width: 140px; float: left;}
#team dl { background: #666; width: 180px; padding: 10px; display: none; position: absolute; top: 20px; left: -30px; z-index: 200;}
#team dt { color: #fff; font-size: 0.8125em; line-height: 1em; font-weight: bold; margin-bottom: 5px;}
#team dd { color: #ccc; background: url(/images/site/bullet_team.png) 0 5px no-repeat; padding-left: 10px; font-size: 0.6875em; line-height: 1.333em; margin: 0;}
#team #featured { background-color: #eee; width: 430px; height: 43.75em; padding: 20px 10px 20px 20px; margin: 0 10px 0 0;}
#team #featured dl, #team #featured dt, #team #featured dd, #team #featured h2 { width: 190px;}
#team #featured dl { display: block; background: none; padding: 0; position: relative; top: 0; left: 0;}
#team #featured h2 { float: right; font-size: 1.5em; }
#team #featured dt { color: #666; font-size: 0.9375em; padding-bottom: 5px; border-bottom: 7px solid #ccc;}
#team #featured dd { color: #666; font-size: 0.75em;}
#team #featured img { width: 220px; float: left; margin: 0 20px 20px 0;}
#team #featured .intro { clear: left; font-size: 1em; line-height: 1.375em;}

.item { margin-bottom: 20px;}
.read_more { color: #666; background: none; padding: 0; border-bottom: 1px solid #ccc;}
a.read_more:hover { color: #f93; background: none;}

.post { padding-bottom: 50px; border-bottom: 1px solid #ccc; margin-bottom: 5px;}
.link h2 { margin-top: 10px; line-height: 0; font-family: arial;}
.link h2 a { background: #e5e5e5 url(/images/site/bg_link.png) center right no-repeat; padding: 3px 30px 5px 7px; line-height: 0; font-size: 1em;}
.description { width: 476px; float: left; border-left: 4px solid #ccc; padding-left: 10px; margin: 15px 0; font-size: 0.923em; }
.description p { margin: 0;}
.label { font-weight: bold;}
.tags dt, .tags dd { color: #888; display: inline; font-size: 0.75em;}
.tags dd a { color: #888; margin-left: 0.5em;}

#news_footer { background: #ccc; width: 490px; float: left; padding: 2px 5px; margin-top: -5px;}
#news_footer p { margin: 0; font-weight: bold;}
#page_count { width: 200px; float: left;}
#news_pages { float: right; text-align: right; color: #999; text-transform: uppercase;}
#news_pages a { color: #666; border: 0;}
#news_pages a:hover { color: #f93;}
.news p strong { font-weight: bold;}

#search { width: 325px; float: left; margin-top: 15px;}
#search_input { width: 257px; float: left; margin-right: 5px;}

ul.inline { margin: 0 0 1em 7px; padding-left: 8px;}
.inline li { font-size: 0.8125em; line-height: 1.385em; list-style-type: disc; margin: 0;}
.inline dt { color: #888; width: 300px; float: left; font-weight: bold; font-size: 0.8125em; line-height: 1.385em; margin-bottom: 0.5em; line-height: 1.5em;}

#googlemap { width: 300px; height: 550px;}
#contact_details { width: 320px; float: left; margin: 10px 0 0 -20px; text-transform: uppercase;}
#contact_details h3 { font-size: 0.718em; font-weight: normal; margin-bottom: 10px;}
#contact_details p { clear: left; font-size: 0.719em;}
#contact_details span { float: left; width: 70px; text-align: right; margin-right: 5px; color: #f93; font-weight: normal;}
#contact_details .right { color: #666; margin: 0 0 0 6.5125em; text-align: left;}
#contact_details .phone { margin: 25px 0 10px 0;}
#contact_details a { border: 0;}

h2 { color: #f93; font-size: 1.6875em; font-weight: normal; margin-bottom: 15px;}
#page h2 { font-size: 1.125em; line-height: 1.111em; font-weight: bold; margin-bottom: 10px;}
p, h3 { font-size: 0.8125em; line-height: 1.385em; margin-bottom: 1em;}
h3 { font-weight: bold; margin-bottom: 0;}
h4 { color: #888; font-size: 0.7em; line-height: 1.667em;}
p.intro { color: #333; font-size: 1.125em; line-height: 1.222em;}
p em { font-style: italic;}

blockquote { background: url(/images/site/quote.png) 0 0 no-repeat; padding-top: 30px;}
blockquote p { color: #444; font-size: 0.875em; line-height: 1.428em;}
.credit { color: #aaa; font-size: 0.75em; line-height: 1.333em;}
.credit a { color: #f93; border: 0;}
.credit a:hover { border-bottom: 1px solid #f93;}
p.photo { text-align: right;} 
p.photo strong { color: #777;}
p.quote { color: #888; border-left: 4px solid #ccc; padding-left: 10px;}

.projects blockquote { width: 380px; margin-top: 35px;}
.news blockquote { margin-top: 30px;}
.news p.credit { border: 0; padding: 0; margin-bottom: 40px;}

#footer p { font-size: 0.6875em; line-height: 1.454em; color: #c4c4c4;}
#footer strong { font-weight: bold; display: block;}

a, a:visited { text-decoration: none;}
h3 a { color: #666;}
h2 a, h3 a:hover { color: #f93;}
p a { color: #666; border-bottom: 1px solid #f93;}
p a:hover { color: #f93;}
.hover { cursor: pointer;}

.home #header { height: 220px;}
.home p.intro { color: #777; font-size: 1.375em; line-height: 1.181em; margin: 8px 0 10px 0;}
.home .col { margin-left: 490px;}
#home_project { margin-left: -950px;}

#home_project li { width: 460px; height: 390px; float: left; position: relative;}
#home_project li div { width: 240px; height: 350px; padding: 20px 10px; position: absolute; top: 0; left: 0;}
#home_project .more a { color: #fff;}
#home_project h2 { color: #fff;}
#home_project h2.reverse { color: #f93;}