/*
	Screen.css
	Editor:	Aubyn Freybe-Smith
*/



/* = reference
--------------------------------------------------------------------------------*/

/*
z-indexes

110 	.header_mainpage (nav header on 2 mainpages, to put it over the photos)
120		div.v_wrap (and the children div.v1, div.v2) = the vector overlays
130		.mainpagebox01.inner, .mainpagebox02.inner = big hit boxes on mainpages (puts hit area  for these (.inner) over the vector overlays, while the bg color stays below
130		div#footer_inner = footer
140		nivo sliders (mainpage slideshows) control buttons
?		nivo slider photo slices

*/



/* =For Testing
--------------------------------------------------------------------------------*/

.test_showborder {
	border: 1px solid red;
}

.test_showgrid {
	background: #fff url(../graphics/testing/24_col.gif) repeat-y;
}



/* =whole page
--------------------------------------------------------------------------------*/

body { 
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	font-size: 100%;
}

a {
	color: #b64900; /* orange */
	text-decoration: none;
}
a:hover {
	color: #111;
	text-decoration: underline;
}


/* =Spacing
--------------------------------------------------------------------------------*/

ol { list-style: decimal; }

ul { list-style: none; }

li { }

p,
dl,ol,ul,
hr,
h1,h2,h3,h4,h5,h6,
pre,
table,
address,
fieldset
{
	
}




/* = Generic
--------------------------------------------------------------------------------*/

.floatleft { float: left; }
.floatright { float: right; }
.clearleft { clear: left; }
.clearright { clear: right; }
.clearboth { clear: both; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.textleft { text-align: left; }

/* spacers. to be used on TDs, empty DIVs, even Ps, when vertical space is needed */
.spacer5 { padding-top: 5px; }
.spacer7 { padding-top: 7px; }
.spacer10 { padding-top: 10px; }
.spacer20 { padding-top: 20px; }
.spacer30 { padding-top: 30px; }
.spacer40 { padding-top: 40px; }
.spacer50 { padding-top: 50px; }
.spacer60 { padding-top: 60px; }
.spacer70 { padding-top: 70px; }
.spacer80 { padding-top: 80px; }
.spacer90 { padding-top: 90px; }
.spacer100 { padding-top: 100px; }
.spacer110 { padding-top: 110px; }

/* used for items that show show up only when printing */
.for_print01 {
	display: none;
}

hr {
	border-color: #444;
	border-style: solid;
	border-width: 1px 0 0;
	clear: both;
	height: 0;
}



/* = Homepage
--------------------------------------------------------------------------------*/
div#homepage_header {
	margin-top: 50px;
}

div#homepage_header p#homepage_logo {
	width: 270px;
	height: 86px;
	background: url(../graphics/homepage/homepage_logo01.gif) no-repeat 0 0;
}
div#homepage_header p#homepage_logo span {
	display: none;
}

div#homepage_header div#intro {
	height: 82px;
	position: relative;
	/* border: solid 1px red; */
}
div#homepage_header div#intro h1 {
	position: absolute;
	bottom: 0;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0;
	margin-bottom: 0;
}
/* the big res and commercial buttons */
div#homepage_buttons {
	color: #fff;
	padding-top: 30px;
	padding-bottom: 60px;
}
div#homepage_buttons .bgbox01 {
	height: 140px;
	/* padding-bottom: 40px; */
}
div#homepage_buttons .gobox01 a {
	background-position: 0 -23px;
	width: 25px;
	float: right;
}
div#homepage_buttons #commercial p {
	padding-bottom: 0;
}

div#homepage_news ul {
	padding-left: 0;	
}

div#homepage_thumbs {
	margin-top: 50px;
}



/* = Header
--------------------------------------------------------------------------------*/

#header {
	margin-top: 30px;
	position: relative; /* so that the logo and other_division button can be abs positioned */
}
#header p#logo {
	/* border: solid 1px red; */
	position: absolute;
	left: 680px;
}
#header p#logo a {
	display: block;
	height: 100px;
	width: 190px;
	background: url(../graphics/header/logo03.gif) no-repeat 0 0; /* logo on white bg */
}
#header p#logo a span {
	display: none;
}
/* for the 2 mainpages, put the header on top of the content below (images) and use a dif logo */
.header_mainpage {
	position: absolute !important;
	z-index: 110; /* which puts it over the nivo-slider controlled photos */
}
.header_mainpage p#logo a {
	background-image:url(../graphics/header/logo02.png) !important; /* white logo on trans bg */
}

