/*--------------------- Last Modified  2006.11.10 ---------------------*/
/*-------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------
  Copyright Einstein Industries 2006. Used with Permission.                             
  May not be duplicated or reproduced.
  Please check for cross-browser compatibility prior to making changes
  MINIMUM BROWSER CHECK :: IE5.x/IE6/Firefox/Safari
  CSS Document - layout.css
/*-------------------------------------------------------------------------------------*/
/* undo some default styling of common (X)HTML browsers
/*------------------------------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,a img,:link img,:visited img {border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:'';}

/* ------------------------ GLOBAL ELEMENTS ------------------------ */

/* ------------------------ type selectors ------------------------ */
body { 
	background:#000;
	text-align:center; 
	font:12px/16px "Verdana", Arial, Helvetica, sans-serif; 
	color:#ffffff;
	vertical-align: middle;
	padding-top: 20px;
	}

blockquote { margin-left:10px; margin-right:10px; }

h1	{  }
h2	{ font-size:1.1em; color:#ffffff; }
h3	{ font-size:1.0em; color:#000; }

h1 span,h2 span,h3 span	{ display:none; }

a:link,a:visited	{ color:#ffffff; text-decoration:underline; outline:none; }
a:hover,a:active	{ color:#ffffff; text-decoration:none; outline:none; }

/* ------------------------ classes ------------------------ */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}
	
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
	

.clear {clear: both;}

div.clear	{ 
	height:.01em; 
	clear:both;
	overflow:hidden; 
	}
div.clear-h2	{ 
	height:10px; 
	clear:both;
	overflow:hidden; 
	}
p.back-to-top {
	text-align:right;
	display:block;
	padding-right:15px;
	background:url("../images/bullet-back-to-top.jpg") right no-repeat;
	}
p.more-info {
	text-align:right;
	display:block;
	}
img.img-left { 
	float:left; 
	margin:0px 0px 0px 0px;
	}

img.img-right { 
	float:right; 
	margin:0px 0px 0px 0px; 
	}
img.img-text-bottom {
	margin-bottom: -2px;
}


/* ------------------------------- CONTENT FRAMEWORK ------------------------------- */

/* ------------------------ main framework ------------------------ */
#wrap {
	background:url("../images/bg-wrap.png") no-repeat;
	_background:url("../images/bg-wrap.jpg") no-repeat;
	width:928px;
	height: 592px;
	margin:0 auto;
	text-align:left;
	position: relative;
	left: auto;
	top: auto;
	}

/* ------------------------ masthead framework ------------------------ */
#masthead {
	position:relative;
	background:url("../images/masthead.jpg");
	height:103px;
	width: 471px;
	margin: 25px 0px 0px 18px;
	float: left;
	}
	/* index page link within #masthead */		
	#masthead a {
	position:absolute;
	left:0px;
	width:106px;
	top:0px;
	height:103px;
		}
	#masthead a span {
		display:none;
		}
		
	/* ------------------------ MAIN NAVIGATION FRAMEWORK ------------------------ */
/* ------------------------ horizontal sprite nav ------------------------ */
#nav { 
	background:url("../images/nav.jpg") no-repeat; 
	width:299px; 
	height:26px; 
	margin:46px 40px 0px 0px;
	padding:0; 
	float: right;
	}

#nav span { display: none; }

#nav li, #nav a { height:26px; display:block; } /* change height here also */

#nav li { float:left; list-style:none; _display:inline; position:relative; }

#nav-01 { width: 50px;}
#nav-02 { width: 70px;}
#nav-03 { width: 68px;}
#nav-04 { width: 56px;}
#nav-05 { width: 55px;}


/*-------------- (-79px) X position of button / (0px) height of image from above ------------- */
#nav-01 a:hover { background:url("../images/nav-over.jpg")   -0px 0px no-repeat; }
#nav-02 a:hover { background:url("../images/nav-over.jpg")  -50px 0px no-repeat; }
#nav-03 a:hover { background:url("../images/nav-over.jpg") -120px 0px no-repeat; }
#nav-04 a:hover { background:url("../images/nav-over.jpg") -188px 0px no-repeat; }
#nav-05 a:hover { background:url("../images/nav-over.jpg") -244px 0px no-repeat; }


/*-------------- OPTIONAL - Keeps the hover state on each page based on body id ------------- */
body#index #nav-01 { background:url("../images/nav-over.jpg")   -0px 0px no-repeat; }
body.company #nav-02 { background:url("../images/nav-over.jpg")  -50px 0px no-repeat; }
body.services #nav-03 { background:url("../images/nav-over.jpg") -120px 0px no-repeat; }
body.clients #nav-04 { background:url("../images/nav-over.jpg") -188px 0px no-repeat; }
body#contact #nav-05 { background:url("../images/nav-over.jpg") -244px 0px no-repeat; }

/* ------------------------ son of suckerfish: horizontal sprite nav ------------------------ */
#nav li ul {
	position:absolute;
	left:-9999px;
	}

#nav li ul li { 
	height:28px; /* Height of each drop down nav item */
	float: left;
	}	

