/* Global Styles */

.alignleft{ float: left }

.alignright{ float: right }

body {
	margin: 0 0 0 0;
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 11px;
	color: #494949;
	line-height: 16px;
 	background-image: url('../images/bg.png');
 	z-index: 1;
}
	
#logo {
	position: relative;
	height: 50px;
	width: 958px;
	z-index: 12;
}
#flashContainer {
	position:absolute;
	left: 1px;
	top: 0px;
	z-index:3;
	text-align: left;
}

/* New - VSI 7/2011 */

#container {
	position: absolute;
	left: 133px;
	z-index: 1;
	overflow: auto;
	width: 722px;
	background: #1f4d74;
	padding: 100px 50px 50px 50px;
	border: none;
/* height: 575px; */
}

#container.no-bg{

	background: none;

}


/* Secondary Nav */

#secNav,
#secNavServices {
	float: left;
	width: 175px; 
	padding-top: 150px;
	color: #ffffff;
	z-index: 2;
}
#secNav span {
	font:12px Arial, Verdana, Helvetica, Geneva, sans-serif;
	color: #f8c857;
	text-align: left;
	line-height: 20px;
}

#secNav a {
	line-height: 20px;
}

/* The reason we have a different nav for services is to accomodate the need for the random Featured Project Pic. We had it as two images, but it needed to be one. But when it's one image and above the nav layer, it blocks the nav from being able to be clicked. So we put the services nav on a layer above the Featured Pic. */

#secNavServices span {
	font:12px Arial, Verdana, Helvetica, Geneva, sans-serif;
	color: #f8c857;
	text-align: left;
	line-height: 20px;
}

#secNavServices a {
	line-height: 20px;
}

#content {	
/* 	position: absolute; */
/* 	top: 110px; */
/* 	left: 134px; */
	float: right;
	width: 75%;
	
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	color: #ffffff;
	line-height: 18px;
	text-align: left;
	overflow: visible;
	z-index: 1;
	
}

#container.project #content, 
#container.cms #content,
#container.sustainability #content{ width: auto; float: none}

#container.project #wn{ margin: 0 auto; width: 86%; float: none  }

#content.contact{ width: auto; margin: 0 auto }

#content div#hold{	
	margin-left: 0;
	width: auto;
	overflow: visible;
}

.title{ margin-bottom: 20px } 

#container.project .title{ text-align: center;} 


.stimulus{
	width: 245px; 
	margin-top: 100px; 
	text-align: center
}

.stimulus p{
	margin: 10px 50px;
}

/* New - Vine Street Interactive 7/2011 */

#homeProjectsContainer { position: absolute; top: 600px; left: 200px; width: 720px; overflow: visible; z-index: 1; }
.homeProject{ width: 200px; float: left; margin-right: 30px; }
.homeProject img{ margin-bottom: 20px; box-shadow: 5px 5px 10px #000; -webkit-box-shadow: 5px 5px 10px #000; -moz-box-shadow: 5px 5px 10px #000; }
.homeProject h1{ color: #fff; }
.homeProject p{ color: #000; font-weight: bold; }

#headline{z-index: 99; position: absolute; top: 169px; left: 340px; width: 400px; height: 200px}
#headline img{}

#projectPix img{margin-right: 20px; box-shadow: 5px 5px 12px #000}


/* End New */


h1 {
	font: 18px Arial, Helvetica, sans-serif, Verdana;
	font-weight: bold;
	color: #f8c857;
	margin: 0 0 10px 0;
	text-align: left;
}

h1 span {
	color: #464646;
}

h2 {
	font: 16px Arial, Helvetica, sans-serif, Verdana;
	font-weight: bold;
	color: #f8c857;
	margin: 10px 0 10px 0;
}

h3 {
	font: 14px Arial, Helvetica, sans-serif, Verdana;
	font-weight: bold;
	font-weight: bold;
	color: #f8c857;
	margin: 0 0 10px 0;
}

h4 {
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	font-weight: bold;
	color: #f8c857;
	margin: 0 0 10px 0;
}

a {
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	color: #ffffff;
	line-height: 16px;
	text-decoration: underline;
	font-weight:normal;
}
a:hover {
	color: #f8c857;
	text-decoration: underline;
}

p {
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	color: #ffffff;
	line-height: 16px;
	margin: 0px 0 15px 0;
}

p span {
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	color: #f8c857;
	line-height: 16px;
}

span {
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	color: #f8c857;
	line-height: 16px;
}

div {
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	line-height: 16px;
}

ul {
	list-style-type: square;
	color: #f8c857;
	margin-left: 12px;
	padding-left: 4px;
}


ul li {
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 12px;
	color: #f8c857;
	line-height: 13px;
	margin-bottom: 8px;
}

ul li span {
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 12px;
	color: #ffffff;
	line-height: 13px;
}	

ul li span span {
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 12px;
	color: #f8c857;
	line-height: 13px;
}	

ul ul {
	list-style-type: square;
	color: #ffffff;
	margin-left: 12px;
	margin-top: 10px;
	padding-left: 4px;
}
ul ul li{
	color: #ffffff;
	margin-left: 12px;
	padding-left: 4px;
}

/* Home Styles */

#home, #homeindent1, #homeindent2, #homeindent3, #homeindent4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: italic;
	line-height: 20px;
	font-weight: bold;
	color: #fff;
	width: 510px;
	margin-left: 70px;
}

/* New - VSI 7/2011 */

#home{ position: absolute; top: 350px; left: 330px; width: 375px; margin-left: 0;  }

#projectPix{ position: absolute; top: 460px; left: 310px }
#projectPix li{ float: left; list-style: none}

#homeindent1 {	
	margin-left: 40px;
}
#homeindent2 {
	margin-left: 50px;
}
#homeindent3 {
	margin-left: 60px;
}
#homeindent4 {
	margin-left: 70px;
}

