#state-list-instruction { position: absolute; right: 8px; top: 5.5em; z-index: 20; background: url('/images/ui/state/icon-sprite-info.png') no-repeat 1px -76px transparent; margin: 0; padding: 0 0 0 18px; font-size: 0.9em; color: #555; width: 92px; height: 30px; }
#state-list-instruction.nojs { position: relative; float: left; clear: both; width: 100%; top: 1em; left: 0;  }
#state-list { position: relative; border-bottom: 3px solid #CCC; float: none; clear: none; list-style-type: none; list-style-image: none; margin: 1em 0 0; padding: 0; z-index: 10; height: 34px; }
#state-list li { list-style-type: none; list-style-image: none; display: block; float: left; clear: none; margin: 0 0 0 8px; padding: 0; }
#state-list li a { display: block; float: none; margin: 0; padding: 8px 20px; border: 1px solid #ccc; border-bottom: none; text-decoration: none; outline: none; font-weight: bold; background-color: #F2F2F2; color: #0066CC; }
#state-list li a:hover { background-color: #333; color: #fff; border-color: #333; }
#state-list li.active a, #state-list.tabs li.selected a:hover { padding: 6px 20px 11px; border: 3px solid #ccc; border-bottom: none; color: #333; background-color: #fff; }
.state-box { border: 3px solid #CCC; border-top: none; padding: 10px; z-index: 0; overflow: auto; float: none; clear: none; width: 614px; }
.state-box h2 { margin: 0 0 1em; padding: 0.5em 0 0; font-weight: normal; font-size: 1.3em; color: #333; }
.state-box.tab h2 { position: absolute; left: -9999px; }
.state-box li { color: #333; }
.state-box h3 { display: block; width: 100%; padding: 0.4em 0; margin: 0 0 0.1em; color: #333; font-weight: normal; font-size: 1.3em; border: 0; }
.hidden { position: absolute; top: -9999px; left: -9999px; }
.state-box a.gotop { float: right; clear: both; text-align: right; }
.state-map { float: left; clear: left; width: 80px; }
.state-warnings { float: left; clear: none; width: 500px; margin-left: 10px; }
.state-warnings h3 { color: #000; position: relative; width: 360px; padding: 0.5em 0 0.5em 36px; text-transform: normal; font-size: 1.2em; background: url('/images/marine/warnings.png') no-repeat 10px 0.55em  #FBE983;}
.state-warnings h3 a.rss-link { position: absolute; right: 8px; top: 8px; }
.state-warnings ul { margin-top: 0.5em; }
.state-warnings ul li { margin: 0.1em 0; }
.state-warnings ul li:first-child { list-style-type: none; list-style-image: none; margin: 0 0 0.3em -17px; }
.state-warnings a { color: #333; text-decoration: none; }
.state-warnings a:hover { color: #000; text-decoration: underline; }
.state-warnings a.info { background: url('/watl/images/symbols/about.gif') no-repeat 3px 0 transparent; padding-left: 24px; display: block; height: 18px; }
.state-forecasts { float: left; clear: left; width: 380px; margin-top: 1em; }
.state-observations { float: left; clear: none; width: 224px; margin-left: 10px; margin-top: 1em; }
.state-forecasts h3 { background-color: #B3DC6C; text-align: center; }
.state-forecasts h4 { font-size: 1em; font-weight: normal; color: #000; margin: 0.7em 0 0.2em; padding: 0 0 0.3em; border-bottom: 1px dotted #999; }
.state-observations h3 { background-color: #A2C4C9; text-align: center; }

#national-services h2 { display: block; width: 100%; background-color: #E1E1E1; padding: 0.5em 0; text-align: center; font-weight: normal; font-size: 1.3em; color: #000; }
#national-services ul { list-style-type: none; list-style-image: none; margin: 1em 0 0; padding: 0; overflow: auto; width: 642px; }
#national-services li { list-style-type: none; list-style-image: none; display: block; margin: 0 10px 1em 0; padding: 0; float: left; clear: none; width: 98px; border: none; }
#national-services li.last { margin-right: 0; width: 100px; }
#national-services li a { display: block; margin: 0; float: none; width: 84px; padding: 15px 7px; height: 70px; background-color: #ccc; text-align: center; vertical-align: middle; text-decoration: none; font-size: 1.2em; color: #000; }
#national-services li.last a { padding: 15px 8px; }
#national-services li.twoline a { padding: 32px 8px; height: 36px; }
#national-services li.threeline a { padding: 24px 8px; height: 52px; }
#national-services li.teal a { background-color: #A2C4C9; }
#national-services li.purple a { background-color: #C0AEEA; }
#national-services li.orange a { background-color: #FFAD46; }
#national-services li.green a { background-color: #B3DC6C; }
#national-services li.blue a { background-color: #9FC6E7; }
#national-services li.red a { background-color: #D06B64; }
#national-services li a.nojs:hover { background-color: #333; color: #fff; }

.marine-callout { background-color: #F2F2F2; margin: 10px 0; padding: 1em 0; }
.marine-callout hr { color: #333; line-height: 1px; margin: 1em 0; padding: 0; border: 1px solid #CCC; }
.marine-callout h3 { color: #CC3300; text-align: center; font-weight: normal; font-size: 1.3em; }
#five-checks-link { display: block; margin: 5px auto; text-align: center; }
#right-column a { color: #333; text-decoration: none; }
#right-column a:hover { color: #000; text-decoration: underline; }
#right-column ul { margin: 0; }
#right-column .marine-callout ul { margin: 0 4px; }
#right-column ul li { background: url('/images/ui/state/icon-sprite-arrow.png') no-repeat 6px -65px transparent; list-style-image: none; margin: 0 0 0.3em; padding-left: 24px;  }
#right-column ul li.info { background: url('/watl/images/symbols/about.gif') no-repeat 3px 0 transparent;  }
#right-column ul li.talk { background: url('/images/ui/state/icon-sprite-info.png') no-repeat 4px -36px transparent;  }