#nav li ul li a {
	width:100%;
	height:28px;	/* Height of each drop down nav item, should match above */
	display: block;
	}

#nav li ul li a span {
	display:none;
	}

#nav li:hover ul, #nav li.sfHover ul	{ left: auto; }



/* width of drop down nav - choose width that allows items to display on one line */
#nav-02 ul,
#nav-03 ul, 
#nav-04 ul { width:299px; }

/*----- makes the subnavs left align*/
#nav-02 ul {margin-left:  -50px;}
#nav-03 ul {margin-left: -120px;} 
#nav-04 ul {margin-left: -188px;}
	
/*---------- Company Nav -----------*/
ul#company-nav { 
	background: url("../images/nav-company.jpg") top no-repeat;
	*margin-top: -2px;
	_margin-top: 0px;

}
	ul#company-nav li#one {width: 66px; margin-left: 136px;}
	ul#company-nav li#two {width: 44px;}
	ul#company-nav li#three {width: 53px;}
	
	ul#company-nav li#one a:hover, body#company ul#company-nav li#one a {
		background: url("../images/nav-company-over.jpg") -136px 0px;
		}
	ul#company-nav li#two a:hover, body#team ul#company-nav li#two a {
		background: url("../images/nav-company-over.jpg") -202px 0px;
		}
	ul#company-nav li#three a:hover, body#careers ul#company-nav li#three a {
		background: url("../images/nav-company-over.jpg") -246px 0px;
		}
	
body.company ul#company-nav {
	float: right;
	width: 299px;
	height: 28px;
	margin-right: 40px;
	*margin-top: 0px;
}
body.company ul#company-nav li {float: left; _display: inline;}
body.company ul#company-nav li a {width:100%; height: 28px; display: block;}
body.company ul#company-nav li a span {display: none;}

/*---------- Services Nav -----------*/
ul#services-nav { 
	background: url("../images/nav-services.jpg") top no-repeat;
	*margin-top: -2px;
	_margin-top: 0px;
}
	ul#services-nav li#one {width: 67px; margin-left: 60px;}
	ul#services-nav li#two {width: 76px;}
	ul#services-nav li#three {width: 58px;}
	ul#services-nav li#four {width: 38px;}
	
	ul#services-nav li#one a:hover, body#electrical ul#services-nav li#one a {
		background: url("../images/nav-services-over.jpg") -60px 0px;
		}
	ul#services-nav li#two a:hover, body#datacomm ul#services-nav li#two a  {
		background: url("../images/nav-services-over.jpg") -127px 0px;
		}
	ul#services-nav li#three a:hover, body#lighting ul#services-nav li#three a  {
		background: url("../images/nav-services-over.jpg") -203px 0px;
		}
	ul#services-nav li#four a:hover, body#solar ul#services-nav li#four a  {
		background: url("../images/nav-services-over.jpg") -261px 0px;
		}
		
body.services ul#services-nav {
	float: right;
	width: 299px;
	height: 28px;
	margin-right: 40px;
	*margin-top: 0px;
}
body.services ul#services-nav li {float: left; _display: inline;}
body.services ul#services-nav li a {width:100%; height: 28px; display: block;}
body.services ul#services-nav li a span {display: none;}

/*---------- Clients Nav -----------*/
ul#clients-nav { 
	background: url("../images/nav-clients.jpg") top no-repeat;
	*margin-top: -2px;
	_margin-top: 0px;
}
	ul#clients-nav li#one  {width: 90px; margin-left: 119px;}
	ul#clients-nav li#two {width: 89px;}

	ul#clients-nav li#one a:hover, body#who ul#clients-nav li#one a {
		background: url("../images/nav-clients-over.jpg") -119px 0px;
		}
	ul#clients-nav li#two a:hover, body#what ul#clients-nav li#two a {
		background: url("../images/nav-clients-over.jpg") -209px 0px;
		}

body.clients ul#clients-nav {
	float: right;
	width: 299px;
	height: 28px;
	margin-right: 40px;
	*margin-top: 0px;
}
body.clients ul#clients-nav li {float: left; _display: inline;}
body.clients ul#clients-nav li a {width:100%; height: 28px; display: block;}
body.clients ul#clients-nav li a span {display: none;}


/* ------------------------ subhead framework ------------------------ */
#h1-title { 
	width: 750px;
	height:35px; 
	position: absolute;
	top: 160px;
	left: 40px;
	} 
	body#index #h1-title { background:url("../images/h1-index.jpg"); }
	
	body#company #h1-title { background:url("../images/h1-overview.jpg"); }
	body#team #h1-title { background:url("../images/h1-team.jpg"); width: 765px; }
	body#careers #h1-title {background:url("../images/h1-careers.jpg");	width: 813px;}
	
	body#electrical #h1-title { background:url("../images/h1-electrical.jpg"); }
	body#datacomm #h1-title { background:url("../images/h1-datacomm.jpg"); }
	body#lighting #h1-title { background:url("../images/h1-lighting.jpg"); }
	body#solar #h1-title { background:url("../images/h1-solar.jpg"); }
	
	body#who #h1-title { background:url("../images/h1-clients-who.jpg"); }
	body#what #h1-title { background:url("../images/h1-clients-what.jpg"); }
	
	body#contact #h1-title { background:url("../images/h1-contact.jpg"); }


	
