@charset "UTF-8";
/* CSS Document */

* {margin: 0; padding: 0;}
img {border:none;}

.clear {clear:both;}
.align-right {float:right;}
.align-left {float:left;}
sup,sub {height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;}
sup {bottom: 1ex;}
sub {top: .5ex;}


body {background-color:#ece6dd;}

div#wrapper{margin:0 auto;}

/*-------------------------Header */
div#header-wrapper {margin:17px auto 0; width:960px; padding:0 10px;}
div#header {}
div#logo {float:left;}
div#logo a {display:block; height:85px; width:331px; background:url(../images/logo.png) 0 0;}
div#logo a span {display:none;}

/*-------------------------Main Nav */
div#nav {float:left;}
div#nav ul { list-style:none; margin:0; padding:0;}
div#nav li { float:left;}
div#nav li a {display:block; height:85px; background-image:url(../images/nav.png);}
div#nav li a span { display:none;}

a#nav-about { background-position:0 0; width:90px;}
a#nav-about:hover { background-position:0 -85px;}

a#nav-gallery { background-position:-90px 0; width:94px;}
a#nav-gallery:hover { background-position:-90px -85px;}

a#nav-sustain { background-position:-184px 0; width:145px;}
a#nav-sustain:hover { background-position:-184px -85px;}

a#nav-industry { background-position:-329px 0; width:200px;}
a#nav-industry:hover { background-position:-329px -85px;}

a#nav-contact { background-position:-529px 0; width:100px;}
a#nav-contact:hover { background-position:-529px -85px;}

body#about a#nav-about { background-position:0 -85px;}
body#gallery a#nav-gallery { background-position:-90px -85px;}
body#sustain a#nav-sustain { background-position:-184px -85px;}
body#industry a#nav-industry { background-position:-329px -85px;}
body#contact a#nav-contact { background-position:-529px -85px;}

/*-------------------------Content */
div#content-wrapper {margin:0 auto; width:980px;}

div#hp-banner { width:980px; height:378px;}
div#hp-banner-top {width:980px; height:14px; background:url(../images/banner-top.png) 0 0 no-repeat;}
div#hp-banner-container { background:url(../images/banner-bkg.png) 0 0 repeat-y; width:960px; padding:0 10px; height:363px;}
div#hp-banner-img { background:url(../images/banner-example.jpg) 0 0 no-repeat; height:363px; width:960px;}

div#sub-banner {width:980px; height:266px;}
div#sub-banner-top {width:980px; height:14px; background:url(../images/banner-top.png) 0 0 no-repeat;}
div#sub-banner-container {background:url(../images/banner-bkg.png) 0 0 repeat-y; width:960px; padding:0 10px; height:266px;}
div#sub-banner-img {background:url(../images/subpage-banners/banner-example.jpg) 0 0 no-repeat; height:266px; width:960px;}
div#sub-banner-img-philosophy {background:url(../images/subpage-banners/banner-philosophy.jpg) 0 0 no-repeat; height:266px; width:960px;}
div#sub-banner-img-services {background:url(../images/subpage-banners/banner-services.jpg) 0 0 no-repeat; height:266px; width:960px;}
div#sub-banner-img-sustainability {background:url(../images/subpage-banners/banner-sustainability.jpg) 0 0 no-repeat; height:266px; width:960px;}
div#sub-banner-img-resources {background:url(../images/subpage-banners/banner-resources.jpg) 0 0 no-repeat; height:266px; width:960px;}
div#sub-banner-img-contact {background:url(../images/subpage-banners/banner-contact.jpg) 0 0 no-repeat; height:266px; width:960px;}



div#content-container { background:url(../images/content-bkg.png) 0 0 repeat-y; width:980px;}
/*body.sub div#content-container {background:url(../images/content-bkg-sub.png) 0 0 repeat-y; }*/
body.sub div#content-container {background:url(../images/content-bkg.png) 0 0 repeat-y; }

div#content-container-top { background:url(../images/content-top.png) 0 0 no-repeat; height:19px;}
body#gallery div#content-container-top { background:url(../images/content-top.png) 0 0 no-repeat; height:19px;}
body.sub div#content-container-top { background:url(../images/content-top-sub.png) 0 0 no-repeat;}
body#industry div#content-container-top { background:url(../images/content-top-sub.png) 0 0 no-repeat;}
body#sustain div#content-container-top { background:url(../images/content-top-sub.png) 0 0 no-repeat;}

div#content-container-bottom { background:url(../images/content-bottom.png) 0 0 no-repeat; height:19px;}
/*body.sub div#content-container-bottom { background:url(../images/content-bottom-sub.png) 0 0 no-repeat;}*/
body.sub div#content-container-bottom { background:url(../images/content-bottom.png) 0 0 no-repeat;}

/*
div.items div a.see-more span {display:none;}
div.items div a.see-more {display:block; background:url(../images/read-more-banner.png) 0 0 no-repeat; width:112px; height:26px; position:absolute; top:100px; left:20px;}
div.items div a.see-more:hover { background-position: 0 -26px;}
*/

div#hp-content-left {float:left; width:355px; margin-top:-3px; }
body.sub div#hp-content-left, body#gallery div#hp-content-left { background-image:none;}

div#hp-content-left-wrapper {float:left; width:355px;}

div#call-out-buttons {width:355px; margin-top:-19px;}
div.no-top-margin {margin-top:0 !important;}
div#call-out-buttons a { display:block; background-image:url(../images/call-out.png); height:131px; float:left;}
body.sub div#call-out-buttons a {background-image:url(../images/call-out.png);}
/*body.sub div#call-out-buttons a {background-image:url(../images/call-out-hp.png);}*/
div#call-out-buttons a span {display:none;}

#hp-content-left .houzz { margin:10px 0 0 82px; }

a#strata { background-position:0 0; width:120px;}
a#strata:hover { background-position: 0 -131px;}
a#concrete { background-position:-120px 0; width:113px;}
a#concrete:hover { background-position: -120px -131px;}
a#gallery {background-position:-233px 0; width:122px;}
a#gallery:hover { background-position: -233px -131px;}

div#sub-nav {}
div#sub-nav ul { list-style:none; margin-left:10px;}
div#sub-nav a span {display:none;}
div#sub-nav li a { display:block; width:331px; background-image:url(../images/sub-nav-about-2.png);}

a#our-story { height:33px; background-position: 0 0; }
a#our-story:hover { background-position: -331px 0;}
a#our-philosophy { height:42px; background-position: 0 -33px; }
a#our-philosophy:hover { background-position: -331px -33px;}
a#our-services { height:42px; background-position: 0 -75px; }
a#our-services:hover { background-position: -331px -75px;}

body.our-story a#our-story { background-position: -331px 0;}
body.our-philosophy a#our-philosophy { background-position: -331px -33px;}
body.our-services a#our-services { background-position: -331px -75px;}

div#sub-nav-gal {}
div#sub-nav-gal ul {list-style:none; margin-left:10px;}
div#sub-nav-gal a span {display:none;}
div#sub-nav-gal li a { display:block; width:331px; background-image:url(../images/sub-nav-gallery.png);}

 a#gal-res-new {height:33px; background-position: 0 0;}
a#gal-res-new:hover {background-position: -331px 0;}
a#gal-res-ren {height:42px; background-position: 0 -33px;}
a#gal-res-ren:hover {background-position: -331px -33px;}
a#gal-commercial {height:42px; background-position: 0 -75px;}
a#gal-commercial:hover {background-position: -331px -75px;}

body.gal-res-new a#gal-res-new {background-position: -331px 0;}
body.gal-res-ren a#gal-res-ren {background-position: -331px -33px;}
body.gal-commercial a#gal-commercial {background-position: -331px -75px;}


div.spotlight {background-color:#54514c; color:#FFF; width:308px; margin:7px 0 12px 0; font-family:Helvetica, sans-serif, Arial; font-size:12px; padding:5px 0 5px 10px; font-weight:bold;}

div#facebook { font-family:Helvetica, sans-serif, Arial; font-size:12px; color:#FFF; margin:0 0 0 16px; width:318px; padding-top:10px;}
div#facebook p {margin:0 0 10px 15px; width:277px;}
div#facebook a {color:#FFF; text-decoration:none;}
div#facebook a:hover {color:#CCC;}
div#facebook .date { color:#2e98b6; font-style:italic; margin-right:5px;}
.fbfeed p {color:#CCC;}

div#hp-content-right {float:left; width:595px;}
h2#home {background:url(../images/sub-home.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#about {background:url(../images/sub-about.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#philosophy {background:url(../images/sub-philosophy.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#services {background:url(../images/sub-services.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#res-new {background:url(../images/sub-res-new.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#res-ren {background:url(../images/sub-res-ren.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#com-ren {background:url(../images/sub-com-ren.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#strata {background:url(../images/sub-strata.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#concrete {background:url(../images/sub-concrete.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#sustainability {background:url(../images/sub-sustainability.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#resources {background:url(../images/sub-resources.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}
h2#contact {background:url(../images/sub-contact.png) 0 0 no-repeat; width:117px; height:144px; margin:26px 20px 0 20px;}



h2#about span, h2#philosophy span, h2#philosophy span, h2#services span, h2#res-new span, h2#res-ren span, h2#com-ren span, h2#strata span, h2#concrete span, h2#sustainability span, h2#resources span, h2#contact span  {display:none}

/*div#hp-content-right h2 {width:130px; margin:26px 20px 0 15px; text-align:right; font-family:Helvetica, sans-serif, Arial; font-size:20px; text-transform:uppercase; color:#FFF; font-weight:normal;}*/
div#hp-content .content { width:400px; margin:26px 0 15px 0; color:#FFF; "Times New Roman", Times, serif; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:12px; line-height:20px;}
div#hp-content .content p {margin-bottom:15px;}
div#hp-content .content h2 {margin-bottom:5px; font-size:17px; font-weight:normal; letter-spacing:105%;}
div#hp-content .content h3 {margin-bottom:5px; font-size:15px; font-weight:normal; letter-spacing:105%;}
div#hp-content .content ul, div#hp-content .content ol {margin:0 0 15px 15px;}
div#hp-content .content ul li ul, div#hp-content .content ul li ol {margin:0 0 0 15px;}
div#hp-content .content a, div#hp-content .content a:visited {color:#30b1d5; text-decoration:none;}
div#hp-content .content a:hover {color:#4d565e; text-decoration:none;}
div#hp-content .content a:active {color:#FFF; text-decoration:none;}
div#hp-content .wide{ width:550px; margin-left:26px;}

a.read-more {display:block; float:right; width:100px; text-transform:uppercase; padding:3px 19px 0 0; background:url(../images/read-more.png) center right no-repeat; color:#c5b99b; font-size:14px; text-decoration:none; font-family:Helvetica, sans-serif, Arial;}
a.read-more:hover {color:#e5d7b3;}


/*-------------------------Footer */
div#footer-wrapper {margin:0 auto 20px; width:980px;}
div#footer-top {border-top:1px solid #706e6b; border-bottom:1px solid #706e6b;}
div#phone {font-size:50px; font-family:Helvetica, sans-serif, Arial; color:#94cccb; margin-top:10px; margin-bottom:9px; width:400px; float:left;}
div#phone a {color:#94cccb; text-decoration:none}
div#phone a:hover {color:#CCC;}


div#social-buttons { float:right; margin:20px 15px 0 0;}
a.button {background-image:url(../images/social-buttons.png); width:27px; height:26px; display:block; float:left;}
a.button span {display:none;}
a.facebook {background-position: 0 0; margin-right:9px;}
a.facebook:hover {background-position:0 -26px;}
a.twitter {background-position: -27px 0;}
a.twitter:hover {background-position:-27px -26px;} 

.footer-nav {margin:21px 50px 0 240px;}
.footer-nav a { color:#a29e96; text-decoration:none;}
.footer-nav a:hover {text-decoration:underline;}
.footer-contact{ color:#a29e96; margin:21px 0 0;}
.footer-gmx, .footer-gmx a { color:#706E6B; font-size:10px; text-decoration:none; margin:21px 10px 0 0; }
.footer-gmx a:hover { color:#2E98B6; }

div#footer-bottom { background:url(../images/logo-sm.png) 10px 18px no-repeat; font-family:Helvetica, sans-serif, Arial; line-height:18px; font-size:12px;}


/*----Scrollable */
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	height:363px; width:960px;
}

body#gallery .scrollable { float:left; }

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:960px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	height:363px; width:960px;
}

/* active item */
.scrollable .active {
	
	position:relative;
	cursor:default;
}

/* position and dimensions of the navigator */
.navi {
	/* single button width = 25px */
	width:100px;
	background-image:url(../images/nav-scroll-bkg.png);
	background-repeat:repeat-x;
	margin-left:791px;
	margin-top:310px;
	height:26px;
	position:relative;
}


/* items inside navigator */
.navi a {
	width:15px;
	height:15px;
	float:left;
	margin:5px;
	background-color:#FFF;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-color:#2e98b6;    
}

/* active state (current page state) */
.navi a.active {
	background-color:#2e98b6;    
}

a.browse { background:url(../images/gallery-buttons.png) 0 0 no-repeat; display:block; width:84px; height:362px; margin-top:1px; float:left; }

a.left { margin-left:-960px; position:relative;}
a.left:hover { background-position: -84px 0;}

a.right { margin-left:-85px; position:relative; background-position:-168px 0;}
a.right:hover { background-position: -252px 0;}