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

/* Reset CSS */

/* v1.0 | 20080212 */

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,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* STRUCTURE */

body {
	background-color: #141414;
	background-image: url(../images/bk.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	min-width: 980px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 17px;
	overflow-y: scroll;
}
*:first-child+html body {overflow-y: auto;}
a { text-decoration: none; color: #9f1e27; }
.button {
	display: block;
	line-height: 20px;
	padding: 3px 16px 3px 10px;
	background: url(../images/btn_arrow.png) 95% center no-repeat white;
	text-transform: uppercase;
	color: #002955!important;
	font-weight: bold;
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
	border: none;
	text-align: center;
	clear: both;
}
.button.back {
	width: 50px;
	background: url(../images/btn_arrow_left.png) 13% center no-repeat white;
	padding: 3px 0px 3px 20px;
}
.button:hover {
	color: #1e67b6;
}
.button.lrg { width: 170px; }
.button.med { width: 130px; }
.button.sml { width: 100px; }

.wrapper {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}
.header {
	height: 158px;
	position: relative;
	z-index: 10000;
}
.header .logo {
	position: absolute;
	top: 30px;
}
.corner_cut_off {
	position: absolute;
	top: 0;
	right: 0;
	height: 29px;
	width: 17px;
	background: url(../images/corner-cut-off.png) top right no-repeat;
	z-index: 10000;
}
.corner_cut_off.light {
	background: url(../images/corner_cut_off_light.png) top right no-repeat;
}
ul#topnav {
	clear: both;
	float: left;
	list-style: none outside none;
	padding: 0;
	position: absolute;
	right: 0;
	text-align: right;
	top: 65px;
	font-size: 14px;
}
ul#topnav li{
	margin: 0; 
	padding: 0; 
	overflow: hidden; 
	float: left; 
	height:28px;
}
ul#topnav li.active span, .portfolio-pieces li.portfolio_nav span,
.green-pieces li.building_nav span, .about_areas li.about_nav span{ margin-top: -40px !important; }

ul#topnav a, ul#topnav span {
	padding: 4px 10px; 
	float: left; 
	text-decoration: none; 
	color: #fff;
	clear: both;
	height: 28px;
	line-height: 20px;
	margin-left: 10px;
}
ul#topnav a { background: url(../images/nav_bk.png) no-repeat right top; }
ul#topnav span { display: none; }

ul.gallery {}
ul.gallery li {
	float: left;
	display: inline;
}