/* ----------------- content -----------------*/
#content {
	position: absolute;
	top: 200px;
	left: 0px;
	width: 848px;
	height: 392px;
	padding: 30px 40px 0px 40px;
}

body#index #content, body#contact #content {
	width: 927px;
	padding: 0px;
}

.copy {
	float: left;
	width: 402px;
}

#content p {margin-bottom: 15px;}

.vr {
	background: url("../images/vertical-rule.png") repeat-y;
	width: 20px;
	height: 251px;	
	float: left;
}

#bottom-img {
	position: absolute;
	bottom: 0px;
	height: 92px;
	width: 928px;
}

/*----------------- Home services --------------*/

.home-services {
	float: left;
	text-align: center;
	_display: inline;
	font-size: 10px;
	color: #1e1e1e;
	position: relative;
}
.home-services p {
	position: absolute;
	top: 300px;
	left: 25px;
	width: 180px;
	z-index: 999;
	line-height: 13px;
}
.home-services a {
	display: block;
	height: 359px;
}

a#home-electrical {
	background: url("../images/home-electrical.jpg") no-repeat;
	width: 232px;
	margin-left: 1px;
	}
	a#home-electrical:hover {
		background: url("../images/home-electrical.jpg") -232px -0px no-repeat;
	}
a#home-datacomm {
	width: 231px;
	background: url("../images/home-datacomm.jpg") no-repeat;
	}
	a#home-datacomm:hover {
		background: url("../images/home-datacomm.jpg") -231px -0px no-repeat;
	}
a#home-lighting {
	width: 231px;
	background: url("../images/home-lighting.jpg") no-repeat;
	}
	a#home-lighting:hover {
		background: url("../images/home-lighting.jpg") -231px -0px no-repeat;
	}
a#home-solar {
	width: 232px;
	background: url("../images/home-solar.jpg") no-repeat;
	}
	a#home-solar:hover {
		background: url("../images/home-solar.jpg") -232px -0px no-repeat;
	}
/*---- Company Pages ------*/

body#company #bottom-img {background: url("../images/bottom-img-overview.png"); }
body#team #bottom-img {background: url("../images/bottom-img-team.png"); }
body#careers #bottom-img {background: url("../images/bottom-img-careers.png"); }

/*---- Services Pages ------*/
body.services .copy {
	width: 530px;
}
body.services .right {
	width: 270px;
	float: right;
	font-size: 11px;
	line-height: 14px;
}
	body#electrical .right {
		height: 243px;
		background: url("../images/electrical-services.png");
	}
	body#datacomm .right {
		height: 243px;
		background: url("../images/datacomm-services.png");
	}
	body#lighting .right {
		padding-top: 223px;
		background: url("../images/lighting-services.png") top no-repeat;
	}
	body#solar .right {
		padding-top: 175px;
		background: url("../images/solar-services.png") top no-repeat;
	}

body#electrical #bottom-img {background: url("../images/bottom-img-careers.png"); }
body#datacomm #bottom-img {background: url("../images/bottom-img-careers.png"); }
body#lighting #bottom-img {background: url("../images/bottom-img-careers.png"); }
body#solar #bottom-img {background: url("../images/bottom-img-solar.png"); }


/*---- Client Pages ------*/

.client-list {
	float: left;
	_display: inline;
	font-size: 11px;
}
body#what #content {
	width: 863px;
	padding-right: 25px; 
}
body#what .copy {
	height: 342px;
	width: 500px;
	overflow:auto;
	padding-right: 15px;
}
body#what .right {
	float: left;
	width: 300px;
	font-size: 11px;
	line-height: 14px;
}
body#what .right span { 
	text-align: right; 
	display: block;
	margin-top: 5px;
	}
/*---- Contact Page ------*/

#contact-services {
	background: url("../images/contact-services.jpg") no-repeat;
	height: 186px;
	width: 928px;
	}
body#contact #content p {
	margin: 40px 0px 0px 40px;
	width: 190px;
	float: left;
	_display: inline;
}

/* ------------------------------------- Buttons ---------------------------------------- */
#click-to-call {
		height:186px;
		display:block;
		background:url("../images/click-to-call.jpg") no-repeat;	
		position: relative;
		}
		#click-to-call a {
			position: absolute;
			top: px;
			left: px;
			width: px;
			height: px;
			}
		#click-to-call a:hover {
				background:url("../images/click-to-call.jpg") -100px 0 no-repeat; /* -100px = horizontal img shift, 0px = vertical shift from top */
				}
		#click-to-call span { display:none; }



/* ------------------------footer framework ------------------------ */
#footer {
	width:916px;
	padding-right: 12px;
	margin: 0 auto;
	text-align:right;
	font-size: 8px;
	}

#footer p {
	color:#ffffff;
	margin:0px;
	}

#footer a:link, #footer a:visited { color:#009900; }
#footer a:hover, #footer a:active { color:#000; }