/* general html elements*/



a:link {
	font-family: Arial, Helvetica, sans-serif;
	color: #abd63a;
}
a:visited {
	font-family: Arial, Helvetica, sans-serif;
	color: #abd63a;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
}
a:active {
	font-family: Arial, Helvetica, sans-serif;
	color: #abd63a;
}




body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	background: #87a538 url('../images/background-body3.gif') center repeat-y;
	/* background: #333333 url('images/background-body2.gif') center repeat-y; */
	margin: 0;
	padding: 0;
}



h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 28px;
	color: #abd63a;
	text-align: left;
	margin: 40px 40px 10px 40px;
	padding: 0 0 4px 0;
}



h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 22px;
	color: #abd63a;
	text-align: left;
	margin: 40px 40px 10px 40px;
	padding: 0;
}




p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	margin: 0px 40px 10px 40px;
	padding: 0;
}


li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	margin: 0px 40px 5px 40px;
	padding: 0;
}





/* Eliminate borders on images that act as links */
img {
	border-style: none;
}









/* classes defined here */



p.faq {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight:bold;
	color: #abd63a;
	margin: 20px 40px 0px 40px;
	padding: 0;
}

p.faqAnswer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	margin: 3px 40px 10px 40px;
	padding: 0;
}



.footLine {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #FFFFFF;
	margin: 0 40px;
	padding: 0;
	border-top: #abd63a solid 1px;
	z-index: 30;
}




.foot {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #FFFFFF;
	text-align: right;
	margin: 0;
	padding: 0 40px 0 0;
}

img.footImage {
	margin: 0;
	padding: 6px 0 0 40px;
}

.footSmall {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #FFFFFF;
	text-align: right;
	margin: 0;
	padding: 20px 40px 0 40px;
}







p.testimonial {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-style:italic;
	color: #ffffff;
	margin: 0px 40px 10px 40px;
	padding: 0;
}

p.testimonialCredit {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #ffffff;
	margin: 0px 40px 60px 40px;
	padding: 0;
}



p.backToTop {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #333333;
	margin: 3px 40px 10px 40px;
	padding: 0;

}










/* IDs defined here */

#wrap {
	width: 1024px;
	margin: 0 auto;
	padding: 0;
	position: relative; /* */
}

#header {
	width: 1024px;
	margin: 0;
	padding: 0;
	position: relative; /* */
}


#flashContent {
	width: 1024px;
	height: 438px;
	margin: 0;
	padding: 0;
	clear:both;
}



/* ######################### */


#flashContentIntro {
	height: 100%;
	margin: 0;
	padding: 0;
}


#flashContentIntroContainer {
	width: 100%;
	width: 100%;
	background: #000000;
	margin: 0;
	padding: 0;
	text-align:center;
}


/* ######################### */



#main {
	width: 1024px;
	min-height: 200px;
	margin: 0;
	padding: 0;
	clear:both;
}


#content {
	width: 750px;
	margin: 20px 0 40px 0;
	padding: 0;
}


#footer {
	width: 1024px;
	margin: 30px auto 30px auto;
	padding: 0;
	position: relative;
}

#footLine {
	width: 1024px;
	margin: 10px 40px;
	padding: 0;
	border-top: #abd63a solid 1px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 30;
}

#footerLeft {
	width: 146px;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
}

#footerLeft2 {
	width: 200px;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 146px;
	top: 0px;
	z-index: 10;
}

#footerRight {
	width: 824px;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0px;
	top: 20px;
}



/* absolutely positioned divs over other content */

#logo {
	width: 122px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 74px;
	right: 80px;
	z-index: 30;
}


#insetButtons {
	width: 122px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 460px;
	right: 80px;
	z-index: 20;
}










/*   FORM items defined here   */


table.formHolder tr td {
	vertical-align:top;
}



p.requiredHead {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 14px;
	color: #abd63a;
	text-align: left;
	margin: 0px 40px 10px 40px;
	padding: 0; 
}



h3.formHead { /* section labels for forms */
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 14px;
	color: #ffffff;
	background: #abd63a;
	text-transform:uppercase;
	text-align: left;
	margin: 20px 40px 14px 40px;
	padding: 5px;
}