#projects {
	position: absolute;
	z-index: 9;
	overflow: visible;
	width: 1000px;
	height: 575px;
}



#aboveandbeyond {
	position: absolute;
	z-index: 9;
	background-image: url(../images/aboveandbeyond.png);
	display:block;
	width: 202px;
	height: 56px;
	right: 70px;
	top: 170px;
	overflow: hidden;
	text-indent: -9999px
}

#cta-call {
	position: absolute;
	z-index: 9;
	color: #f3d509;
	top: 520px;
	left: 250px;
	font: arial;
	font-size: 15px;
	font-style: italic
}

#project1, #project1Dot, #project2, #project3, #project4, #project5, #project6, #project7, #project8, #project9, #project10, #project11, #project12, #project13, #project14, #project15, #project16, #project17, #project18, #project19, #project20, #project21, #project22, #project23, #project24, #project25, #project26, #project27, #project28, #project29 {
	position: absolute;
	display: block;
	overflow: visible;
	z-index: 99;
}

#project1Info, #project2Info, #project3Info, #project4Info, #project5Info, #project6Info, #project7Info, #project8Info, #project9Info, #project10Info, #project11Info, #project12Info, #project13Info, #project14Info, #project15Info, #project16Info, #project17Info, #project18Info, #project19Info, #project20Info, #project21Info, #project22Info, #project23Info, #project24Info, #project25Info, #project26Info, #project27Info, #project28Info, #project29Info {
	position: absolute;
	overflow: visible;
	display: none;
	font-weight: bold;
	color: #fff;
	z-index: 100; 
}
#project1Info div, #project2Info div, #project3Info div, #project4Info div, #project5Info div, #project6Info div, #project7Info div, #project8Info div, #project9Info div, #project10Info div, #project11Info div, #project12Info div, #project13Info div, #project14Info div, #project15Info div, #project16Info div, #project17Info div, #project18Info div, #project19Info div, #project20Info div, #project21Info div, #project22Info div, #project23Info div, #project24Info div, #project25Info div, #project26Info div, #project27Info div, #project28Info div, #project29Info {
	font-weight: bold;
}

#project1Info a, #project2Info a, #project3Info a, #project4Info a, #project5Info a, #project6Info a, #project7Info a, #project8Info a, #project9Info a, #project10Info a, #project11Info a, #project12Info a, #project13Info a, #project14Info a, #project15Info a, #project16Info a, #project17Info a, #project18Info a, #project19Info a, #project20Info a, #project21Info a, #project22Info a, #project23Info a, #project24Info a, #project25Info a, #project26Info a, #project27Info a, #project28Info a, #project29Info a {
	font-weight: bold;
	color: #fff;
}