/* main nav */
#header ul#mainnav01 {
	font-size: 12px;
	line-height: 14px;
	/* border: solid 1px blue; */
}
#header ul#mainnav01 li {
	float: left; /* */
}
#header ul#mainnav01 li.contact { /* contact link has space beside it */
	padding-left: 24px;
}
#header ul#mainnav01 li a {
	display: block;
	height: 75px;
	padding: 45px 20px 0 20px;
	text-transform: uppercase;
	font-weight: bold;
	color: #111;
}
#header ul#mainnav01 li.active a {
	color: #5a5a3d;
	cursor: default;
}
#header ul#mainnav01 li.division2 a, #header ul#mainnav01 li.division3 a { /* sub section links aren't upper-case */
	text-transform: none;
}
#header ul#mainnav01 li a em {
	font-weight: normal;
	text-transform: none;
	display: block; /* creates a line break, but may create problems in other browsers? */
}
/* main nav link bg colors */
#header ul#mainnav01 li.division1 a { background-color: #e7e88f; }
#header ul#mainnav01 li.division2 a { background-color: #ebec9c; }
#header ul#mainnav01 li.division3 a { background-color: #f2f3ad; }
#header ul#mainnav01 li.contact a { background-color: #f6f7be; }
#header ul#mainnav01 li.community a { background-color: #fcfcca; }
#header ul#mainnav01 li a:hover {
	text-decoration: none;
}
/* 1st main nav link bg vector graphic */
#header ul#mainnav01 li.division1 a {
	background-repeat: no-repeat;
}
/* for each page... */
#header ul#mainnav01 li.division1 a#bg_res01 { background-image: url(../graphics/header/bg_mainnav_res01.png); } /* res main */
#header ul#mainnav01 li.division1 a#bg_res02 { background-image: url(../graphics/header/bg_mainnav_res02.png); } /* res projects */
#header ul#mainnav01 li.division1 a#bg_res03 { background-image: url(../graphics/header/bg_mainnav_res03.png); } /* res services */
#header ul#mainnav01 li.division1 a#bg_res04 { background-image: url(../graphics/header/bg_mainnav_res04.png); } /* res contact */
#header ul#mainnav01 li.division1 a#bg_res05 { background-image: url(../graphics/header/bg_mainnav_res05.png); } /* res community */
#header ul#mainnav01 li.division1 a#bg_com01 { background-image: url(../graphics/header/bg_mainnav_com01.png); } /* com main */

body.noJS #header ul#mainnav01 li a:hover { /* .noJS is removed by jQuery. So, for those without jQuery, they will get this hover state */
	background-color: #111;
	color: #eee;
}
#header ul#mainnav01 li a.mainnav01_hover { /* this class is applied by jQuery */
	color: #eee;
	background-color: #111; /* #283c11;  dark green */
}

/* main nav's 'opposite division' link (left side vert button) ie commercial or residential */
#header ul#mainnav01 li.other_division {
	float: none;
	position: absolute;
	left: -30px;
}
#header ul#mainnav01 li.other_division a {
	background-color: #ebedd4;
	height: 120px;
	width: 30px;
	padding: 0;
}
#header ul#mainnav01 li.other_division a#commercial { background-image: url(../graphics/header/nav_com01.gif); }
#header ul#mainnav01 li.other_division a#residential { background-image: url(../graphics/header/nav_res01.gif); }
#header ul#mainnav01 li.other_division a:hover {
	background-position: 0 -120px !important;
	background-color: #111;
}
#header ul#mainnav01 li.other_division a span {
	display: none;
}




/* = vector overlays
--------------------------------------------------------------------------------*/

.container_24 {
	position: relative; /* so that can position vector overlays relative to bottom */
	/* border: solid 1px orange; */
}

div.v_wrap {
	z-index: 120; /* fixes <=IE7, which can't display the 2 vector overlay divs unless they're wrapped with this. Other browswers, and IE8, don't need it. Funny, IE7 doesn't need this on the 2 mainpages, but it doesn't hurt either. */
}



div.v1, div.v2 {
	margin-left: auto;
	margin-right: auto;
	width: 130px;
	background-repeat: no-repeat;
	background-position: 5px 0;
	position: absolute;
	z-index: 120;
	/* border: solid 1px green; */
}
div.v1 { top: 150px; /* keeps it below (and off) the nav; might be overriden below */ }
div.v2 { bottom: 90px; /* sticks it to the bottom of container_24; might be overriden below */ }

