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

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	background: #000 url(images/envirovat_web_background.jpg) top center no-repeat;
	line-height: 20px;
	color: #ccc;
}
* {
	padding: 0;
	margin: 0;
}
a {
	color: #C2D5D8;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
h3 { clear: both; margin-bottom: 10px; }

p { margin-bottom: 15px; }
ul.vertical_list li {
	margin: 0 0 10px 45px; 

}
ul.vertical_list2 li {
	margin: 0 0 10px 10px; 

}

dl.form{ width: 75%; margin-left: 25px; }
dl.form dt { float: left; margin-right: 18px; width: 150px; border-bottom: 1px solid #666; font-weight: bold; }
dl.form dd { margin: 0 0 18px 0; }


ul.form li {
	list-style: none;
	float: left;
	width: 170px;
	height: 50px;
}
ul.form li label {
	display: block;
	width: 200px;
}
div.form_divider { 
	border-bottom: 1px solid #333;
	margin-bottom: 10px;
	padding-bottom: 10px;
	clear: both;
}

img.body_image { margin-left: -20px; }

img.image_left { float: left; margin: 0 15px 15px 0; }
img.image_right { float: right; margin: 0 0 15px 15px; }

/* Error Styles */
#notice {
	border: 2px solid #5b2d2d;
	color:#5B2D2D;
	background-color:#ceadad;
	margin: 0 0 10px 0;
	padding: 5px;
	text-align:left;
}

#nice_notice {
	border: 2px solid #4b5d41;
	color:#4B5D41;
	background-color:#c5d4bd;
	margin: 0 0 18px 0;
	padding: 7px;
	text-align:left;
}


/* Layout Styles */

#container {
	margin: 0 auto;
	width: 900px;
	text-align: left;
}

	#header {
		width: 900px;
		height: 166px;
		position: relative;
	}
		#header h1 {
			width: 269px;
			height: 140px;
			position: absolute;
			top: 11px;
			left: 23px;
		}
			#header h1 a {
				display: block;
				width: 269px;
				height: 140px;
				background: url(images/envirovat_web_05.jpg) no-repeat;
				text-indent: -9999px;
			}
			
			#header ul {
				position: absolute;
				top: 124px;
				left: 316px;
				width: 568px;
			}
				#header ul li {
					float: left;
					list-style: none;
					height: 42px;
				}
					#header ul li a {
						display: block;
						text-indent: -9999px;
						height: 42px;
					}
					
					#header ul li.home a { background: url(images/envirovat_web_nav_01.jpg); width: 80px; }
					#header ul li.home a:hover { background: url(images/envirovat_web_nav_01.jpg) 0 -42px; }
					
					#header ul li.product_info a { background: url(images/envirovat_web_nav_02.jpg); width: 110px; }
					#header ul li.product_info a:hover { background: url(images/envirovat_web_nav_02.jpg) 0 -42px; }
					
					#header ul li.product_specs a { background: url(images/envirovat_web_nav_03.jpg); width: 122px; }
					#header ul li.product_specs a:hover { background: url(images/envirovat_web_nav_03.jpg) 0 -42px; }
					
					#header ul li.services a { background: url(images/envirovat_web_nav_04.jpg); width: 89px; }
					#header ul li.services a:hover { background: url(images/envirovat_web_nav_04.jpg) 0 -42px; }
					
					#header ul li.about a { background: url(images/envirovat_web_nav_05.jpg); width: 71px; }
					#header ul li.about a:hover { background: url(images/envirovat_web_nav_05.jpg) 0 -42px; }
					
					#header ul li.contact a { background: url(images/envirovat_web_nav_06.jpg); width: 96px; }
					#header ul li.contact a:hover { background: url(images/envirovat_web_nav_06.jpg) 0 -42px; }

					#header a#employment_button {
						display: block;
						width: 150px;
						height: 35px;
						position: absolute;
						left: 725px;
						top: 93px;
					}
			
	
	#content {
		padding: 20px 33px 20px 33px;
	}
		#content div.top_photo { margin-bottom: 20px; }
		
		#content div.column_one {
			float: left;
			width: 511px;
		}
			#content div.column_one h2 { text-indent: -9999px; width: 511px; height: 55px; margin-bottom: 20px;  }
			
			#content div.column_one h2#title_what { background: url(images/titles/what_is.jpg) no-repeat; }
			#content div.column_one h2#product_info { background: url(images/titles/product_info.jpg) no-repeat; }
			#content div.column_one h2#contact { background: url(images/titles/contact.jpg) no-repeat; }
			#content div.column_one h2#services { background: url(images/titles/services.jpg) no-repeat; }
			#content div.column_one h2#product_specs { background: url(images/titles/product_specs.jpg) no-repeat; }
			#content div.column_one h2#about { background: url(images/titles/about.jpg) no-repeat; }
			#content div.column_one h2#order { background: url(images/titles/order.jpg) no-repeat; }
			#content div.column_one h2#application { background: url(images/titles/application.jpg) no-repeat; }
			
			#content div.column_one p { padding: 0 20px 0 20px; }
		
		#content div.column_two {
			float: right;
			width: 298px;
		}
		#content div.column_two a {  color: #003366; font-weight: bold; }
		
			#content div.column_two h2 { text-indent: -9999px; width: 298px; height: 55px;  }
			
			#content div.column_two h2#title_advantage { background: url(images/titles/advantage.gif); height: 50px; }
			#content div.column_two h2#quick_contact { background: url(images/titles/quick_contact.gif); }
			#content div.column_two h2#list_services { background: url(images/titles/list_services.gif); }
			#content div.column_two h2#product_links { background: url(images/titles/product_links.gif); }
			
			#content div.column_two div.content {
				background: #fff url(images/envirovat_web_27.jpg);
				width: 268px;
				padding: 15px;
				color: #1a1233;
				height: 419px;
				line-height: 18px;
			}
			#content div.column_two div.footer {
				height: 16px;
				background: url(images/envirovat_web_31.gif);
				width: 298px;
			}
			
	#footer {
		clear: both;
		position: relative;
		height: 100px;
	}
	
		#footer #footer_nav, #footer #footer_info { position: absolute; }
			#footer #footer_nav li,  #footer #footer_info li{
				float: left;
				margin-right: 20px;
				list-style: none;
			}
			
		#footer #footer_nav { top: 20px; left: 20px; }
		#footer #footer_info { top: 60px; left: 400px; }
		
/* Drop Down Styles */

#order_form {
	
}

	#order_form_content {
		color: white;
		background: #142b11;
		opacity: .9;               /* Standard style for transparency */
    	-moz-opacity: .9;          /* Transparency for older Mozillas */
    	filter: alpha(opacity=90);  /* Transparency for IE */
	}
	
		#order_form_content_inner {
			padding: 15px;
			width: 830px;
		}
		
	#order_form_tab {
	
	}
	#order_form1 {
		float: left;
		width: 350px;
	}
	
	#order_form2 {
		float: right;
		width: 350px;
	}
		
		
/* jQuery Styles */

 #s3slider {
   width: 504px; /* important to be same as image width */
   height: 203px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 504px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

#content li.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
   list-style: none;
   margin-left: 0;
   
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: normal 12px "Trebuchet MS", Arial;
   padding: 10px 13px;
   width: 250px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
.s3sliderImage span.top {
	top: 0;
	left: 0;
}
.s3sliderImage span.bottom {
	bottom: 0;
    left: 0;
}
.s3sliderImage span.left {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 363px;
}
.s3sliderImage span.right {
	left: 556px;
	bottom: 0;
	width: 200px !important;
	height: 35px;
	display: none;
}

.clear {
   clear: both;
}