﻿/* CSS - SNIFFER Sea Guidance */
/* Copyright LEWIS Creative Consultants 2009 */
/* Global Styles */

/* Colors

Blue - #001D68
Gold - #A8996E

 */

/*////////////////////////////////////*/
/* ---- =RESET --*/

html, body, form { height: 100%; }
* { font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; background: transparent; text-decoration: none; }
img { overflow: hidden; display: block; }
ul { list-style: none; }
ol { list-style-position: inside; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }

/*////////////////////////////////////*/
/* ---- =GLOBALS --*/

body { font: normal normal normal 0.72em Verdana ,Arial, Helvetica, sans-serif; color: #212121; background: #D7D7D7; }
h1, h2, h3, h4, h5, h6, p { margin-bottom: 20px; line-height: 1.3em; font-weight: normal; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; font-weight: bold; }
h1 { font-size: 1.9em; }
h2 { font-size: 1.5em; }
p { line-height: 1.7em; }
ul, ol, blockquote, q, table, dl { margin-bottom: 20px; }
li { margin-bottom: 5px; }
strong { font-weight: bold; }
em, i { font-style: italic; }
small { font-size: 0.8em; }
big { font-size: 1.5em; }
input, textarea, select { padding: 2px 8px; color: #212121; font-family: Verdana, Arial, Helvetica, sans-serif; background: #C8C4BB; border: solid 2px #fff; }
input:hover, input:active, input:focus, textarea:hover, textarea:active, textarea:focus, select:hover, select:active, select:focus { background: #fff; border-color: #FF6600; color: #FF6600; }
label { color: #333; }
a, a:hover, a:visited, a:active, a:focus { cursor: pointer; }
a, a:visited, a:active, a:focus { color: #FF6600; }
a:hover { color: #333; }

/*////////////////////////////////////*/
/* ---- =CLASSES --*/

/* universal clearfix hack */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.clear { clear: both; overflow: hidden; height: 0px; margin-top: -1px; }
.hidden { position: absolute; left: -9999em; }
.dn { display: none; }
.bn { background: none !important; }
.fl { float: left !important; }
.fr { float: right !important; }
.fn { float: none !important; }
.centered { margin: 0 auto; }
.tac { text-align: center; }

.bgBody01 { background: #fff url(../Images/bgBody01.jpg) no-repeat scroll center top; }
.bgBody02 { background-image: url(../Images/bgBody02.jpg); }
.bgBody03 { background-image: url(../Images/bgBody03.jpg); }
.bgBody04 { background-image: url(../Images/bgBody04.jpg); }
.bgBody05 { background-image: url(../Images/bgBody05.jpg); }
.bgBody06 { background-image: url(../Images/bgBody06.jpg); }
.bgBody07 { background-image: url(../Images/bgBody07.jpg); }
.bgBody08 { background-image: url(../Images/bgBody08.jpg); }
.bgBody09 { background-image: url(../Images/bgBody09.jpg); }
.bgBody10 { background-image: url(../Images/bgBody10.jpg); }
.bgBody11 { background-image: url(../Images/bgBody11.jpg); }

.mb0 { margin-bottom: 0 !important; }

.sub { font-size: 1.5em; }

.mainBody ul { padding-left: 30px; }
.mainBody li { padding-left: 12px; background: url(../Images/bgBullet02.png) no-repeat scroll left 5px; }

.pt10 { padding-top: 10px !important; }

.mr15 { margin-right: 15px !important; }

/*////////////////////////////////////*/
/* ---- =COPYRIGHT --*/

a.copyright { float: right; }

/*////////////////////////////////////*/
/* ---- =LAYOUT --*/

.header { margin: 40px 0 110px 0; float: left; width: 100%; background: url(../Images/bgHeader.png) repeat-x scroll left top; }
.headerInner { margin: 0 auto; width: 1000px; }
.search { margin-top: 25px; padding: 10px; float: right; width: 315px; display: block; background: url(../Images/bgSearch.png) repeat-x scroll left top; height: 23px; }
.search input { margin: 2px 14px 0 0; float: left; display: inline; width: 200px; }

.crumb { float: left; width: 100%; background: #AFAFAF; line-height: 35px; border-top: solid 3px #E6E5D3; border-bottom: solid 3px #807D7D; }
.crumbInner { margin: 0 auto; width: 1000px; }
ul.navCrumb { margin: 0 auto; padding: 0 15px; width: 970px; }
.navCrumb li { margin: 0 20px 0 0; padding-left: 12px; float: left; background: url(../Images/bgArrowGrey.png) no-repeat scroll left 14px; }
.navCrumb li a { color: #5B5B5B !important; }
.navCrumb li a:hover { color: #fff !important; }

.navCrumb li a.on { color: #fff !important; font-weight: bold; }
.body { float: left; width: 100%; }
.wrapper { margin: 0 auto; width: 1000px; }
.colL { margin-top: -3px; padding-bottom: 30px; float: left; width: 294px; }
.colR { float: right; width: 700px }

/*////////////////////////////////////*/
/* ---- =FOOTER --*/

.footer { padding-bottom: 50px; float: left; width: 100%; background: url(../Images/bgFooter.png) repeat-x scroll left top; }
.footerInner { margin: 0 auto; padding: 0 15px; width: 970px; }

ul.navFooter { margin-bottom: 30px; float: left; width: 970px; line-height: 36px; }
.navFooter li { margin: 0 20px 0 0; padding-left: 12px; float: left; background: url(../Images/bgArrowGrey.png) no-repeat scroll left 15px; }
.navFooter li a { color: #5B5B5B !important; }
.navFooter li a:hover { color: #fff !important; }

ul.navLogos { margin-bottom: 0; padding-top: 0px; float: left; }
.navLogos li { margin-right: 30px; float: left; }
.navLogos a { text-indent: -9999em; }
/*.navLogos img { -moz-opacity: .60; filter: alpha(opacity=60); opacity: .60; }*/

/*////////////////////////////////////*/
/* ---- =STRAP --*/

.strap { float: left; width: 294px; color: #fff; font-weight: bold; font-size: 1.4em; line-height: 1.3em; position: relative; z-index: 9; }
.strapMid { float: left; width: 294px; background: url(../Images/bgStrap.png) repeat-y scroll left top; }
.strapContent { margin-left: 13px; padding: 10px 20px 10px 20px; float: left; display: inline; width: 228px; background: url(../Images/bgStrapGrad.gif) repeat-x scroll left bottom; }
.strapBot { float: left; width: 294px; height: 20px; background: url(../Images/bgStrapBot.png) no-repeat scroll left top; overflow: hidden; }

/*////////////////////////////////////*/
/* ---- =NAV --*/

ul.nav { margin: -20px 0 0 14px; float: left; display: inline; width: 265px; }
.nav li { margin-bottom: 2px; float: left; }
.first { padding-top: 20px !important; }
.nav a { padding: 12px 25px; float: left; background: url(../Images/bgNav.png) repeat-y scroll left top; width: 215px; color: #5B5B5B !important; font-size: 1.1em; }
.nav a:hover { background: #eeeeee; color: #000 !important; }

.nav span { float: left; width: 215px; }

.nav a.on { padding: 12px 25px 12px 10px; width: 230px; color: #000; font-weight: bold; }
.nav a.on span { padding-left: 15px; background: url(../Images/bgArrowBlack.png) no-repeat scroll left 4px; }

a.open, a:hover.open { padding: 12px 25px 12px 10px; width: 230px; color: #000; font-weight: bold; background: #fff; }
a.open span { padding-left: 15px; background: url(../Images/bgArrowBlackDown.png) no-repeat scroll left 6px; }

ul.navSub { margin: 2px 0 0 0; float: left; }
.navSub a { padding-left: 40px !important; width: 175px !important; background: #dddddd; width: 200px !important; }
.navSub a span { width: 175px !important; }
.navSub a:hover { background: #eeeeee; }
.navSub a.on { background: #fff; }

a.bot { padding: 0 25px; width: 215px; line-height: 40px; background: url(../Images/bgNavBot.png) no-repeat scroll left top; }
a:hover.bot { background: transparent url(../Images/bgNavBot.png) no-repeat scroll left -141px; }
a.botOn, a:hover.botOn { background-position: left bottom; color: #000 !important; font-weight: bold; }

a.botOn span { padding-left: 15px; background: url(../Images/bgArrowBlack.png) no-repeat scroll left center; }

.navSub a.bot { background-position: left -282px; }
.navSub a:hover.bot { background-position: left -141px; }

.navSub a.botOn, .navSub a:hover.botOn { background-position: left bottom; }

/*////////////////////////////////////*/
/* ---- =COLR --*/

.colRBody { margin-bottom: 20px; float: left; width: 700px; }
.colRBodyTop { float: left; width: 700px; height: 6px; background: url(../Images/bgColRBodyTop.png) no-repeat scroll left top; overflow: hidden; }
.colRBodyBot { float: left; width: 700px; height: 6px; background: url(../Images/bgColRBodyBot.png) no-repeat scroll left top; overflow: hidden; }

.colRBodyMid { padding: 15px 20px; float: left; width: 660px; background: url(../Images/bgColRBodyMid.png) repeat-y scroll left top; }

.colRBodyMidSplit { background-image: url(../Images/bgColRBodyMidSplit.png); }
.colRBodyTopSplit { background-image: url(../Images/bgColRBodyTopSplit.png); }
.colRBodyBotSplit { background-image: url(../Images/bgColRBodyBotSplit.png); }

dl.icons { float: left; width: 340px; }
.icons dd { margin-right: 10px; float: left; text-align: center; color: #212121; font-size: 1.5em; }
.icons img { margin-bottom: 10px; }

.splitL { float: left; width: 270px; font-size: 1.0em; }
.splitR { float: right; width: 340px; }

/*////////////////////////////////////*/
/* ---- =RELATED ITEMS --*/

.relatedItems h2 { margin-bottom: 10px; }
.relatedItems li { margin: 0 20px 20px 0; float: left; width: 188px; font-weight: bold; font-size: 0.9em; }
.relatedItems a { padding-left: 12px; float: left; width: 176px; background: url(../Images/bgArrowOrange.png) no-repeat scroll left 3px; }

/*////////////////////////////////////*/
/* ---- =DOWNLOAD TABLE --*/

.dlTable { margin: 20px 0 0 0; float: left; width: 660px; }
.dlTable th, .dlTable td { padding: 15px; }

.col1 { width: 293px; font-size: 1.3em; color: #5B5B5B; font-weight: bold; background: url(../Images/bgDownloadTitle.png) repeat-y scroll left top; }
.col2 { width: 98px; }
.col2 a { color: #fff; font-weight: bold; }
.spacer { padding: 0 !important; width: 3px; }
.cell { padding: 0 !important; }

.airHead { background: #529192 url(../Images/bgHeadAir.gif) repeat-x scroll left top; color: #fff; font-size: 1.5em; text-align: center; }
.airHead strong { padding: 3px 0 3px 26px; background: url(../Images/iconAirMini.png) no-repeat scroll left top; }

.soilHead { background-image: url(../Images/bgHeadSoil.gif); background-color: #979B82; }
.soilHead strong { background-image: url(../Images/iconSoilMini.png); }

.waterHead { background-image: url(../Images/bgHeadWater.gif); background-color: #52809D; }
.waterHead strong { background-image: url(../Images/iconWaterMini.png); }

a.btnAir { padding: 23px 0 0 26px; display: block; width: 72px; height: 37px; background: url(../Images/iconAirButton.png) no-repeat scroll left top; }
a.btnSoil { padding: 23px 0 0 26px; display: block; width: 72px; height: 37px; background: url(../Images/iconSoilButton.png) no-repeat scroll left 8px; }
a.btnWater { padding: 23px 0 0 26px; display: block; width: 72px; height: 37px; background: url(../Images/iconWaterButton.png) no-repeat scroll left 1px; }

a:hover.btnAir, a:hover.btnSoil, a:hover.btnWater { background-position: left bottom; color: #fff !important; }

.air { background: url(../Images/bgBorderAir.png) repeat-x scroll left bottom; }
.soil { background: url(../Images/bgBorderSoil.png) repeat-x scroll left bottom; }
.water { background: url(../Images/bgBorderWater.png) repeat-x scroll left bottom; }

.iconBig { min-height: 130px; height: auto !important; height: 130px; }

/*////////////////////////////////////*/
/* ---- =CHECKBOXES --*/

.jquery-safari-checkbox { display: block; font-size: 16px; line-height: 16px; cursor: pointer; cursor: hand; }
.jquery-safari-checkbox .mark { display: inline; }
.jquery-safari-checkbox img { vertical-align: middle; width: 16px; height: 16px; float: left; background: transparent url(../Images/bgCheck.png) no-repeat left top; }
.jquery-safari-checkbox-hover img { background-position: left -16px; }
.jquery-safari-checkbox-checked img { background-position: left -32px; }
.jquery-safari-checkbox-checked .jquery-safari-checkbox-hover img { background-position: left -32px; }
.jquery-safari-checkbox-disabled img { background-position: left bottom; }
.jquery-safari-checkbox-checked .jquery-safari-checkbox-disabled img { background-position: left bottom; }

/*////////////////////////////////////*/
/* ---- =RADIO BUTTONS --*/

.jquery-safari-radio { display: block; font-size: 16px; line-height: 16px; cursor: pointer; cursor: hand; }
.jquery-safari-radio .mark { display: inline; }
.jquery-safari-radio img { vertical-align: middle; width: 16px; height: 16px; float: left; background: transparent url(../Images/bgRadio.png) no-repeat left top; }
.jquery-safari-radio-hover img { background-position: left -16px; }
.jquery-safari-radio-checked img { background-position: left -32px; }
.jquery-safari-radio-checked .jquery-safari-radio-hover img { background-position: left -32px; }
.jquery-safari-radio-disabled img { background-position: left top; }
.jquery-safari-radio-checked .jquery-safari-radio-disabled img { background-position: left bottom; }

/*////////////////////////////////////*/
/* ---- =BUTTONS/LINKS --*/

a.logo { float: left; }
a.link { padding-left: 12px; background: url(../Images/bgArrowOrange.png) no-repeat scroll left 3px; }

a.btn { padding-left: 10px; float: left; display: block; background: url(../Images/btnL.png) no-repeat scroll left top; line-height: 24px; color: #fff !important; font-weight: bold; }
a.btn span { padding-right: 17px; float: left; display: block; background: url(../Images/btnR.png) no-repeat scroll right top; }
a:hover.btn { background-position: 0% bottom; }
a:hover.btn span { background-position: 100% bottom; }