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

html, body {    
   height:100%; 
}

body {
	margin: 0; padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}

a.specialLink:link {
	color: 000099;
	font-size: 1.2em;
	background-color:#003399;
	padding: 0 10px 0 10px

 }
a.specialLink:visited { color: 303030; }
a.specialLink:hover { color: 980000; }

p {
	font-size: 1.0em;
	color: #303030;
	line-height: 1.5em;
}

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

ul, ol {font-size: 0.9em}
ul a, ol a {text-decoration: none}
ul a:hover, ol a:hover {color: #00ffff}

#page {
	position: relative;
	min-height: 100%;
	width: 950px;
	margin: 0 auto;
	padding: 0px 90px 10px 90px;
	border: 0px solid #eee;
	height: 800px;
	visibility: inherit;
	background: url(images/body_bg.jpg) no-repeat center top;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
	#page { background: url(images/small_body_bg.jpg) 75% 80% no-repeat scroll !important;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
}

#page:before { /* Opera and IE8 "redraw" bug fix */
content:"";
float:left;
height:100%;
margin-top:-999em;
}

* html #page { /* IE6 workaround */
height:100%; 
}

#sidebar {
	list-style: none;
	width: 180px;
	float: left;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 0;
}

#main_column {
	width: 460px;
	height:740px;
	padding: 40px 0 40px 20px;
	float: left;
}
#mid_main_column {
	width: 460px;
	height:785px;
	padding: 40px 0 40px 20px;
	float: left;
}
#long_main_column {
	width: 460px;
	height: 980px;
	padding: 40px 0 40px 20px;
	float: left;
}

#sub_column {
	width: 180px;
	height: 740px;
	padding: 40px 30px 20px 0;
	float: right;
}

#sub_column_left {
	width: 180px;
	height: 740px;
	padding: 10px 0 0 50px;
	float: left;
}

.clear {clear: both}

/* ------------------------------------- */
/* ------------- TOP NAVIGATION ------------ */
/* ------------------------------------- */

ul#nav {
	margin: -57px 20px 0 0;
	padding: 0;
	list-style-type: none;
	float: right;
	font-weight: bold;
	font-size: 0.8em;
}
	ul#nav li {
		float: left;
		display: block;
		border-right: 1px solid #ffffff;
	}
	ul#nav li.last {border: none}
	ul#nav li a {
		display: block;
		padding: 0 10px;
	}
	ul#nav li a:hover {text-decoration: underline}

/* ------------------------------------- */
/* -------------MAIN  NAVIGATION ------------ */
/* ------------------------------------- */
#button {
	width: 16.8em;
	padding: 25px 0px 0 0;
	margin-bottom: 1em;
	margin-left: -2.39em;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	float: left;
	color: #333;
}
#button li {
	list-style-type: none;
	border-bottom: 1px solid #989898;
	margin: 0;
	padding: 0;
}

#button li a {
		display: block;
		padding: 0px 0px 0px 0.5em;
		background-color: #none;
		color: #fff;
		text-decoration: none;
		width: 100%;
		}

	html>body #button li a {
		width: auto;
		}

#button li a:hover {
		background-color: #000066;
		color: #fff;
		}

.main_nav {
	line-height: 2.2em;
}

#parts #nav_parts a, #pretreatment #nav_pretreatment a, #drumless-delivery #nav_drumless-delivery a, #liquid-brine #nav_liquid-brine a, #boiler-cleaning #nav_boiler-cleaning a, #residential-water #nav_residential-water a, #employee-training #nav_employee-training a, #engineering-data #nav_engineering-data a, #client-requirements #nav_client-requirements a, #home #nav_home a, #contact #nav_contact a, #client #nav_client a

 {
		background-color: #33ccff;
		
}

/* ------------------------------------- */
/* ------------- HEADLINES ------------- */
/* ------------------------------------- */

h1 {
	display: block; 
	width: 299px; height: 50px;
	background: url(images/logo.png) no-repeat;
	margin: 33px 0 22px 20px; padding: 0;
	text-indent: -9999px;
	float: left;
	font-size: 1em;
}

	h1 a {
		display: block; 
		width: 241px; height: 37px;
		overflow: hidden;
	}
	
