body { font-family: Arial, Helvetica, SunSans-Regular, sans-serif; line-height: 130%; text-align: center; letter-spacing: 1px; margin: 0; padding: 0; behavior: url(csshover.htc); }
#wrapperback { background-image: url(images/HSI_body-bkgd2.gif); background-repeat: repeat-x; background-position: 0 -20px; width: 100%; min-height: 1100px; height: auto !important; height: 1100px; float: left; min-height: 1100px; margin-right: auto; margin-bottom: 10em; margin-left: auto; }
#wrapperback2 { background-image: url(images/HSI_body-bkgd2.gif); background-repeat: repeat-x; background-position: 0 -110px; margin-right: auto; margin-bottom: 10em; margin-left: auto; width: 100%; height: auto !important; min-height: 1100px; float: left; }
#wrapper { width: 960px; height: auto; margin: 0 auto; }
a:active { outline: none; }
a:focus { -moz-outline-style: none; }
/**/
div#head { background-color: #fff; background-image: url(images/HSI_head-bkgd2.gif); background-repeat: repeat-y; width: 960px; height: 130px; float: left; margin: 0; padding: 0; }
div#head2 { background-color: #fff; background-image: url(images/HSI_head-bkgd2.gif); background-repeat: repeat-y; margin: 0; padding: 0; width: 960px; height: 40px; float: left; }
div#head ul, div#head2 ul { width: 240px; height: 12px; float: right; margin: 0.25em 0 0; padding: 0 0 0 0; list-style-type: none; display: inline; }
div#head li, div#head2 li { color: #215a9f; font-size: 70%; font-weight: 600; word-spacing: 4px; letter-spacing: 1px; position: relative; left: 20px; float: left; margin: 0; padding: 0 5px; }
div#head li.alt, div#head2 li.alt { padding-right: 0; border-style: none; border-width: 0; }
div#head li a, div#head2 a { color: #000; text-decoration: none; }
div#head li a:hover, div#head2 a:hover { color: #215a9f; }
/**/
/**/
div#navbar { background-image: url(images/HSI_head-bkgd2.gif); background-repeat: repeat-y; width: 960px; height: 58px; float: left; margin: 0; padding: 0 0 0; }
ul#nav { background-image: url(images/HSI_navbar2.gif); background-repeat: repeat-x; background-position: 0 29px; width: 940px; height: 58px; float: left; margin: 0; padding: 0 0 0 20px; list-style-type: none; display: inline; white-space: nowrap; }
ul#nav li { color: #000; font-size: 70%; font-weight: 600; letter-spacing: 2px; position: relative; width: 154px; height: 24px; float: left; margin: 0; padding: 0; }
ul#nav li a { color: #000; background-image: url(images/HSI_navtab.gif); background-repeat: no-repeat; background-position: 0 1px; text-decoration: none; top: 0; width: 154px; height: 22px; padding: 7px 0 0; display: block; }
ul#nav li a:hover { color: #795f1d; text-decoration: none; background-image: url(images/HSI_navtab.gif); background-repeat: no-repeat; background-position: 0 3px; height: 20px; padding-top: 9px; }
ul#nav li a:hover /* IE6 hack */ { overflow: hidden; }
ul#nav li ul.nav2 { background-image: none; position: absolute; width: 154px; float: left; margin: 0; padding: 0; list-style-type: none; display: none; }
ul#nav li ul.nav2 /* IE6, IE7 hack */ { position: absolute; left: 0; }
ul#nav li:hover ul.nav2, li.over ul.nav2 { display: block; }
ul#nav li ul.nav2 li { color: #795F1d; font-size: 90%; font-weight: normal; background-image: none; text-align: center; letter-spacing: 1px; position: relative; width: 154px; float: none; margin: 0; padding: 0; border-top: 1px outset #8c8c8b; border-bottom: 1px outset #8c8c8b; }
ul#nav li ul.nav2 li a { color: #21549f; background-image: url(images/HSI_head-bkgd.gif); background-repeat: repeat; width: 149px; height: 25px; margin: 0; padding: 0; border-left: 5px solid #21549f; display: block; }
ul#nav li ul.nav2 li a:hover /* IE 6 hack: background and height */ { color: #8b6c1d; background-image: url(images/HSI_head-bkgd.gif); background-repeat: repeat; width: 149px; height: 25px; margin: 0; padding: 0; border-left-color: #8b6c1d; }
/**/
#flashcontent { width: 960px; height: 250px; float: left; margin: 0; padding: 0; }
#container { background-color: #fff; background-image: url(images/HSI_wave.jpg); background-repeat: repeat; background-position: 0 5px; width: 960px; height: auto; float: left; margin: 0; padding: 1.5em 0 2em; }
/**/
.clearfix:after { content:"."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-table; }
/*backslash hack hides from IE/MAC\*/
*html .clearfix {height: 1%;}
.clearfix {display: block;}
/*end backslash hack */
/**/
/**/
div#columnleft { width: 202px; height: auto; float: left; margin: 1em 0 0; padding: 0 15px; }
div#columnleft h3 { font-size: 70%; font-weight: 600; line-height: 120%; text-align: left; letter-spacing: 2px; height: 90px; margin: 0; padding: 15px 0 0; border-top: 3px double #21549f; white-space: nowrap; }
div#columnleft h3 img { position: relative; top: -30px; float: left; margin: 0; padding: 0 6px 0 0; }
div#columnleft ul { position: relative; top: -25px; width: 202px; margin: 0; padding: 0 0 10px 10px; border-bottom: 3px double #21549f; list-style-type: none; display: list-item; }
div#columnleft li { font-size: 70%; font-weight: normal; line-height: 120%; background-image: url(images/HSI_arrow.jpg); background-repeat: no-repeat; background-position: 0 1px; text-align: left; text-indent: 0; letter-spacing: 1px; margin: 0; padding: 0 0 0.5em 12px; }
div#columnleft a { color: #21549f; font-size: 85%; text-decoration: none; text-indent: 0; }
div#columnleft a:hover, body#potable-a #t-sampling a, body#potable-b #t-disinfect a, body#potable-c #t-pH a, body#potable-d #t-report a, body#potable-e #t-chlorination a, body#potable-f #t-maintenance a,body#process-a #t-cleaning a, body#process-b #t-reuse a, body#process-c #t-heating a, body#process-d #t-additives a, body#wastewater-a #t-pondsentry a, body#wastewater-b #t-ww_ph a, body#wastewater-c #t-nutrients a, body#wastewater-d #t-operations a, body#wastewater-e #t-ww_reporting a, body#resources-a #t-data a, body#resources-b #t-papers a, body#resources-c #t-videos a, body#company-a #t-credentials a, body#resources-d #t-brochures a { color: #795f1d; text-decoration: underline; }
div#columnleft p { font-size: 70%; line-height: 140%; text-align: center; margin: 0 0 1em; padding: 0; }
div#columnleft h4 { font-size: 70%; font-weight: normal; line-height: 120%; text-align: center; margin: 0 0 1em; padding: 0; }
div#columnleft h5 { font-size: 80%; font-weight: normal; line-height: 120%; text-align: center; margin: 1em 0 0; padding: 0; }
/**/
/**/
div#columncenter { width: 434px; height: auto; float: left; margin: 0; padding-top: 1em; padding-right: 15px; padding-left: 25px; }
div#columncenter h2 { font-size: 80%; line-height: 125%;font-weight: normal; font-style: normal; text-align: left; margin: 0 0 1em; padding: 0; }
div#columncenter p { font-size: 80%; font-weight: normal; line-height: 125%; text-align: left; margin: 0 0 1em; padding: 0; }
div#columncenter ul { width: 450px; float: left; margin: 0; padding: 0; list-style-type: none; display: list-item; }
div#columncenter li { font-size: 60%; font-weight: normal; text-align: left; text-indent: -20px; padding: 0 0 0 20px; margin: 0; }
div#columncenter li img { font-weight: normal; margin: 0; padding: 0 0 30px; float: left; }
ul#contact { width: 300px; margin: 0 0 1em; padding: 0; list-style-type: none; display: list-item; }
ul#contact li { font-size: 80%; font-weight: normal; text-align: left; padding: 0; margin: 0; }
div#columncenter h4 { color: #21549f; font-size: 70%; font-weight: bold; line-height: 125%; text-align: left; margin: 0; padding: 0 0 2px; }
div#columncenter h5 { font-size: 80%; font-weight: normal; line-height: 120%; text-align: center; word-spacing: 1px; letter-spacing: 2px; margin: 1em 0; padding: 0; }
div#columncenter a { color: #21549f; font-weight: 600; text-decoration: none; padding: 5px 7px; }
div#columncenter a:hover { color: #795f1d; background-color: #ebebeb; text-decoration: none; }
/**/
/**/
div#columnright { width: 212px; height: auto; float: left; margin: 0; padding: 0 10px 0 15px; }
div#columnright ul { position: relative; top: -25px; width: 202px; margin: 0; padding: 0 0 0 5px; list-style-type: none; display: list-item; }
div#columnright li { font-size: 70%; font-weight: normal; line-height: 120%; text-align: left; margin: 0; padding: 0 0 5px; }
div#columnright h3 { font-size: 70%; font-weight: 600; line-height: 120%; text-align: left; letter-spacing: 2px; height: 90px; margin: 0; padding: 15px 0 0; border-top: 3px double #21549f; white-space: nowrap; }
div#columnright h3 img { position: relative; top: -30px; float: left; margin: 0; padding: 0 6px 0 0; }
div#columnright h4 { font-size: 70%; font-weight: normal; line-height: 120%; text-align: center; letter-spacing: 1px; margin: 0 0 0.5em; padding: 0; }
div#columnright h5 { font-size: 70%; font-weight: normal; line-height: 120%; text-align: center; letter-spacing: 1px; position: relative; top: -15px; margin: 0; padding: 2em 0 0; border-top: 3px double #21549f; }
/**/
/**/
div#columnrightsub { width: 212px; height: auto; float: left; margin: 0; padding: 0 10px 0 15px; }
div#columnrightsub ul { position: relative; top: -25px; width: 202px; margin: 0; padding: 0; list-style-type: none; display: list-item; }
div#columnrightsub li { font-size: 70%; font-weight: normal; line-height: 120%; text-align: left; letter-spacing: 1px; margin: 0; padding: 0 0 2px 15px; }
div#columnrightsub li strong { color: #21549f; }
div#columnrightsub li a { color: #21549f; text-decoration: underline; }
div#columnrightsub li a:hover { color: #9f7319; }
div#columnrightsub h3 { font-size: 70%; font-weight: 600; line-height: 120%; text-align: left; letter-spacing: 2px; height: 90px; margin: 0; padding: 15px 0 0; border-top: 3px double #21549f; white-space: nowrap; }
div#columnrightsub h3 img { position: relative; top: -30px; float: left; margin: 0; padding: 0 6px 0 0; }
/**/
/**/
div#logo { vertical-align: middle; width: 960px; float: left; }
div#logo h1 { color: #1e5c9f; font-size: 95%; font-family: "Times New Roman", Times, serif; font-weight: 400; font-style: italic; line-height: 120%; text-align: center; letter-spacing: 0; left: 0; right: 0; bottom: 0; height: 85px; float: left; margin: 0; padding: 40px 0 0; }
div#logo img { float: left; padding-left: 300px; display: block; }
/**/
/**/
div#logo2 { vertical-align: middle; width: 500px; float: left; }
div#logo2 h1 { color: #1e5c9f; font-size: 95%; font-family: "Times New Roman", Times, serif; font-weight: 400; font-style: italic; line-height: 120%; text-align: center; letter-spacing: 0; left: 0; right: 0; bottom: 0; height: 85px; float: left; margin: 0; padding: 50px 0 0; }
div#logo2 img { float: left; display: block; }
/**/
#cse { overflow: hidden; margin: 0 0 1em; padding: 4px 0 0; }
blockquote { color: #000; font-size: 80%; line-height: 120%; background-image: url(images/quote.jpg); background-repeat: no-repeat; background-position: 50px center; text-align: left; width: 205px; height: auto; margin: 0 0 2em; padding: 20px 0 0 10px; }
blockquote em { color: #000; font-size: 90%; font-family: "Times New Roman", Times, serif; font-weight: 400; font-style: italic; margin-top: 10px; padding-left: 20px; display: block; }
blockquote em.alt { font-style: normal; margin: 0; padding: 0; }
/**/
#displaycontainer { background-color: #fff; background-image: url(images/HSI_Callout-bkgdprocess.jpg); background-repeat: no-repeat; background-position: 0 -5px; width: 960px; height: 250px; float: left; margin: 0; padding: 0; }
#photo { text-align: left; width: 700px; height: 250px; float: left; margin: 0; padding: 0; }
#callout { width: 220px; height: 260px; float: left; margin: 0; padding: 0 15px; }
div#callout h2 { color: #fff; font-size: 100%; font-family: "Times New Roman", Times, serif; font-weight: 500; font-style: italic; word-spacing: 2px; letter-spacing: 2px; margin: 1.75em 0 0; padding: 0; }
div#callout p { color: #fff; font-size: 70%; font-weight: 400; margin: 7.5em 0 0; padding: 6px; }
#displaycontainer2 { background-image: url(images/Process_subhead1.jpg); background-repeat: no-repeat; background-position: 0 0; width: 960px; height: 135px; float: left; margin: 0; padding: 0; }
#callout2 { width: 220px; height: 135px; float: right; margin: 0; padding: 0 15px; }
div#callout2 h2 { color: #fff; font-size: 100%; font-family: "Times New Roman", Times, serif; font-weight: 500; font-style: italic; word-spacing: 2px; letter-spacing: 2px; margin: 1.25em 0 0; padding: 0; }
div#callout2 p { color: #fff; font-size: 70%; font-weight: 400; margin: 0; padding: 2px 6px 6px; }
/**/
/**/
#NewsTicker { position: relative; top: -25px; width: 200px; height: 140px; margin: 0 auto 0.5em; padding-bottom: 5px; padding-left: 10px; border-bottom: 3px double #21549f; }
#NewsVertical { width: 200px;height: 110px; display: block; overflow: hidden; position: relative; }
#controller { padding: 2px 0 15px; font-size: 60%; color: #000; line-height: 16px; text-align: left; }
#controller img { color: #000; font-size: 60%; text-align: left; vertical-align: top; }
#play_scroll_cont{ display: none; }
/* --------------- */
/* Ticker Vertical */
#TickerVertical { width: 200px; height: 130px; display: block; list-style: none; margin: 0; padding: 0; }
#TickerVertical li { display: block; width: 190px; text-align: left; height: 115px; margin: 0; padding: 0 0 10px 10px; float: left; }
#TickerVertical li a { font-weight: bold; text-decoration: none; }
#TickerVertical li a:hover { text-decoration: underline; }
#TickerVertical li img { float: left; margin-right: 5px;}
/**/