.footer {
	height: 30px;
	float: left;
	width: 970px;
	clear: left;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
}
.footer .copyright {
	color: #3b3b3b;
	font-size: 11px;
	float: left;
	line-height: 30px;
}
.footer .footer_nav  {
	text-align: left;
	float: left;
}
.footer .social_nav  {
	text-align: right;
	float: right;
	display:none;
}
#contact .footer .social_nav  {
	display:block;
}
.footer .social_nav li  {
	margin-right: 15px;
	float: left;
}
.footer .footer_nav li  {
	float: left;
	margin-right: 15px;
}
.footer a {
	background-position: left center;
	background-repeat: no-repeat;
	display: block;
	float: left;
	height: 30px;
}
.footer .ft1 {
	background-image: url(../images/ft1.gif);
	width: 69px;
}
.footer .ft2 {
	background-image: url(../images/ft2.gif);
	width: 21px;
}
.footer .ft4 {
	background-image: url(../images/ft4.gif);
	width: 41px;
}
.footer .ft3 {
	background-image: url(../images/ft3.gif);
	width: 80px;
}
.footer .ft5 {
	background-image: url(../images/ft5.gif);
	width: 148px;
}
.footer .ft6 {
	background-image: url(../images/ft6.gif);
	width: 30px;
}
.contentArea {
	padding-left: 5px;
	clear: both;
	position: relative;
	width: 970px;
	height: auto;
	padding-right: 5px;
}
.content {
	float: left;
	width: 100%;
}
.content .leftCol {
	width: 710px;
	float: left;
}
.content .rightCol {
	width: 237px;
	float: right;
}
.featureHeader {
	position: relative;
	overflow: hidden;
	height: 215px;
	width: 970px;
}
.leftCol .featureHeader {
	height: 215px;
	width: 710px;
}
.Col1 .featureHeader {
	height: 300px;
	width: 497px;
}
.Col1 {
	width: 497px;
	margin-right: 25px;
}
.Col2 {
	width: 445px;
}
.ftRight { float: right; }
.ftLeft { float: left; }
.featureHeader {
	margin-bottom:15px;
}
.featureHeader img {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
}
.featureHeader h2 {
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 5;
	font-size: 20px;
	font-weight: normal;
	padding: 10px;
	background: url(../images/nav_bk.png) no-repeat right top;
}
.sub {
	background-image: url(../images/sub_corner.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-color: #2E2E2E;
	padding: 15px;
	margin-bottom: 15px;
	position: relative;
	min-height: 185px;
}
.smsub {
	background-image: url(../images/sub_corner.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-color: #2E2E2E;
	padding: 15px;
	margin-bottom: 15px;
	position: relative;
}
.sub .img, .smsub .img {
	background-image: url(../images/sub_corner.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-color: #2E2E2E;
	text-align: center;
	width: 207px;
	overflow: hidden;
	margin-bottom: 15px;
}
p {
	padding-bottom: 15px;
	color: #d0d0d0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
}
h1 , h1 a, h2, h2 a{
	padding-bottom: 15px;
	color: #FFF;
	font-weight: normal;
	text-decoration: none;
}
h1 , h1 a{
	font-size: 20px;
	line-height: 26px;
	text-transform: uppercase;
}
h2 , h2 a{
	font-size: 14px;
	line-height: 20px;
}
h2 span a{
	color: #9f1e27;
}
h3 {
	font-size: 13px;
	line-height: 19px;
	font-weight: bold;
	color: #FFF;
	margin-bottom: 15px;
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9F1E27;
}


/*FORMS*/
.contact form {
	width: 475px;
}
.form_field {
	margin-bottom: 15px;
	float: left;
	width: 100%;
}
.form_field label {
	display: block;
	float: left;
	width: 25%;
	color: white;
	font-weight: bold;
	float:left;
	line-height: 25px;
}
.form_field input[type=text], textarea {
	border: none;
	background: url(../images/input_bg.png) 0 0 repeat;
	line-height: 20px;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	font-size: 12px;
	width: 60%;
	resize: none;
	float: right;
}
textarea { height: 150px; }


/*GALLERY*/
ul.gallery_thumbs li {
	margin-left: 2px;
	float: left;
	display: inline;
	height: 121px;
	width: 160px;
	margin-bottom: 1px;
	overflow: hidden;
}
ul.gallery_thumbs li.first { margin-left: 0; }
.gallery_thumbs li a { display: block; width: 100%; height: 100%; }

.leftImage { margin-right: 15px; margin-bottom: 15px; }
.mb {
	margin-bottom: 15px;
}
.rightImage { margin-left: 15px; margin-bottom: 15px; }

#carousel {
	width: 970px;
	height: 244px;	
	margin: 0 auto;
	overflow: hidden;
}

#slides {
	overflow: hidden;
	/* fix ie overflow issue */
	position: relative;
	width: 970px;
	height: 244px;
}
.opacity {
	filter: alpha(opacity:1);
	KHTMLOpacity: 1;
	MozOpacity: 1;
	-khtml-opacity: 1;
	-ms-filter: ”alpha(opacity=100)”;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
	opacity: 1;
}

/* remove the list styles, width : item width * total items */	
#slides ul.parent {
	position: relative;
	left: 0;
	top: 0;
	list-style: none;
	margin: 0;
	padding: 0;	
	width: 2910px;			
}

/* width of the item, in this case I put 250x250x gif */
#slides li.pages { float:left; display: inline; width: 970px; }

/* Styling for prev and next buttons */
#buttons {
	padding: 10px 0;
	position: relative;
	width: 100%;
	margin: 10px 0;
}

#buttons a {
	display:block; 
	outline:0;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	width: 50px;
}

a#prev { left: 0;  }
a#prev:hover {}

a#next { right: 0; }
a#next:hover {}



/*PORTFOLIO*/
.portfolio .thumbs { margin-top: 1px; margin-left: -2px;}
.portfolio .thumbs li {
	float: left;
	display: inline;
	margin-left: 2px;
	position: relative;
	overflow: hidden;
	height: 160px;
}
.portfolio .thumbs li.first {
	margin-left: 0;
}
.portfolio .thumbs li .title {
	position: absolute;
	bottom: -123px;
	height: 140px;
	background: url(../images/overlay.png) 0 0 repeat;
	width: 231px;
	color: white;
	padding: 10px;
}
.portfolio .thumbs li .title h2 {
	text-transform: uppercase;
	padding-bottom: 10px;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: 1000;
}
.portfolio .thumbs li .title h2 a {
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1000;
	font-size: 13px;
}

.portfolio .thumbs li .title p {
	width: 220px;
	position: absolute;
	top: 35px;
	z-index: 100;
}
.portfolio .caption h2 { text-shadow: 1px 1px 2px rgba(0, 0, 0, .7); }