/* for individual pages */
div.v_res_main1 {
	background-image: url(../graphics/vector_overlays/res_main1.png);
	height: 400px;
	top: 650px;
}
div.v_res_main2 {
	background-image: url(../graphics/vector_overlays/res_main2.png);
	height: 610px;
}
div.v_res_projects1 {
	background-image: url(../graphics/vector_overlays/res_projects1.png);
	height: 650px;
}
div.v_res_projects2 {
	background-image: url(../graphics/vector_overlays/res_projects2.png);
	height: 750px;
}
div.v_res_services1 {
	background-image: url(../graphics/vector_overlays/res_services1.png);
	height: 750px;
}
div.v_res_services2 {
	background-image: url(../graphics/vector_overlays/res_services2.png);
	height: 1030px;
}
div.v_res_contact1 {
	background-image: url(../graphics/vector_overlays/res_contact1.png);
	height: 150px;
}
div.v_res_contact2 {
	background-image: url(../graphics/vector_overlays/res_contact2.png);
	height: 675px;
}
div.v_res_community1 {
	background-image: url(../graphics/vector_overlays/res_community1.png);
	height: 520px;
	top: 360px;
}
div.v_res_community2 {
	background-image: url(../graphics/vector_overlays/res_community2.png);
	height: 515px;
	bottom: 180px;
}
div.v_com_main1 {
	background-image: url(../graphics/vector_overlays/com_main1.png);
	height: 320px;
	top: 650px;
}
div.v_com_main2 {
	background-image: url(../graphics/vector_overlays/com_main2.png);
	height: 620px;
	bottom: 20px;
}
div.v_com_projects1 {
	background-image: url(../graphics/vector_overlays/com_projects1.png);
	height: 700px;
}
div.v_com_projects2 {
	background-image: url(../graphics/vector_overlays/com_projects2.png);
	height: 1100px;
}



/* = background boxes
--------------------------------------------------------------------------------*/

.bgbox01 { /* regular, text-only (no button) bg boxes */
	padding: 45px 0 25px 0;
	margin-top: 20px;
}