p.checkboxColumns {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	margin: 5px 20px 5px 20px;
	padding: 0;
}


img.formDivider {
	text-align: left;
	margin: 10px 40px 20px 40px;
}


span.formHeadSub {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 14px;
	color: #ffffff;
	background: #abd63a;
	text-transform:none;
	font-weight:normal;
	text-align: left;
}





.formText {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #ffffff;
	text-align: left;
	margin: 3px 0 16px 0; 
	padding: 5px;
	width: 400px;
	/* height: 1em; */
	background: #333333;
	border: #abd63a 2px solid;
}

.formTextReq {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000000;
	text-align: left;
	margin: 3px 0 16px 0; 
	padding: 5px;
	width: 400px;
	/* height: 1em; */
	background: #abd63a;
	border: #ffffff 2px solid;
}

.formTextarea {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #ffffff;
	text-align: left;
	margin: 3px 0 16px 0;  
	padding: 5px;
	width: 400px;
	height: 3em;
	background: #333333;
	border: #abd63a 2px solid;
}


.formTextSmall {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #ffffff;
	text-align: left;
	margin: 3px 0 16px 0; 
	padding: 5px;
	width: 175px;
	/* height: 1em; */
	background: #333333;
	border: #abd63a 2px solid;
}





.formSubmit {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000000;
	text-align: center;
	margin: 10px 0 16px 0; 
	padding: 5px 10px;
	background: #abd63a;
	border: #ffffff 2px solid;
}

.formSubmit:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000000;
	text-align: center;
	margin: 10px 0 16px 0; 
	padding: 5px 10px;
	background: #ffffff;
	border: #abd63a 2px solid;
}





.formLabel {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #abd63a;
	text-align: right;
	margin: 0; 
	padding: 6px 20px 5px 0;
}


.formLabel2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #abd63a;
	text-align: left;
	margin: 0; 
	padding: 6px 20px 5px 20px;
}


.formLabelCenter {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #abd63a;
	text-align: center;
	margin: 0; 
	padding: 6px 10px 5px 10px;
}




/* ////////////////////////////////////////////  */
/* ////////////////////////////////////////////  */
/* ////////////////////////////////////////////  */
/* ////////////////////////////////////////////  */





/*   ADMIN FORM items defined here   */


.adminFormHead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #ffffff;
	text-align: center;
	margin: 10px 0 5px 0; 
	padding: 0px;
}



.adminFormText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000000;
	text-align: left;
	margin: 3px 0px; 
	padding: 5px;
	width: 190px;
	height: 1em;
	background: #ffffff;
	border: #000000 1px solid;
}

.adminFormTextarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000000;
	text-align: left;
	margin: 3px 0px; 
	padding: 5px;
	width: 190px;
	height: 3em;
	background: #ffffff;
	border: #000000 1px solid;
}

.adminFormSubmit {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000000;
	text-align: center;
	margin: 10px 0 16px 0; 
	padding: 5px 10px;
	background: #abd63a;
	border: #ffffff 2px solid;
}

.adminFormSubmit:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000000;
	text-align: center;
	margin: 10px 0 16px 0; 
	padding: 5px 10px;
	background: #ffffff;
	border: #abd63a 2px solid;
}






/* ////////////////////////////////////////////  */
/* ////////////////////////////////////////////  */
/* ////////////////////////////////////////////  */
/* ////////////////////////////////////////////  */











/* ################################################### */
/* ################################################### */
/* ################################################### */

/* begin nav menu / menu styles */





/* clickable area for home button 
	div#menu a#logoHomeBtn {    
		display: block;
		position: absolute;
		width: 175px;
		height: 118px;
		margin-left: 0;
		margin-top: 0;
		z-index: 300;
	}
*/


	
	

	
	/* h1 text in branding image, hide this text */
	div#header h1 {
		position: absolute;
		text-indent: -9999px;
		margin:0;
		padding: 0;
	}
	

	/* tagline text in branding image, hide this text */
	div#header blockquote {
		position: absolute;
		top: -9999px;
	}



	
	