#project1Info a:hover, #project2Info a:hover, #project3Info a:hover, #project4Info a:hover, #project5Info a:hover, #project6Info a:hover, #project7Info a:hover, #project8Info a:hover, #project9Info a:hover, #project10Info a:hover, #project11Info a:hover, #project12Info a:hover, #project13Info a:hover, #project14Info a:hover, #project15Info a:hover, #project16Info a:hover, #project17Info a:hover, #project18Info a:hover, #project19Info a:hover, #project20Info a:hover, #project21Info a:hover, #project22Info a:hover, #project23Info a:hover, #project24Info a:hover, #project25Info a:hover, #project26Info a:hover, #project27Info a:hover, #project28Info a:hover, #project29Info a:hover {
	color: #FFCC33;
}

#client-login {

width: 44px; position: absolute; top: 578px; left: 835px;  padding-top: 4px
}

#client-login a {
text-decoration: none; color: white; text-transform: capitalize; font-family: Arial; font-size: 12px; line-height: 14px; 
}

/* Secondary Styles */
	
#pageBackground{
	z-index: -1;
}	

#pageBackground1 {
	position: absolute;
	width: 957px;
	height: 576px;
	
}

#pageBackground1.home{
	height: 712px
}

#pageBackground-blue {	
	position: absolute;
	top: -1px;
	left: 0px;
	width: 955px;
	height: 702px;
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	color: #ffffff;
	line-height: 16px;
	text-align: left;
	z-index: 0;
}

/* Had to do this for ie 6 otherwise floats would've worked */
	
table.service {
	border: 1px solid #ffffff;
}	

td.serviceLeft {
	float: left;
	width: 210px;
	padding: 5px;
}	

td.serviceRight {
	float: left;
	width: 240px;
	border-left: 1px solid #ffffff;
	padding: 5px;
}

.project {
 	width: 590px;
 	padding: 0 10px 0 10px;
 	border-style: none solid none solid;
 	border-width: 1px;
 	border-color: #f8c857;
 	overflow: hidden;
}

.projectPic {
	float: left;
	width: 175px;
}

.projectName {
	font: 18px Arial, Helvetica, sans-serif, Verdana;
	font-weight: bold;
	color: #f8c857;
	margin: 0;
	text-align: left;
}
.projectName_sm {
	font: 14px Arial, Helvetica, sans-serif, Verdana;
	font-weight: bold;
	color: #f8c857;
	margin: 0;
	padding-left:320px;
	text-align: left;
}
.projectName1 {
	font: 16px Arial, Helvetica, sans-serif, Verdana;
	font-weight: bold;
	color: #f8c857;
	margin-bottom:10px;
	text-align: left;
	text-transform:uppercase;
}

.projectLocation {
	font: 12px Arial, Helvetica, sans-serif, Verdana;
	font-weight: normal;
	color: #f8c857;
	margin: 0 0 10px 0;
	padding-left:320px;
	text-align: left;
}
#projectsNav {
	margin: 40px 50px;
	color: #ffffff;
	z-index: 2;
}

#projectsNav .search{
	margin-left: 20px;
}
#projectsNav .search strong{
	margin-top: 10px;
	float: left;
}

#projectsNav .seperate{ border-bottom: 1px solid #f8c857; padding-bottom: 20px; }

.testimonials {
	border-bottom: 1px solid #f8c857;
	margin-bottom: 20px;
	font-style: italic;
}

.testimonials img {
	margin-bottom: 40px;

}

.testimonials p {
	font-style: italic; font-size: 14px;
}

.testimonials div {
	text-align: right;
	margin-bottom: 10px;
}

#rebranding {
	position: absolute;
	z-index: 9;
	overflow: visible;
	width: 1000px;
	height: 575px;
	display: block;
}

#rebranding a.button {
	width: 295px;
	height: 18px;
	color: #fced72;
	text-decoration: none;
	display: block;
}

#rebranding .off {
	width: 295px;
	height: 18px;
	display: block;
	color: #fced72;
	background: url('../images/rebranding_button.jpg') no-repeat 0 -20px;
	text-decoration: none;
	padding: 2px 0 0 5px;
}

#rebranding .on {
	width: 295px;
	height: 18px;
	display: block;
	color: #fced72;
	background: url('../images/rebranding_button.jpg') no-repeat 0 0;
	text-decoration: none;
	padding: 2px 0 0 5px;
}

#rebrandingContent {
	position: relative;
	left: 183px;
	top: 260px;
	width: 310px;
}

#rebrandingContent ul {
	margin-left: 12px;
	padding-left: 4px;
}

#mapAll, #mapStarbucks, #mapUSBank, #mapChase, #mapBofA, #mapWells, #mapATT, #mapMS, #mapFE, #mapPNC, #mapGlidden, #mapWash {
	position: absolute; 
	left: 0; 
	top: 0;
	display: none;
}

