/************************************************************************/	
/************************** BASIC HTML ELEMENTS *************************/
/************************************************************************/	

/* FORMAT DEFAULTS - set default padding, collapse borders, remove outlines on certain basic elements       */
/* this section replaces the "*" declaration we used to use - so we don't fight our own code on forms, etc.*/
div, span {
	border-collapse:collapse;
	margin:0;
	padding:0;
	border:0;
	vertical-align:top; /* if using inline-block spans for columns or to replace tables, it's nice to have them default to top alignment */
}

a, img { /* get rid of borders on link images, and annoying lines on selected links */
	border-collapse:collapse;
	border:0;
	outline-style:none;
	outline-width:0px;
}
img { /* 'behavior" allows IE6 to properly display transparent .png files - requires 2 files in /css folder 'iepngfix.htc', and 'blank.gif'*/
	behavior:url('/css/iepngfix.htc');
}


/* links - note: DON'T globall ydeclare styles for "a:visited" or "a:active" - will cause headaches later */
a:link, a:visited {color:#1d4696; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}
a:hover {color:#A4E6FF; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}

/* headlines */
h1, a h1, h1 a{
	font-weight:normal;
	font-size:21px;
	color:#1d4696;
	font-family:Arial, Helvetica, sans-serif;
	margin:0 0 4px 0;
	padding:0;
	line-height:130%;
}
h2, a h2, h2 a {
	font-weight:bold;
	font-size:16px;
	color:#111;
	font-family:Arial, Helvetica, sans-serif;
	margin:0 0 2px 0;
	padding:0;
	line-height:130%;
}

h3, a h3, h3 a, h4, a h4, h4 a, h5, a h5, h5 a, h6, a h6, h6 a {
	font-size:14px;
	color:#000000;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	margin:0 0 2px 0;
	padding:0;
}


hr {
	height:2px;
	border-bottom:solid 1px #DCDCDC;
}

strong {
	font-weight:bold;
	color:#333366;
}



td {
	text-align:left;
	vertical-align:top;
}
th {
	text-align:center;
	vertical-align:bottom;
	font-weight:bold;
}

/* lists */
ul, ol {
	margin:14px 0 6px 20px;
	padding:0;
}
ul, ul, ol, ol {
	list-style-type:circle;
}
ul {
	list-style-type:disc;
}
ol {
	list-style-type:decimal;
}
li {
	margin:0;
	padding:0;
}
/* ALL FORM STYLING BELOW ASSUMES YOU WILL WRAP THE FORM IN A THIS SPAN "<span class="form_style"></span>" OTHERWISE SITE USES BROWSER DEFAULTS */


/* labels - assumes label is on left of input, or specify on the container span - e.g. <span class="form_style labels_left"></span> */
span.form_style {
	/*width:200px;
	display:block;
	float:right;
	margin:-2px 0 25px 40px;*/
	
	width:200px;
	display:block;
	float:left;
	margin:-2px 40px 25px 0px;
}

span.form_style label, span.form_style.labels_left {
	color:#222; /* have label text a hair lighter than black helps guide the eye */
	font-weight:bold;
	display:inline-block;
	width:150px;
	vertical-align:top;
	margin:0 2px 7px 0; /* use right margin for space between label and input, use bottom margin to vertically space out lines of form */
	padding:0;
	line-height:normal;
}
/* if labels on top of inputs - specify on the container span and everything will instantly change nicely - e.g. <span class="form_style labels_top"></span> */
span.form_style.labels_top label {
	color:#222; /* have label text a hair lighter than black helps guide the eye */
	font-weight:bold;
	display:block;
	width:150px;
	vertical-align:top;
	margin:0 0 2px 0; /* use right margin for space between label and input, use bottom margin to vertically space out lines of form */
	padding:0;
	line-height:normal;
}


/* set default styles on form elements - all widths default to "medium", which assumes full width of a single column */
span.form_style input, 
span.form_style input.medium,
span.form_style select, 
span.form_style textarea  {
	border:solid 1px #AAA;
	margin:0 0 4px 0;
	padding:3px 2px 3px 2px;
	width:200px;
	font-size:11px;
	line-height:normal;
	font:Arial, Helvetica, sans-serif; /* good to declare since some buttons and Safari inputs use Tahoma, etc. by default */
}
span.form_style.labels_top input {
	margin:0 0 3px 0;
}

/* selects are about 5px wider than input to line up */
span.form_style select, span.form_style select.medium {
	width:205px;
}

span.form_style textarea, span.form_style textarea.medium {
	overflow-x:hidden; /* turn off bottom scrollbar by default, some browsers put it in if narrow textarea */
	overflow-y:auto; /* let it scroll vertically if necessary */
	height:80px;
}

/* if you apply a class of "short" to an input, assumes half a column width, select and textarea adjusted a few pix */
span.form_style input.short {
	width:100px;
}
span.form_style select.short {
	width:103px;
}
span.form_style select.short {
	width:97px;
}

/* if you apply a class of "long" to an input, assumes a double column width (or a span), select and textarea adjusted a few pix */
span.form_style input.long {
	width:400px;
}
span.form_style select.long {
	width:403px;
}
span.form_style select.long {
	width:397px;
}

/* make sure checkboxes and radio buttons don't get width setting for other input items */
span.form_style checkbox, span.form_style radio {
	width:auto;
	height:auto;
}

/* buttons */
span.form_style input.button, 
span.form_style button.button
span.form_style a.button {
	border:solid 1px #AAA;
	background-color:#DDD;
	width:auto;
	padding:1px;
	font-weight:bold;
	color:#222;
	margin-top:2px;
}
span.form_style input:hover.button,
span.form_style button:hover.button 
span.form_style a:hover.button {
	border:solid 1px #777;
	background-color:#BBB;
}


span.form_style img#statusImage {
	position:absolute;
	width:24px;
	height:24px;
	margin:-18px 0 0 180px;
}
span.form_style a.button { /* an href with a class of "button" looks exactly like a button - no need for javascript on button to use it as a link */
	display:inline-block;
}
span.form_style label a.form_note {
	font-size:10px; 
	font-weight:normal; 
	line-height:10px;
	margin-left:10px;
}





			/* EXAMPLE CODE - REMOVE BEFORE GOING LIVE */
			
			
			/* HOW TO DO SOMETHING UNIQUE ON ONE PARTICULAR FORM ONLY - E.G. THE "eNews Signup Form" needs "short" input fields that are even shorter and red labels */
			
			/* Give the form container span an additional class for "eNews" - e.g.  <span class="form_style labels_top eNews"></span> */
			
			span.form_style.labels_left.eNews input.short, 
			span.form_style.labels_left.eNews select.short, 
			span.form_style.labels_left.eNews textarea.short  {
				width:40px;  /* Now the default width for all "short" input fields is 40px instead of 100px on the eNews form only */
			}
			span.form_style.eNews label, span.form_style.labels_left.eNews {
				color:red; /* labels are now red on eNews form only */
			}
			
			
			/* END EXAMPLE CODE */

/************************************************************************ */	
/*************************** BODY CONTENT/STRUCTURE ********************* */
/************************************************************************ */

body {
	color:#000000;
	margin:0;
	background: url(/images/required/bg_browser.jpg);
	background-position:top;
	background-repeat:repeat-x;
	background-color:#428EC0;
}

#container {
	width:1024px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	background: url(/images/required/bg_container_left_menu.jpg);
	background-position:top left;
	background-repeat: repeat-y;
	margin-bottom:0;
}
#container.home_page {
	background: url(/images/required/bg_container_home.jpg);
	background-position:top left;
	background-repeat: repeat-y;
}
#header {
	height:268px;
	text-align:left;
	background: url(/images/required/bg_header.jpg);
	background-position:top left;
	background-repeat: no-repeat;
}