/* Branding Area with Site Navigation */

	
	/* establish positioning context */
	div#menu { 
		position: relative;
		clear: both;
		margin: 0;
		padding: 0;
	}
	
	div#menu ul {
		position: relative;   
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
	}
	

	
	div#menu ul li { /* div#menu ul#nav_main li, div#menu ul#nav_work li */ 
		float: left;
		margin: 0;
		padding: 0;
		overflow: hidden;
		/* text-indent: -900px; */
	}
	
	
	
	
	
	
	/* make anchors behave as buttons */
	div#menu ul#nav_main a {
		display: block;
		position: relative; /* reestablish positioning for image replacement */
		height: 82px;
		float: left; /* Hack, IE MAC 5.2 doesn't "shrink-wrap" the floated list items bacause the anchors are set to block, so we float the anchors too */
		margin: 0;
		padding: 0;
	}
	
	
	
	
	
	
	
	/* ----------- make space for images ----------- */
	
	
	
	/* nav_main */
	div#menu ul#nav_main a#bid {
		width: 93px;
	}
	
	div#menu ul#nav_main a#total {
		width: 144px;
	}
	
	div#menu ul#nav_main a#portfolio {
		width: 81px;
	}
	
	div#menu ul#nav_main a#consultation {
		width: 109px;
	}
	
	div#menu ul#nav_main a#design {
		width: 72px;
	}
	
	div#menu ul#nav_main a#installation {
		width: 97px;
	}
	
	div#menu ul#nav_main a#certified {
		width: 79px;
	}
	
	div#menu ul#nav_main a#about {
		width: 91px;
	}
	
	

	
	
	/* image replacment via Gilder/Levin method (needs non-semantic span in HTML but leaves text in place for useragents w/ images off) */
	div#menu ul#nav_main a span {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	




	/* offsetting a single image for all navigation text */
	
	div#menu ul#nav_main a#bid span {
		background: url('../images/nav_main.gif') 0px 0px;
	}
	
	div#menu ul#nav_main a#total span {
		background: url('../images/nav_main.gif') -93px 0px;
	}
	
	div#menu ul#nav_main a#portfolio span {
		background: url('../images/nav_main.gif') -237px 0px;
	}
	
	div#menu ul#nav_main a#consultation span {
		background: url('../images/nav_main.gif') -318px 0px;
	}
	
	div#menu ul#nav_main a#design span {
		background: url('../images/nav_main.gif') -427px 0px;
	}
	
	div#menu ul#nav_main a#installation span {
		background: url('../images/nav_main.gif') -499px 0px;
	}
	
	div#menu ul#nav_main a#certified span {
		background: url('../images/nav_main.gif') -596px 0px;
	}
	
	div#menu ul#nav_main a#about span {
		background: url('../images/nav_main.gif') -675px 0px;
	}
	

	
	
	/* hover states */
	div#menu ul#nav_main a:hover#bid span {
		background: url('../images/nav_main.gif') 0px -82px;
	}
	
	div#menu ul#nav_main a:hover#total span {
		background: url('../images/nav_main.gif') -93px -82px;
	}
	
	div#menu ul#nav_main a:hover#portfolio span {
		background: url('../images/nav_main.gif') -237px -82px;
	}
	
	div#menu ul#nav_main a:hover#consultation span {
		background: url('../images/nav_main.gif') -318px -82px;
	}
	
	div#menu ul#nav_main a:hover#design span {
		background: url('../images/nav_main.gif') -427px -82px;
	}
	
	div#menu ul#nav_main a:hover#installation span {
		background: url('../images/nav_main.gif') -499px -82px;
	}
	
	div#menu ul#nav_main a:hover#certified span {
		background: url('../images/nav_main.gif') -596px -82px;
	}
	
	div#menu ul#nav_main a:hover#about span {
		background: url('../images/nav_main.gif') -675px -82px;
	}
	
	
/* 	END Branding Area with Site Navigation */
