#mapAll {
	display: block;
}

#sustainability {
/* 	position: absolute; */
	z-index: 9;
	margin-left: 20px;
	overflow: visible;
/* 	width: 1000px; */
/* 	height: 575px; */
	display: block;
}

#coolroofcoatings {
	z-index: 20;	
	width:200px;
	text-align: center;
	margin: 0 0 20px 60px;
}

#sustainabilityContent {
	position: relative;
	
/* 	left: 213px; */
/* 	top: 90px; */
/* 	width: 455px; */
}

#sustainabilityContent ul {
	margin-left: 12px;
	padding-left: 4px;
}


#leed {
	position: absolute;
	width: 780px;
	color: #000;
	background: #fff;
	left: 0; 
	top: 0;
	margin: 35px 0 0 80px;
	padding: 20px;
	display: none;
	filter:alpha(opacity=96);
	-moz-opacity:0.96;
	opacity: 0.96;
	border: 1px solid #07653e;
	z-index: 1000;
}

#leed li span, #leed p, #leed a {
	color: #000;
}

#stimulus {
	position: absolute;
	left: 234px;
	top: 58px;
	z-index: 9;
	overflow: visible;
	width: 702px;
	height: 511px;
	display: block;
}

#stimulus p, #stimulus a {
	font-size: 12px;
	line-height: 13px;
	color: #000;
}

/* Navigation Styles */

/* Main Nav */

#mainNav {
	position: absolute;
	top: 101px;
	width: 100px;
	height: 100px;
	z-index: 16;
}

/* New - Vine Street Interactive 7/2011 */

#mainNav ul{ margin: 0; padding: 0; }
#mainNav ul li{ list-style: none; margin: 0; line-height: 6px; zoom: 1; *max-height: 35px;}
#mainNav ul li a{font-size: 12px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#mainNav ul ul{  width: 805px; height: 325px; top: -67px; left: 149px; padding-top: 37px; display: none; position: absolute;  background: url('../images/subnav-shade.png') no-repeat;}
#mainNav ul ul li{  margin-bottom: 11px; }

#mainNav ul ul li span.preview{ display: none; position: absolute; top: 35px; left: 335px; width: 300px; font-weight: bold; color: #fba837}
#mainNav ul ul li span.preview.show{ display: block; left: 300px;}


#mainNav ul ul li.sub-1{margin-left: 244px; }
#mainNav ul ul li.sub-2{margin-left: 187px; }
#mainNav ul ul li.sub-3{margin-left: 143px;}
#mainNav ul ul li.sub-4{margin-left: 106px;}
#mainNav ul ul li.sub-5{margin-left: 80px;}
#mainNav ul ul li.sub-6{margin-left: 56px;}
#mainNav ul ul li.sub-7{margin-left: 40px;}

#mainNav .navClose{ position: absolute; top: 130px; left: 245px; width: 500px; height: 200px;}

#featuredProject, #featuredATT, #featuredStarbucks, #featuredUSBank, #featuredChase, #featuredBofA, #featuredWells, #featuredMS, #featuredFE, #featuredPNC, #featuredGlidden, #featuredWash {
	position: absolute;
	top: 374px;
	width: 100px;
	height: 100px;
	z-index: 12;
}
#featuredProjectLabel{
	position: absolute;
	top: 351px;
}


#nav {
	clear:left;
	text-align: left;
}

#nav_contact{
	position: absolute;
	top: 351px;
	z-index: 100;
	width: 133px;
	text-align: center;
	background: url('../images/nav-shadow.png') repeat-x;
}

#nav_contact.extended{
	top: 500px;
	width: 180px;
	background: none;
}


#nav_contact h2{
	color: #000;
	line-height: 22px;
	margin: 10px;
	font-size: 14px;
}

body.home #nav_contact {
	width: 135px;
}

body.home #nav_contact.extended #socialIcons {
	margin-left: 25px;
}

#socialIcons{margin-left: 30px}

#nav_contact.extended #socialIcons{margin-left: 50px}

#socialIcons .icon{ float: left; margin-right: 10px }

/* Menus */

#navAboutMenu {top :101px; left :157px; visibility:hidden; z-index : 15; position : absolute;}
#navServicesMenu {top :140px; left :107px; visibility:hidden; z-index : 15; position : absolute;}

div.menuShell {display: block;}
	