/* header logo link */
#header a#logo_link {
	display:block;
	float:left;
	position:absolute;
	height:54px;
	width:340px;
	margin:61px 0 0 42px;
}
#header a#logo_link span {
	display:none;
}
/* header request quote link  */
div#header a#requestQuote {
	position:absolute;
	display:block;
	width:135px;
	height:21px;
	margin:28px 0 0 673px;
	background-image:url(/images/btn-request-bg.jpg);
	background-position:top left;
	background-repeat:no-repeat;
}
#header a:hover#requestQuote {
	background-image:url(/images/btn-request-over.jpg);
	background-position:top left;
	background-repeat:no-repeat;
}
#header a#requestQuote span {
	display:none;
}

/* header search box  */
#header form#search {
	position:absolute;
	display:block;
	width:163px;
	height:21px;
	margin:28px 0 0 822px;
	background-image:url(/images/search-bg.jpg);
	background-position:top left;
	background-repeat:no-repeat;
}

#header form#search input {
	border:none;
	border-collapse:collapse;
	background:none;
	font-size:11px;
	width:134px;
	margin:3px 0 0 1px;
	padding:1px 0 0 2px;
	line-height:12px;
	letter-spacing:0;
}
#header form#search input.button {
	position:absolute;
	width:24px;
	height:19px;
	display:block;
	margin:1px 0 0 138px;
	padding:0;
}
#header form#search input:hover.button, #header form#search button:hover  {
	background:#000;
	opacity:0.20;  /* Firefox/Safari */
	filter:alpha(opacity=20); /* needed for IE */
}