.bg_green01 { background-color: #bae184; } /* light green */
.bg_green02 { background-color: #c2de9b; } /* lighter green, less saturated */
.bg_green03 { background-color: #d3eab3; } /* very light green */
.bg_green04 { background-color: #577139; } /* corporate dark green */
.bg_green05 { background-color: #6f9a33; } /* dark green, but lighter */
.bg_green06 { background-color: #80b239; } /* dark bright green, for homepage boxes */
.bg_yellow01 { background-color: #f8f9cd; }




/* = boxes, on main pages, that have a big hit area. Link inside them is applied to whole box by jQuery
--------------------------------------------------------------------------------*/

.mainpagebox01, .mainpagebox02, .mainpagebox03a, .mainpagebox03b {
	margin-top: 20px;
}
.mainpagebox01 { /* services list box */
	height: 370px;
}
.mainpagebox02 { /* careers and com boxes */
	height: 320px;
}
.mainpagebox03a { /* res intro box */
	height: 210px;
}
.mainpagebox03b { /* com intro box */
	height: 230px;
}

.gobox01 a {
	font-size: 12px;
	font-weight: bold;
	text-transform:uppercase;
	display: block;
	line-height: 20px;
	height: 21px;
	padding-top: 2px; /* graphic arrow is 23px tall, so padding + height must equal this */
	padding-left: 25px;
	background: url(../graphics/go_arrow01.gif) no-repeat 0 0;
}
.gobox01 a:hover {
	color: inherit; /* overrides the base a hover color of dark grey */
}

.gobox01_hover { /* this class is added by jQuery */
	background-color: #394e21; /* dark green */
	color: #eee;
}
.gobox01_hover a {
	background-position: 0 -23px;
}

.mainpagebox01 .inner, .mainpagebox02 .inner, .mainpagebox03a .inner, .mainpagebox03b .inner {
	padding-top: 45px;
	padding-right: 40px; /* this allows the hit area to reach all the way to the right edge of the colored boxes in behind */
	position: relative;
	z-index: 130; /* puts the jQuery created hit area above the vector overlays (on level 120) */
}
.mainpagebox01 .inner { /* services list box */
	/* border: solid 1px red; */
	height: 325px; /* 370 - 45 */
}
.mainpagebox02 .inner { /* careers and com boxes */
	/* border: solid 1px red; */
	height: 275px; /* 320 - 45 */
}
.mainpagebox03a .inner {
	height: 165px; /* 210 - 45 */
}
.mainpagebox03b .inner {
	height: 185px; /* 230 - 45 */
}




/* = contact boxes
--------------------------------------------------------------------------------*/

.contact strong {
	text-transform: uppercase;
	font-size: 12px;
}




/* = portfolio entries
--------------------------------------------------------------------------------*/

.portfolio_entry {
	font-size: 14px; 
	line-height: 20px;
	margin-top: 20px;
	padding-bottom: 40px;
}
.portfolio_entry .info {
	padding: 45px 0 25px 0;
}
.portfolio_entry .info h3 {
	font-size: 14px;
	text-transform: uppercase;
	padding-bottom: 20px;
}
.portfolio_entry .info h3 em {
	text-transform: none;
	font-weight: normal;
	display: block; /* to create a line break */
}
.portfolio_entry .info p {
	padding-bottom: 20px;
	font-size: 14px;
}
.portfolio_entry .thumbs {
	padding-top: 10px;
	line-height: 1%;
}
.portfolio_entry .thumbs img {
	margin: 0 5px 5px 0;
	float: left;
}

/* these classes are used on the stand-alone project description pages that are brought into the shadowbox iframe = separate html pages */
.portfolio_description {
	background-color: #fff;
	padding: 100px 60px 0px 60px;
	/* width: 620px;  setting a width allows horiz centering */
	margin-left: auto;
	margin-right: auto;
	/* border: solid 1px red; */
}
.portfolio_description .left {
	width: 190px;
	margin-right: 40px;
	float: left;
}
.portfolio_description .left h3 {
	font-size: 14px;
}
.portfolio_description .left h3 em {
	display: block;
	font-weight: normal;
}
.portfolio_description .right {
	width: 390px;
	float: left;
}




/* = portfolio entries
--------------------------------------------------------------------------------*/

.service_entry {
	margin-top: 40px;
	margin-left: 5px;
	padding-bottom: 20px;
	line-height: 1%;
	clear: left;
}
.service_entry div.info {
	height: 105px; /* must add up to 130 */
	padding-top: 25px;
	background: url(../graphics/bg_thumb01.gif) repeat-x;
	float: left;
	font-size: 14px; 
	line-height: 20px;
}
/* these classes apply a width to the .info div, so that the bg circle pattern repeats fully. They must be multiples of 135. */
.width2 { width: 270px; }
.width3 { width: 405px; }
.width4 { width: 540px; }
.service_entry div.info h2 {
	display: inline-block;
	color: #fff;
	font-size: 18px;
	line-height: 20px;
	height: 50px; /* must add up to 80px */
	padding: 30px 40px 0 40px;
	margin: 0; /* to override universals */
}
.service_entry div.info h2.double_line {
	height: 60px; /* must add up to 80px */
	padding-top: 20px;
}
.service_entry h2 span {
	font-size: 14px;
}
.service_entry img { /* thumbs */
	margin: 0 5px 5px 0;
	float: left;
}
.service_entry a img.newline { /*indents thumb images when they start a new line */
	margin-left: 135px;
	/* border: solid 1px red; */
}




/* Sustainability List (on Community page)
--------------------------------------------------------------------------------*/

.sustainability_list dl dt {
	font-weight: bold;
	font-size: 14px;
}
.sustainability_list dl ul {
	padding-top: 20px;
	/* list-style-type: circle; */
}


/* Forms (on launch: contact page's quote form only)
--------------------------------------------------------------------------------*/

/* generic */
div.form01 {
	font-size: 14px;
}
div.form01 input, div.form01 textarea {
	font-size: 14px;
	color: #3b5918;
}
div.form01 textarea {
	font-family: Arial, Helvetica, sans-serif;
}
div.form01 label.required_field span { /* targets the asterix */
	color: #bb1414;
	font-weight: bold;
}
div.form01 p.url { /* hides a label and input for a honeypot field = part of the SPAM security */
	display: none; /* */
	/*position: absolute;
	top: -9000px;
	left: -9000px; */
}
div.form01 input[type="submit"] {
    float: right;
	border: 2px solid #ccc;
    padding: 4px 6px;;
    background-color: #fbfbfb;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
	border-radius: 9px;
}
div.form01 input[type="submit"]:hover {
    border-color: #999;
}

/* specific to a form */
div.quote_form fieldset#personal_info, div.quote_form fieldset#service_info, div.quote_form fieldset#project_description, div.quote_form fieldset#subscribe_checkbox {
	margin-bottom: 30px;
}
div.signup_form fieldset#basic_info {
	margin-bottom: 10px;	
}
div.quote_form fieldset#personal_info label, div.signup_form fieldset#basic_info label {
	width: 120px;
	color: black;
	display: block;
	float: left;
	padding-top: 12px;
	clear: left;
}
div.quote_form fieldset#personal_info input, div.signup_form fieldset#basic_info input {
	width: 262px; /* must total to 270px max. leave a few px of space for browswer issues */
	padding-left: 5px;
	padding-top: 5px;
	height: 30px;;
	margin-bottom: 5px;
	border: none;
	background-color: #f8f9cd;
}
/* error messages generated by validate js plugin */
div.quote_form fieldset#personal_info label.error, div.signup_form fieldset#basic_info label.error {
	color: #bb1414;
	width: auto !important;
	padding-left: 120px;
	padding-bottom: 20px;
	padding-top: 0px;
}

div.quote_form fieldset#service_info {
	line-height: 18px;
	font-size: 12px;
}
div.quote_form fieldset#service_info legend {
	padding-bottom: 10px;
	font-size: 14px;
}
div.quote_form fieldset#service_info p {
	clear: both;
}
div.quote_form fieldset#service_info input { /* the checkboxes */
	float: left;
}
div.quote_form fieldset#service_info label {
	float: left;
	width: 160px;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 10px;
}
div.quote_form fieldset#service_info p.other_service label {
	padding: 0 0 5px 0;
}
div.quote_form fieldset#service_info input#otherService {
	width: 185px; /* must total to 190px */
	padding-left: 5px;
	padding-top: 5px;
	height: 30px;
	border: none;
	background-color: #f8f9cd;
}
div.quote_form fieldset#project_description label {
	margin-bottom: 10px;
	display: inline-block;
}
div.quote_form fieldset#project_description textarea {
	width: 380px; /* must add up to 390px max */
	padding: 5px;
	height: 84px;
	border: none;
	background-color: #f8f9cd;
}