/* Start top navigation menu */

	
	/* establish positioning context */
	div#topMenu { 
		position: relative;
		width: 334px;
		margin: 20px 28px 0 0;
		padding: 0;
		float: right;
	}
	
	div#topMenu ul {
		position: relative;   
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
	}
	

	
	div#topMenu ul li { 
		float: left;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	
	
	
	
	
	/* make anchors behave as buttons */
	div#topMenu ul#nav_top a {
		display: block;
		position: relative; /* reestablish positioning for image replacement */
		height: 16px;
		float: left; /* Hack, IE MAC 5.2 doesn't "shrink-wrap" the floated list items bacause the anchors are set to block, so we float the anchors too */
		margin: 0;
		padding: 0;
	}
	
	
	
	
	
	
	
	/* ----------- make space for images ----------- */
	
	
	
	/* nav_main */
	div#topMenu ul#nav_top a#articles {
		width: 66px;
	}
	
	div#topMenu ul#nav_top a#testimonials {
		width: 93px;
	}
	
	div#topMenu ul#nav_top a#news {
		width: 132px;
	}
	
	div#topMenu ul#nav_top a#faq {
		width: 43px;
	}
	
	
	
	
	
	
	
	/* image replacment via Gilder/Levin method (needs non-semantic span in HTML but leaves text in place for useragents w/ images off) */
	div#topMenu ul#nav_top a span {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	




	/* offsetting a single image for all navigation text */
	
	div#topMenu ul#nav_top a#articles span {
		background: url('../images/nav_top.gif') 0px 0px;
	}
	
	div#topMenu ul#nav_top a#testimonials span {
		background: url('../images/nav_top.gif') -66px 0px;
	}
	
	div#topMenu ul#nav_top a#news span {
		background: url('../images/nav_top.gif') -159px 0px;
	}
	
	div#topMenu ul#nav_top a#faq span {
		background: url('../images/nav_top.gif') -291px 0px;
	}
	
	
	
	
	/* hover states */

	div#topMenu ul#nav_top a:hover#articles span {
		background: url('../images/nav_top.gif') 0px -16px;
	}
	
	div#topMenu ul#nav_top a:hover#testimonials span {
		background: url('../images/nav_top.gif') -66px -16px;
	}
	
	div#topMenu ul#nav_top a:hover#news span {
		background: url('../images/nav_top.gif') -159px -16px;
	}
	
	div#topMenu ul#nav_top a:hover#faq span {
		background: url('../images/nav_top.gif') -291px -16px;
	}
	
	
	
	
	
/* 	END top navigation menu */















/* 	Logo Button - background image rollover */

	
	/* establish positioning context */
	
	div#logo ul {
		position: relative;   
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
	}
	

	
	div#logo ul li { /* div#menu ul#nav_main li, div#menu ul#nav_work li */ 
		float: left;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	
	
	
	
	
	/* make anchors behave as buttons */
	div#logo ul a {
		display: block;
		position: relative; /* reestablish positioning for image replacement */
		height: 122px;
		width: 122px;
		/*float: left;  Hack, IE MAC 5.2 doesn't "shrink-wrap" the floated list items bacause the anchors are set to block, so we float the anchors too */
		margin: 0;
		padding: 0;
	}
	
	
	
	
	
	
	
	/* ----------- make space for images ----------- */
	
	
	
	/* image replacment via Gilder/Levin method (needs non-semantic span in HTML but leaves text in place for useragents w/ images off) */
	div#logo ul a span {
		position: absolute;
		width: 100%;
		height: 100%;
	}
		
		
		
	/* This second span is only used because of the transparent images used in the menu
	   Normally, the text is covered up by the image in the first span, but this 
	   image has no background, so the text needs to be positioned out of site. */
	   
	div#logo ul a span.textBackup {
		position: absolute;
		top: -9999px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
		
		
		
		
		
		
		
		/* offsetting a single image for all navigation text */
	
		div#logo ul a span {
			background: url('../images/button_epicLogo.png') 0px 0px;
		}
		


		/* hover states */
		div#logo ul a:hover span {
			background: url('../images/button_epicLogo.png') 0px -122px;
		}


/* 	END Logo Button - background image rollover */