#pageBody {
	min-height:300px;
	height:auto !important;
	height:300px;
	padding:30px 95px 90px 275px;
	background: url(/images/required/bg_content_left_menu.jpg);
	background-position:top left;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style: normal;
	line-height:160%;
	font-weight: normal;
	font-variant: normal;
}
#container.home_page #pageBody { 
	background: url(/images/required/bg_content_home.jpg);
	background-position:top left;
	background-repeat: no-repeat;
	padding:39px 85px 40px 79px;
}

#container.ecolab #pageBody { 
	background: url(/images/required/bg_content.jpg);
	background-position:top left;
	background-repeat:no-repeat;
	padding:39px 85px 40px 79px;
}
#footer {
	width:974px;
	background-position:bottom;
	
	/* cross-browser hack to center div */
	margin-left:auto;
	margin-right:auto;
}
#footerContent {
	padding:3px 48px 3px 0px;
	color:#000;
	font:normal 11px/100% Arial, Helvetica, sans-serif;
	text-align:center;
}
.loginBtn {
	background-image: url(/images/icons/login.gif);
	background-position:right;
	background-repeat:no-repeat;
	background-color:#F9F9F9;
	border:none;
	height:23px;
	width:65px;
	margin:0 10px 0 0;
	padding:0;
	text-align:left;
	font-weight:bold;
	font-size:14px;
	color:#333;
}
.loginBtn:hover {
	background-color:#ECEFF2;
}
.forgotBtn {
	background-image: url(/images/icons/forgot.gif);
	background-position:right;
	background-repeat:no-repeat;
	background-color:#F9F9F9;
	border:none;
	height:23px;
	width:175px;
	margin:0 10px 0 0;
	padding:0;
	text-align:left;
	font-weight:bold;
	font-size:14px;
	color:#333;
}
.forgotBtn:hover {
	background-color:#ECEFF2;
}
.findPasswordBtn {
	background-image: url(/images/icons/forgot.gif);
	background-position:right;
	background-repeat:no-repeat;
	background-color:#F9F9F9;
	border:none;
	height:23px;
	width:160px;
	margin:0 10px 0 0;
	padding:0 24px 0 0;
	text-align:left;
	font-weight:bold;
	font-size:14px;
	color:#333;
}
.findPasswordBtn:hover {
	background-color:#ECEFF2;
}
.returnLoginBtn {
	background-image: url(/images/icons/login.gif);
	background-position:right;
	background-repeat:no-repeat;
	background-color:#F9F9F9;
	border:none;
	height:23px;
	width:140px;
	margin:0 10px 0 0;
	padding:0 24px 0 0;
	text-align:left;
	font-weight:bold;
	font-size:14px;
	color:#333;
}
.returnLoginBtn:hover {
	background-color:#ECEFF2;
}

/************* DOWNLOAD LISTS ************/
span.download_list {
	display:block;
}
span.download_list h4, h4.faq_questions {
	margin:10px 0 12px 0;
	color:#191919;
	fonts-size:12px;
	background:#E2E2E2;
	padding:2px 2px 2px 12px;
	line-height:normal;
}
span.download_list span.download_item {
	display:block;
}
span.download_list span.download_item a {
	margin:0 0 10px 12px;
	display:inline-block;
	line-height:normal;
}
span.download_list span.download_item a:hover {
	color:#888;
}
span.download_list span.download_item a img {
	width:10px;
	height:10px;
	padding-right:5px;
}


/************* HOME PAGE ************/
#homeContainer {
	width:920px;
	margin-left:-30px;
	margin-right:30px;
	margin-top:-38px;
	line-height:150%;
	font-size:12px;
	height:425px;
}
#homeLeft {
	float:left;
	margin-top:0px;
	width:675px;
	margin-bottom:-40px;
}
#homeLeftContent {
	float:left;
	margin-top:205px;
	width:240px;
	height:255px;
	overflow:hidden;
}
/*#homeMiddle {
	width:427px;
	position:absolute;
	margin-left:249px;
}*/

#homeMiddle {			
	width:427px;
	position:absolute;
	margin-left:249px;
}
#homeRightContent {
	float:right;
	width:235px;
	margin-top:205px;
	margin-bottom:-40px;
	height:255px;
	overflow:hidden;
}