/* Generic Typography
--------------------------------------------------------------------------------*/

h1 {
	font-size: 30px; 
	font-weight: normal;
	letter-spacing: -1px;
	margin-bottom: 20px; /* works when used with text12,text14 */
} 
h2 {
	font-size: 25px;
	font-weight: normal;
	margin-bottom: 20px; /* works when used with text12,text14 */
}
h3 { 
	
} 
h4 { 
	
} 
h5 {

} 
h6 {

}


.text12 {
	font-size: 12px;
	line-height: 20px;
}
.text14 {
	font-size: 14px; 
	line-height: 20px; 
}
.text15 {
	font-size: 15px; 
	line-height: 22px; 
}
/* used for the community and careers boxes on main pages */
.text18 {
	font-size: 18px;
	line-height: 30px;
}
.text18 h2 {
	margin-bottom: 10px;
}


.text12 p, .text14 p, .text18 p {
	padding-bottom: 20px;
}
.text15 p {
	padding-bottom: 22px;
}

.text12 ul, .text14 ul, .text15 ul, .text12 dl, .text14 dl, .text15 dl {
	padding-left: 40px;
}
.text12 ul li, .text14 ul li, .text12 dl dd, .text14 dl dd {
	padding-bottom: 20px;
}
.text15 ul li {
	padding-left: 40px;
	padding-bottom: 22px;
}

.text12 em, .text14 em, .text15 em {
	color: #777;
}

.tight_list ul li {
	padding-bottom: 0;
	list-style-type: circle;
}










/* = Graphic Headings
--------------------------------------------------------------------------------*/

.h_image span {
	display: none;
}

#h_name {
	
}




/* = misc
--------------------------------------------------------------------------------*/





/* = footer
--------------------------------------------------------------------------------*/

div#footer {
	font-size: 12px; 
	line-height: 12px;
	padding: 100px 0 50px 0;
	height: 100px;
	position: relative; /* so can use z-index */
	z-index: 130;
}
div#footer div#footer_inner {
	
}
div#footer ul li {
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 1em;
}
div#footer ul ul li {
	text-transform: none;
	font-weight: normal;
}