div.normCell {text-align:left; background-color: #fdf3cd; border-bottom: 1px solid #d8d8d8; width: 340px; display: block;}

div.normCell a {font:10.5px Verdana, Arial, Helvetica, Geneva, sans-serif; color:#006fb7; line-height: 1; text-decoration:none; font-weight:bold; padding: 7px 6px 0px 155px; height: 19px; display: block;}

div.normCell a:Hover {text-decoration:none; color:#000000;}


/* Scrolling Content Styles */
/*

div#hold { 
  position:relative; overflow:auto;
  margin-left: 137px;
	width:600px; height:434px; z-index:100;
	}
div#hold2 { 
  position:relative; overflow:auto;
	width:737px; height:434px; z-index:100;
	}
div.content	{ 
	position:absolute; 
	left:0px; top:0px; 
	z-index:1; 
	}
div#wn2	{ 

	left:0px; top:0px; 
	clip:rect(0px, 617px, 436px, 0px); 
	overflow:hidden;	
	z-index:2; 
	}
div#wn3	{ 
	position:absolute; 
	left:0px; top:0px; 
	clip:rect(0px, 617px, 436px, 0px); 
	overflow:hidden;	
	z-index:2; 
	}
	
div#lyr2 {

}
*/
div#scrollLinks { 
  position:absolute; left:880px; top:400px;
  width:14px; height:80px; z-index:4;
  }
div#up { position:absolute; left:0; top:0; z-index:1; }  
div#down { position:absolute; left:0; bottom:0; z-index:2; }

div#wn { 
  position:relative; 
/*   overflow:hidden; */
/* 	width:620px; */
/* 	height:434px; */
	z-index:100;
}
div#lyr1 {
	padding-bottom: 20px;
}

/* CMS */

#login {
	position: absolute;
	color: #fff;
	top: 550px;
	left: 930px;
	font-weight: bold;
	z-index: 2;
}

#error {
	position: absolute;
	color: #fff;
	top: 50px;
	left: 470px;
	font-weight: bold;
	z-index: 5;
}

input, select, textarea {
	font: 12px Arial, Helvetica, sans-serif, Verdana;
}

/* Contact */
#content.contact {overflow: visible}
/* #contact {position: absolute; width: 760px; left: -187px; height: 480px; top:-30px; z-index: 50} */
#contact ul li,
#contact ul li a {list-style: none; padding-left:0px; margin-left:0px; font-family: Verdana; font-size: 14px;}
#contact .addresses {float:left; width: 185px; padding-top: 200px}
#contact .addresses ul li {display:none; line-height: 16px; color: #b5e1fb; margin-bottom: 3px}

#contact #center {width:230px; float: left}
#contact  h2 {font-family: Verdana; font-size: 32px; line-height: 36px; color: #faa106; font-weight: normal}
#contact #center span.phone {font: Verdana; font-weight: bold; font-size:30px; text-align:center; color:white; line-height: 40px}
#contact ul.address-menu {margin-top: 60px; width:250px;}
#contact ul.address-menu li.corporate {margin-bottom:24px}
#contact ul.address-menu li,
#contact ul.address-menu li a {color: #71c7fe; margin-bottom:3px; text-decoration: none}
#contact ul.address-menu li.hover {color: #2994f8}
#contact ul.address-menu li.header {color: #b7e3fd; margin-top: 24px}
.contact #hold {overflow: visible; height: 480px; }

#contact #right	{float:right; width: 300px}
#contact #right p {margin: 0 0 5px}
#contact #right ul {margin: 0}
#contact #right  li {margin-bottom: 15px}
#contact #right label.error {margin-left:130px; color: #f20e1a;  }
#contact #right label {width: 130px; float: left; text-align: left; font-size:11px; color: #9ab8fc}
#contact #right textarea {height: 150px; width: 150px}
#contact #right #submit {margin-left: 130px;}

/* Contact Landing Pages */
#contact.landing ul.address-menu li.main {margin-bottom:24px}

#contact.landing .city-landing-content { margin-left: -100px; width: 320px; text-align: center; }
#contact.landing .city-landing-content h2 { font-size: 18px; line-height: 22px; font-weight: bold; }
#contact.landing ul.address-menu { margin-top: 45px; }

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  	#projects {
		display: block; // ipad / no flash fix
	}
}

.lpPoweredBy {
	display:none;
}
.lpStaticButton {
	width: 100%;
	margin: 30px 0 10px 0;
}
body.home .lpStaticButton {
	margin-top: 10px;
}