/* clients page */
div#client_icons {
	background: #EDF2F6;
	width:405px;
	float:right;
	padding:15px 0 0 0;
	margin:25px 0 0 30px;
	text-align:right;
	border:solid 1px #666FA1;
}
div#client_icons img {
	width:100px;
	height:83px;
	padding:5px;
	border:solid 1px #666FA1;
	display:inline-block;
	margin:0 15px 15px 0;
	background:#FFF;
}
div#client_list ul {
	line-height:15px;
	margin:28px 0 0 15px;
}
div#client_list ul li {
	margin:0;
	padding:0 0 8px 0;
}
a.home_panel_link {	
	position:absolute; 
	width:255px; 
	height:250px; 
	display:block; 
	margin:-207px 0 0 -8px;
	text-align:center;
}
a.home_panel_link span.hidden_text {
	display:none;
}



/************* INTERIOR PAGE LAYOUTS (COLUMNS) ************/
div.left_column {
	float:left;
	width:50%;
	padding-right:30px;
}
div.right_column {
	float:right;
	width:50%;
	padding-left:30px;
}
div.clear_columns {
	clear:both;
}



/*div#slideshow_container {  			
	float:right;
	width:320px;
	height:250px;
	margin:2px 0 30px 30px;
	overflow:hidden;
	border:solid 1px #032E63;

}*/
div#slideshow_container {  			
	float:right;
	width:335px;
	height:270px;
	margin:0px 0 15px 15px;
	vertical-align:top;
	text-align:left;

}
span#contact_address {  				
	display:block;
	position:absolute;
	width:140px;
	margin:40px 0 0 -207px;
	color:#FFF;
}

ul.faq_list {

}
ul.faq_list li {
	margin:0 0 5px 0;
	padding:0;
	line-height:140%;


}
ul.faq_list li a.faq_link {
	margin:0;
	padding:0;
	display:block;
}



#flash_3_Step { 
	overflow:hidden;
	margin-right:-50px;
	margin-left:-13px;




}

/************* EDIT DIVS (WITHIN DISPLAY PAGES) ************/
.editDiv {
	border:dashed 1px #0000CC;
	margin: -1px -1px -1px -1px;
}
.inlineEditDivIcon, .editDivIcon {
	display:block;
	width:24px;
	height:24px;
	background-image: url(/images/editdiv/editor.png);
	background-repeat:no-repeat;
	overflow:hidden;
	text-indent:-9000px;
}
.editDivIcon {
	display:none;
	z-index:999;
	position:absolute;
}
.loginTable {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style: normal;
	line-height:150%;
	font-weight: normal;
	font-variant: normal;
	color:#000000;
}
.loginTable td {
	vertical-align:middle;
	padding:0 3px 8px 0;
}
.loginTableLabelTD {
	text-align:left;
	font-weight:bold;
	color:#393939;
}
.loginTableColumnInput {
	width:245px;
	height:20px;
	margin:0;
	padding:0 1px 0 1px;
	border:solid 1px #AAAAAA;
	font-size:14px;
	letter-spacing:0;
}
.basicTable {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style: normal;
	line-height:150%;
	font-weight: normal;
	font-variant: normal;
	color:#000000;
}
.basicTable td {
	vertical-align:middle;
	padding:0 3px 8px 0;
}
.basicTableLabelTD {
	text-align:left;
	font-weight:bold;
	color:#393939;
}

.ecolabTable {
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	font-style: normal;
	line-height:100%;
	font-weight: normal;
	font-variant: normal;
	color:#000000;
}
.ecolabTable td {
	vertical-align:middle;
	padding:0 0px 0px 0;
	margin:0;
	text-align:center;
	border:solid 1px #CCC;
}

.ecolabTable th {
	text-align:left;
	font-weight:bold;
	color:#fff;
	background-color:#1d4696;
	vertical-align:bottom;
	margin:0;
	padding:0 3px 3px 3px;
	text-align:center;
}

/* FILE LIST TABLE START */
#pageBody table.fileList {
	border:1px solid #1D4696;
	width:350px;
}
#pageBody table.fileList th {
	background-color:#1D4696;
	color:#FFFFFF;
	padding:5px 5px 5px 10px;
}
#pageBody table.fileList th.filename {
	text-align:left;
	width:250px;
}
#pageBody table.fileList th.filesize {
	text-align:right;
}
#pageBody table.fileList th.fileremove {
	width:10px;
}
#pageBody table.fileList .odd, #pageBody table.fileList .odd td, #pageBody table.fileList td {
	background-color:transparent;
	padding:5px 5px 5px 10px;
	border-right:1px solid #1D4696;
}
#pageBody table.fileList .even, #pageBody table.fileList .even td {
	background-color:#F0F0F0;
	padding:5px 5px 5px 10px;
	border-right:1px solid #1D4696;
}
#pageBody table.fileList td.filename {
	text-align:left;
}
#pageBody table.fileList td.filesize {
	text-align:right;
}
#pageBody table.fileList td.fileremove {
	text-align:center;
	padding:5px 5px 5px 5px;
}
/* FILE LIST TABLE END */