h2 {
	font-size: 1.4em;
	color: #006;
	margin: 0;
	padding: 0 0 5px 0;
	border-bottom: 1px solid #59708C;
	font-style: italic;
}
	h2 a {color: #ffffff; text-decoration: none}
	h2 a:hover {color: #333}

h3 {
	font-size: 1.1em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #303030;
	border-bottom: 1px solid #59708C;
}

h4  {
	font-size: 1.8em;
	color: #ffffff;
	margin: 0;
	padding: 0;
	-moz-text-shadow: -1px 1px 1px #333;
	-webkit-text-shadow: -1px 1px 1px #333;
	text-shadow: -1px 1px 1px #333;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#303030')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#303030');
}
/* ------------------------------------- */
/* --------------- EXTRAS -------------- */
/* ------------------------------------- */

p.about {
	font-size: 0.75em;
	line-height: 1.3em;
}

div.post {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #303030;
	line-height: 1.5em;
	font-size: 1.0em;
	padding-bottom: 20px;
	vertical-align:text-top;
}

#footer {
	position:relative;
	height:80px;
	margin:-80px auto 0;
	width:950px;
	padding:10px 0 0 0;
	background-image: url(images/footer-bg.jpg);
	text-align: center;
	clear: left;
	float: left;
}
.clearfooter {
   height: 800px;
   clear: both;
}

#footer p {
	font-size: 0.65em;
	color: #FFFFFF;
	margin: 0;
	bottom:0;
	padding-top:15px;
}
	#footer p.credit {
		float: left;
		padding-left: 10px;
	}
		#footer p.credit a {
			color: #FFFFFF;
		}
	#footer p.copyright {
		text-align: right;
		padding-right: 10px;
}

.body_lists {
	color: #303030;
	list-style-type: circle;
	list-style-position: inside;
	vertical-align:text-top;
}


.sub_column_lists {
	color: #006;
	font-weight:bold;
	font-size: .8em;
	list-style-type: circle;
	list-style-position: inside;
	vertical-align:text-top;
}

.bold_body_lists {
	color: #006;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.5em;
	list-style-type: circle;
	list-style-position: inside;
}

.shadow {
	-moz-box-shadow: -3px 3px 3px #666;
	-webkit-box-shadow: -3px 3px 3px #666;
	box-shadow: -3px 3px 3px #666;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#606060')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#606060');
}

.service {
	padding: 0;
	float: right;
	padding: 0 10px 0 0;
	font-weight: bold;
	font-size: 1.2em;
	color: #FFFFFF;
	clear: both;
	margin-top: -95px;
	margin-right: 20px;
	margin-bottom: 0;
	margin-left: 0;
}

.tagLine {
	padding: 0;
	float: right;
	padding: 0 10px 0 0;
	font-weight: bold;
	font-size: 1.25em;
	color: #FFFFFF;
	clear: both;
	margin-top: -25px;
	margin-right: 20px;
	margin-bottom: 0;
	margin-left: 0;
	font-style: italic;
}

/* ------------------------------------- */
/* -------------FOOTER  NAVIGATION ------------ */
/* ------------------------------------- */

ul#footernav {
	list-style-type: none;
	float: center;
	font-weight: normal;
	font-size: 0.7em;
}
	ul#footernav li {
		float: center;
		display: inline;
		border-right: 1px solid #ffffff;
	}
	ul#footernav li.last {border: none}
	ul#footernav li a {
		display: inline;
		padding: 0 4px 0 2px;
	}
	ul#footernav li a:hover {text-decoration: underline}

.footerNav {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 0px 0px 0px 0px;
	font-size: .7em;
	list-style-type: none;
	display:inline;
	}
.sidebarCallout {
	color: #000066;
	font-style: italic;
	font-weight: bold;
}
.sidebarBodyCopy {
	font-size: 0.9em;
	line-height: 1.6em;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.Section_Header {	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	color: #000066;
}
.style71 {color: #333333}
.red_callout {
	color: #CC0000;
	font-size: 16px;
}
.Sub_Column_header {
	font-size: 1.2em
}

.Gray_Callout {
	font-size: 18px;
	color: #303030;
	font-style: italic;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.emailLink {
	color: #0000FF;
	background-color: #003399;
}

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

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

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 15px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
   padding: 10px 10px 10px 10px;
   width: 150px;
   background-color: #006;
   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
   */
}

.clear {
   clear: both;
}