.portfolio .image-caption {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%; 
}
.portfolio .caption {
	position: absolute;
	height: 300px;
	width: 450px;
}
.portfolio .caption .block, .portfolio .caption h2,
.portfolio .caption .block .button { position: absolute; z-index: 100000; }
.portfolio .caption h2 { top: 0; left: 0; font-weight: bold; }
.portfolio .caption .block {
	padding: 10px;
	padding-bottom: 0;
	background: #9f1e27;
	top: 38px;
	width: 205px;
	float: left;
	left: 0;
}
.portfolio .caption .block p { color: white; }
.portfolio .caption .block a { color: white; font-weight: bold; }
.portfolio .caption .block.last { left: 225px; }
.portfolio .caption .block .button { right: 0; bottom: -20px; }

.portfolio .featureHeader {
	height: 430px;
}

/*project*/
.project .thumbs { margin-top: 1px; margin-left: -2px;}
.project .thumbs li {
	float: left;
	display: inline;
	margin-left: 2px;
	position: relative;
	overflow: hidden;
	height: 99px;
	width: 165px;
}
.project .thumbs li.first {
	margin-left: 0;
}
.project .thumbs li .title {
	position: absolute;
	bottom: -123px;
	height: 140px;
	background: url(../images/overlay.png) 0 0 repeat;
	width: 231px;
	color: white;
	padding: 10px;
}
.project .thumbs li .title h2 {
	text-transform: uppercase;
	padding-bottom: 10px;
}
.project .caption h2 { text-shadow: 1px 1px 2px rgba(0, 0, 0, .7); }

.project .image-caption {
	position: absolute;
	top: 30px;
	right: 60px;
	width: 450px;
	height: 300px; 
}
.project .caption {
	position: relative;
	width: 450px;
}
.project .caption .block, .project .caption h2,
.project .caption .block .button { position: absolute; z-index: 100000; }
.project .caption h2 { top: 0; left: 0; font-weight: bold; }
.project .caption .block {
	padding: 10px;
	padding-bottom: 0;
	background: #9f1e27;
	top: 38px;
	width: 205px;
	float: left;
	left: 0;
}
.project .caption .block p { color: white; }
.project .caption .block.last { left: 225px; }
.project .caption .block .button { right: -3px; bottom: -25px; }


/*INDEX*/
.index h1 {
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
	left: 530px;
	line-height: 20px;
	position: absolute;
	top: 91px;
}
.index h1 .name { color: #9a9a9a; }
.index h1 .line2 { margin-left: 20px; }
.index h1 .line3 { margin-left: 40px; }
.index .contentArea { height: 600px;}
.hexagons, .ajax_loader {
	position: absolute;
	display: block;
}
.home_nav { display: none; position: absolute; }

.hexagons.hex1 { top: 33px; left: 6px; }
.hexagons.hex2 { top: 63px; left: 58px; }
.hexagons.hex3 { top: 2px; left: 161px; }
.hexagons.hex4 { top: 63px; left: 162px;}
.hexagons.hex5 { top: 93px; left: 212px; }
.hexagons.hex6 { top: 369px; left: 366px; }
.hexagons.hex7 { top: 399px; left: 417px;}
.hexagons.hex8 { top: 370px; right: 144px; }
.hexagons.hex9 { top: 400px; right: 194px; }
.hexagons.hex10 { top: 431px; right: 143px; }
.hexagons.hex11 { top: -43px; left: 339px; }
.hexagons.hex12 { top: -12px; left: 391px; }
.hexagons.hex13 { top: 229px; left: 118px; }

.home_nav.above_all { z-index: 10000000; }

.home_nav.building-green { top: 0; left: 246px; }
.home_nav.portfolio { top: 76px; left: 374px; }
.home_nav.blog { top: 152px; left: 246px; }
.home_nav.contact { top: 229px; left: 374px; }
.home_nav.awards { top: 153px; left: 502px; }
.home_nav.about { top: 229px; left: 630px; }
.home_nav.gallery { top: 153px; left: 758px; }
.ajax_loader { top: 230px; left: 585px; z-index: -1; }

/*ABOUT*/
.what-we-do li {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
}
.what-we-do li a {
	color: #9F1E27;
}
.what-we-do li a:hover {
	color: #fff;
}
.eqCol {
	width: 475px;
}
.vacancy {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #2E2E2E;
	float: left;
	width: 100%;
}

blockquote {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #2E2E2E;
	border-bottom-color: #2E2E2E;
	margin-bottom: 15px;
	padding-top: 15px;
}