/* Start Inset Buttons */
/* 	###################################################### */

	
	/* establish positioning context */
	/*
	div#insetButtons { 
		position: absolute;
	}
	*/
	
	
	div#insetButtons ul {
		position: relative;   
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
	}
	

	
	div#insetButtons ul li { /* div#insetButtons ul#nav_main li, div#insetButtons ul#nav_work li */ 
		float: left;
		margin: 0 0 32px 0;
		padding: 0;
		overflow: hidden;
	}
	
	
	
	
	
	
	/* make anchors behave as buttons */
	div#insetButtons ul a {
		display: block;
		position: relative; /* reestablish positioning for image replacement */
		height: 60px;
		width: 120px;
		float: left; /* Hack, IE MAC 5.2 doesn't "shrink-wrap" the floated list items bacause the anchors are set to block, so we float the anchors too */
		margin: 0;
		padding: 0;
	}
	
	
	

	
	
	/* image replacment via Gilder/Levin method (needs non-semantic span in HTML but leaves text in place for useragents w/ images off) */
	div#insetButtons ul a span {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	




	/* offsetting a single image for all navigation text */
	
	div#insetButtons ul a#insetButton01 span {
		background: url('../images/insetButtons.png') 0px 0px;
	}
	
	div#insetButtons ul a#insetButton02 span {
		background: url('../images/insetButtons.png') 0px -92px;
	}
	
	div#insetButtons ul a#insetButton03 span {
		background: url('../images/insetButtons.png') 0px -186px;
	}
	
	
	
	
	
	/* hover states */
	div#insetButtons ul a:hover#insetButton01 span {
		background: url('../images/insetButtons.png') -120px 0px;
	}
	
	div#insetButtons ul a:hover#insetButton02 span {
		background: url('../images/insetButtons.png') -120px -92px;
	}
	
	div#insetButtons ul a:hover#insetButton03 span {
		background: url('../images/insetButtons.png') -120px -186px;
	}
	
	
	
/* 	END Inset Buttons */
/* 	###################################################### */

















/* 	Start Page Headings - background image swap */

	
		/* establish positioning context */
	
	h1#pageHead {
		position: relative;  
		display: block; 
		height: 35px;
		width: 498px;
		margin: 0px 40px 10px 40px;
		padding: 0;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		line-height: 20px;
		color: #abd63a;
		text-align: left;
		overflow: hidden;
	}
	
	

	
	
	
	/* ----------- make space for images ----------- */
	
	
	
	/* image replacment via Gilder/Levin method (needs non-semantic span in HTML but leaves text in place for useragents w/ images off) */
	h1#pageHead span {
		position: absolute;
		width: 100%;
		height: 100%;
	}
		

		/* change backgrounds based on span id*/
	
		h1#pageHead span#terms {
			background: url('../images/head-terms.gif');
		}
		
		h1#pageHead span#portfolio {
			background: url('../images/head-portfolio.gif');
		}
		
		h1#pageHead span#totalCinema {
			background: url('../images/head-totalCinema.gif');
		}
		
		h1#pageHead span#bid {
			background: url('../images/head-bid.gif');
		}
		
		h1#pageHead span#about {
			background: url('../images/head-about.gif');
		}
		
		h1#pageHead span#faq {
			background: url('../images/head-faq.gif');
		}
		
		h1#pageHead span#installation {
			background: url('../images/head-installation.gif');
		}
		
		h1#pageHead span#design {
			background: url('../images/head-design.gif');
		}
		
		h1#pageHead span#certified {
			background: url('../images/head-certified.gif');
		}
		
		h1#pageHead span#privacy {
			background: url('../images/head-privacy.gif');
		}
		
		h1#pageHead span#consultation {
			background: url('../images/head-consultation.gif');
		}
		
		h1#pageHead span#articles {
			background: url('../images/head-articles.gif');
		}
		
		h1#pageHead span#testimonials {
			background: url('../images/head-testimonials.gif');
		}
		
		h1#pageHead span#news {
			background: url('../images/head-news.gif');
		}
		
		h1#pageHead span#error {
			background: url('../images/head-error.gif');
		}
		
		h1#pageHead span#thanks {
			background: url('../images/head-thanks.gif');
		}
	


/* 	END Page Headings - background image swap */