/* @override http://ocean.nationalgeographic.com/index.php/styles/ */

/* @override http://ocean.nationalgeographic.com/index.php/styles/ */

/* ----------------------------------------------------------
	Ocean Now CSS
	Managed by: Blue State Digital
	Last Update: March 2009

	TABLE OF CONTENT

	01 - GLOBAL BROWSER RESET
	02 - COMMON STYLE
	03 - STRUCTURE
	04 - HOMEPAGE ELEMENTS
	05 - SUBPAGE ELEMENTS
	06 - UTILITY
---------------------------------------------------------- */

/* @group 01 - GLOBAL BROWSER RESET */


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset,img { border: 0; }

address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; }

ol,ul { list-style: none; }
caption,th { text-align: left; }

h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }

q:before,q:after { content: ''; }
abbr,acronym { border: 0; }

/* @end */


/* @group 02 - COMMON STYLE */

body { font: 75% Arial, Helvetica, sans-serif; color: #666;}

a { color: #044e8e; }

h1, h2 { font-size: 1.5em; line-height: 1.4em; font-weight: bold; color: #333; background: url(/page/-/images/site/bg-greentitlebox.jpg) no-repeat 0 4px; padding-left: 15px; margin-bottom: 10px;}

body.interior #content .main h1 a { color: #333;text-decoration: none; }
body.interior #content .main h1 a:hover { color: #999; }

body.interior #content .main .left h2, body.interior #content .main .page h2 { background: none; padding: 0; font-size: 1.3em;}
body.interior #content .main h3 { font-weight: bold; color: #212121; line-height: 1.5em;}

p { line-height: 1.5em; margin-bottom: 1em;}

body.interior #content .main ul, body.interior #content .main ol { margin: 1em 1.5em; padding-left: 15px;}
body.interior #content .main ul { list-style-type: disc; }
body.interior #content .main ol { list-style-type: decimal; }
body.interior #content .main ul li, body.interior #content .main ol li { line-height: 1.25em; margin: 5px 0;}

blockquote{ background: url(http://www.bluestatedigital.com/page/-/images/wrapper/bg-blockquote.jpg) no-repeat; font-size: 1em; line-height: 1.5em ; margin: -10px 0 15px 35px; padding: 10px 0 0 39px; }

.video { background: url(/page/-/images/site/bg-title-videos.png) no-repeat 0 5px; text-indent: 20px;
}
.intro { font-size: 1.4em; line-height: 1.35em; }
.author { color: #044e8e; font-style: italic;}

/* @end */

/* @group 03 - STRUCTURE */

body { background: #003449; }

#page { width: 100%; background: url(/page/-/images/site/background.jpg) no-repeat center top; }

#container { width: 990px; margin: 0 auto 15px auto;}

#header { width: 990px; height: 104px; position: relative; }

#leaderboard { width: 100%; background: #000; text-align: center;}

#header a.logo { background: url(/page/-/images/site/title-logo.png) no-repeat; width: 315px; height: 52px; display: block; text-indent: -9999px; overflow: hidden; position: absolute; bottom: 0;}

#header #sponsor { background-image: url(/page/-/images/site/bg-topsponsor.jpg); width: 179px; height: 27px; position: absolute; right: 0; bottom: 40px; color: #fff; padding: 15px 10px; }
#header #sponsor p { font: .95em/1.2em Calibri, sans-serif;float: left; display: block; width: 140px; text-align: right; }
#header #sponsor img { float: right; }

ul#navigation { width: 663px; height: 40px; background: url(/page/-/images/site/navigation.png) no-repeat; position: absolute; bottom: 0; right: 0;}
ul#navigation li { float: left; }
ul#navigation li a { display: block; height: 40px; text-indent: -9999px; overflow: hidden;}
ul#navigation li.home a { width: 82px; }
ul#navigation li.blog a { width: 102px; }
ul#navigation li.maps a { width: 161px; }
ul#navigation li.about a { width: 190px; }
ul#navigation li.action a { width: 128px; }

ul#navigation li.home a:hover { background: url(/page/-/images/site/navigation.png) no-repeat 0 -40px; }
ul#navigation li.blog a:hover { background: url(/page/-/images/site/navigation.png) no-repeat -82px -40px; }
ul#navigation li.maps a:hover { background: url(/page/-/images/site/navigation.png) no-repeat -184px -40px; }
ul#navigation li.about a:hover { background: url(/page/-/images/site/navigation.png) no-repeat -345px -40px; }
ul#navigation li.action a:hover { background: url(/page/-/images/site/navigation.png) no-repeat -535px -40px; }

ul#navigation li.home.nav_active a { background: url(/page/-/images/site/navigation.png) no-repeat 0 -80px; }
ul#navigation li.blog.nav_active a { background: url(/page/-/images/site/navigation.png) no-repeat -82px -80px; }
ul#navigation li.maps.nav_active a { background: url(/page/-/images/site/navigation.png) no-repeat -184px -80px; }
ul#navigation li.about.nav_active a { background: url(/page/-/images/site/navigation.png) no-repeat -345px -80px; }
ul#navigation li.action.nav_active a { background: url(/page/-/images/site/navigation.png) no-repeat -535px -80px; }

#body { background: #fff; padding-bottom: 15px; }

#content { width: 653px; float: left;}




body.homepage #content .main { padding: 20px 0 20px 20px; }
body.interior #content .main { padding: 20px; }

body.homepage #sidebar { width: 337px; float: right; }
body.interior #sidebar { width: 300px; padding: 20px 18px 20px 19px; float: right;}

#content .main .left { width: 365px; float: left; padding: 0 20px 0 0; border-right: 1px solid #c8d6e3;}
body.interior #content .main .left { border: none; margin-left: 15px; display: inline; padding-right: 5px;}

#content .main .right { width: 206px; float: right; padding-right: 20px; border-right: 1px solid #c8d6e3;}
body.interior #content .main .right { border: none; padding: 0 0 0 20px;}

body.homepage #sidebar #sidebar-ad { margin: 20px 18px 20px 19px; }
body.interior #sidebar #sidebar-ad { margin: 20px 0; }
#sidebar #sidebar-ad h5 { font-size: .9em; line-height: 1.5em;color: #112841; text-transform: uppercase; text-align: right; }
#sidebar #donate { margin: 20px 18px 20px 34px; }
#sidebar #donate h2 { margin-left: -15px; }

ul#bodynav { background: url(/page/-/images/site/bg-bodynav.png) no-repeat; width: 990px; height: 54px; padding: 0px; }
ul#bodynav li { float: left; font-size: 1.2em; font-weight: bold; color: #003449; margin-right: 25px; padding-top: 20px; display: inline;}
ul#bodynav li a { color: #003449; text-decoration: none; display: block; height: 34px;}
ul#bodynav li a.home { display: block; width: 40px; padding: 0 0 0 172px;}
ul#bodynav li a.blog { width: 70px;}
ul#bodynav li a.maps { width: 120px; }
ul#bodynav li a.about { width: 148px; }
ul#bodynav li a.action { width: 85px; }
ul#bodynav li a:hover { color: #999; }
ul#bodynav li.facebook { float: right; font-size: 1em; font-weight: normal; color: #666; background: url(/page/-/images/site/btn-bodynav-facebook.jpg) no-repeat right 5px; padding-right: 25px; height: 20px; display: inline; width: 125px; padding-top: 8px;}
ul#bodynav li.facebook a { color: #666; height: auto;}
ul#bodynav li.twitter { float: right; font-size: 1em; font-weight: normal; color: #666; background: url(/page/-/images/site/btn-bodynav-twitter.png) no-repeat right 5px; padding-right: 25px; height: 20px; display: inline; width: 125px; padding-top: 5px;}
ul#bodynav li.twitter a { color: #666; }

ul#bodynav li.nav_active { border-top: 5px solid #003449; padding-top: 15px;}
ul#bodynav li.nav_active a:hover { color: #003449; cursor: arrow;}

#footer { text-align: center; color: #4c6c7a; margin-bottom: 25px;}
#footer ul.main { padding-top: 20px; width: 960px; margin: 20px auto 20px; border-top: 1px solid #2a4d5e;}
#footer ul.main li { display: inline; text-transform: uppercase; font-size: 1.1em; margin: 0 10px; color: #999; text-align: center; }
#footer ul.main li a { color: #999; text-decoration: none;}
#footer ul.main li a:hover { color: #fff; }

#footer ul.secondary { border-top: 1px solid #2a4d5e; border-bottom: 1px solid #2a4d5e; margin: 20px auto 20px; padding: 20px 0; width: 960px;}
#footer ul.secondary li { display: inline-block; font-size: .9em; color: #406777; font-size: .9em; margin: 10px 10px 10px 0; border-right: 1px dotted #406777; padding-right: 10px;}
#footer ul.secondary li a { color: #406777; text-decoration: none;}
#footer ul.secondary li a:hover { text-decoration: underline; }
#footer ul.secondary li.last { border-right: none; margin-right: 0; padding-right: 0;}

#footer img { margin-bottom: 10px; }
#footer p { margin: .5em 0; }

h2#bottomhat-logo { background: none; }
a.ngs-bottomhat-link { color: #fff; }
/* @end */

/* @group 04 - HOMEPAGE ELEMENTS */

body.homepage #sidebar .homepage { width: 300px; height: 327px; padding: 20px 18px 20px 19px; background: url(/page/-/images/site/bg-sidebar-homepage.jpg) no-repeat; color: #fff;}
body.homepage #sidebar .homepage h2 { color: #fff; }
body.homepage #sidebar .homepage h2 a { color: #fff; }

body.homepage h2 a { color: #333; text-decoration: none;}
body.homepage h2 a:hover { color: #999; }
body.homepage h2.noButton { background: none; padding: 0; margin: 0;}

body.homepage .main p.intro { font-size: 1.2em; line-height: 1.25em; margin-bottom: 20px;}
#content .main img { border: 1px solid #ccc; }
body.homepage h3 { font-size: 1.2em; font-weight: bold; line-height: 1.4em; color: #454545; margin-top: 5px;}
body.homepage h3 a { color: #454545; text-decoration: none;}
body.homepage h3.video {
}
/* HOMEPAGE FEATURE STYLES */

#content #feature { background: #000; position: relative; width: 653px; height: 367px; z-index: 100; overflow: hidden;}
#content #feature #rotator { width: 653px; height: 367px; }
#content #feature .cycle { position: absolute; width: 653px; height: 367px; top: 0; left: 0;}

#content #feature #rotator .text { position: absolute;  background: #000; opacity: .85; bottom: 15px; right: 20px; left: 20px; height: 65px; padding: 10px 15px; width: 583px;}
#content #feature #rotator .text h3 { font-size: 1.75em; font-weight: normal; color: #fff; margin-bottom: 7px;}
#content #feature #rotator .text h3 a { color: #fff; }
#content #feature #rotator .text h4 { font-size: 1.15em; color: #cadd71; }
#content #feature #rotator .text h4 a { color: #cadd71; text-decoration: none;}

#content #feature #feature-nav { position: absolute; bottom: 30px; right: 40px; z-index: 1000;}
#content #feature ul#feature-nav li { float: left; }
#content #feature ul#feature-nav li a { margin: 0 4px; }
#content #feature ul#feature-nav li a#prev { width: 7px; height: 17px; background: url(/page/-/images/site/btn-feature-previous.png) no-repeat; text-indent: -9999px; overflow: hidden; display: block; float: left;}
#content #feature ul#feature-nav li a#next { width: 7px; height: 17px; background: url(/page/-/images/site/btn-feature-next.png) no-repeat; text-indent: -9999px; overflow: hidden; display: block; float: left;}
#content #feature ul#feature-nav li a.pause { width: 17px; height: 17px; background: url(/page/-/images/site/btn-feature-pause.png) no-repeat; text-indent: -9999px; overflow: hidden; display: block; margin-left: 10px;}
#content #feature ul#feature-nav .numbers { float: left; }
#content #feature ul#feature-nav .numbers a { background: url(/page/-/images/site/btn-feature-number.png) no-repeat; display: inline-block; width: 17px; height: 17px; text-align: center; text-decoration: none; font-size: .9em; padding-top: 2px;  margin: 0 4px; float: left;}
#content #feature ul#feature-nav .numbers a.activeSlide { background: url(/page/-/images/site/btn-feature-number-active.png) no-repeat;  }

body.homepage #video { margin-bottom: 40px; }

body.homepage #blog { border-top: 1px solid #c8d6e3; padding-top: 10px; }
body.homepage #blog h2 { margin: 0; }
body.homepage #blog .entry img { float: left; margin: 0 15px 15px 0;}
body.homepage #blog .entry { padding: 20px 0; border-bottom: 1px solid #c8d6e3;}
body.homepage #blog .entry.hovered { background: #e6e6e6; }
body.homepage #blog .entry.last { border-bottom: none; }
body.homepage #blog .entry p { margin: 0; }
body.homepage #content .entry .text span.dateline { font-size: .85em; font-style: italic;}

#sidebar #quicksignup { background: #0f2e47; height: 128px; padding: 15px 30px; }
#sidebar #quicksignup p, #sidebar #oceans3d p { font-size: 1.15em; line-height: 1.5em; margin-bottom: 10px;}
#sidebar #quicksignup h2 { margin-left: -15px; }
body.homepage #sidebar .homepage h2 { margin-left: -15px; }
#sidebar #quicksignup form input { vertical-align: middle; }
#sidebar #quicksignup form input.text { font-size: 11px; color: #333; padding: 5px; border: 1px solid #333; vertical-align: middle;}
#sidebar #quicksignup form input.email { width: 75px; }
#sidebar #quicksignup form input.zip { width: 55px; }
#sidebar #oceans3d { background: url(/page/-/images/site/bg-ocean3d.jpg) no-repeat; height: 136px; padding: 15px 30px;}

/* @end */

/* @group 05 - SUBPAGE ELEMENTS */

body.interior #body { background: #fff url(/page/-/images/site/bg-interior-content.jpg) no-repeat; }

body.interior #content .main .page { padding-left: 15px; }

/* IMAGE TITLES */

h1.blog-title, h2.blog-title { background: url(/page/-/images/site/title_blog.png) no-repeat; width: 653px; height: 68px; margin: 0; padding: 0; text-indent: -9999px; overflow: hidden;}
h1.blog-title a, h2.blog-title a { display: block; width: 653px; height: 68px;}

h1.about { background: url(/page/-/images/site/title_about.png) no-repeat; width: 653px; height: 68px; margin: 0; padding: 0; text-indent: -9999px; overflow: hidden;}
h1.maps { background: url(/page/-/images/site/title_maps.png) no-repeat; width: 653px; height: 68px; margin: 0; padding: 0; text-indent: -9999px; overflow: hidden;}


/* BLOG STYLES */

body.interior #content .main .entry { padding: 20px 0 10px; border-bottom: 1px solid #c8d6e3;}
body.interior #content .main .entry.hovered { background: #e6e6e6; }
body.interior #content .main .entry.first { padding-top: 0; }
body.interior #content .main .entry img { margin-bottom: 3px;}
body.interior #content .main .entry h3 { font-size: 1.5em; line-height: 1.25em; font-weight: bold; color: #333; margin: 2px 0;}
body.interior #content .main .entry h3 a { color: #333; text-decoration: none;}
body.interior #content .main .entry span.byline { display: block; color: #000; line-height: 1.5em; margin-bottom: 20px;}
body.interior #content .main .entry p.summary { margin-top: 10px; }
body.interior #content .entry span.caption { display: block; text-align: right; font-size: .9em; font-style: italic; color: #a7a7a7; margin-bottom: 15px;}
body.interior #content .entry span.dateline { display: block; color: #000;font-style: italic; line-height: 1.5em;}


#pagination { margin: 10px 0 0; }
#pagination a.old-posts { float: right; font-weight: bold; color: #666; text-decoration: none;}
#pagination a.new-posts { float: left; font-weight: bold; color: #666; text-decoration: none;}
#pagination a:hover { text-decoration: underline; }

/* SUB-NAV STYLES */

body.interior #content .main .right h2 a { color: #333; text-decoration: none;}
body.interior #content .main .right h2 a:hover { color: #666; }
body.interior #content .main ul.subnav { margin: 10px 15px 30px 15px; list-style-type: none; padding: 0;}
ul.subnav li { line-height: 1.25em; margin: .45em 0;}
ul.subnav li a { text-decoration: none; }


/* MEET THE CREW STYLES */

.main .page .crew { margin-right: 20px; }
.main .page .row { padding: 20px 0 10px 0; border-bottom: 1px solid #e6e6e6;}
.main .page .row .left-col { width: 125px; float: left;}
.main .page .row .right-col { width: 435px;float: right; }

.main .page .row .right-col h2 { margin-bottom: 0; }
.main .page .row .right-col h4 { font-style: italic; font-size: 1.1em; color: #777; margin-bottom: 10px;}

body.interior #sidebar #quicksignup { color: #fff; }
body.interior #sidebar #quicksignup h2 { color: #fff; }


/* INTERIOR SIDEBAR STYLES */

body.interior #sidebar #donate { padding: 15px; margin: 20px 0;background: url(/page/-/images/site/bg-interior-sidebar-donate.jpg) no-repeat; height: 138px; color: #fff;}
body.interior #sidebar #donate p { font-size: 1.15em; margin: 0;}
body.interior #sidebar #donate h2 { color: #fff; margin: 0 0 5px 0; }
body.interior #sidebar #donate h2 a { color: #fff; margin-left: 0; text-decoration: none;}
body.interior #sidebar #donate h2 a:hover { color: #a7a7a7; }
body.interior #sidebar #donate.hovered { color: #a7a7a7; }
body.interior #sidebar #donate.hovered h2 a { color: #a7a7a7; }

body.interior #sidebar #oceans3d { background: url(/page/-/images/site/bg-interior-sidebar-oceans3d.jpg) no-repeat; height: 99px; padding: 15px; color: #666;}
body.interior #sidebar #oceans3d.hovered { color: #999; }
body.interior #sidebar #oceans3d h2 a { color: #454545; text-decoration: none; }
body.interior #sidebar #oceans3d.hovered h2 a { color: #999; }
body.interior #sidebar #oceans3d p { font-size: 1em; }

body.interior #sidebar #oceannews, body.interior #sidebar #education { margin: 20px 0 40px; }
body.interior #sidebar #oceannews h2 a, body.interior #sidebar #education h2 a { color: #454545; text-decoration: none;}
body.interior #sidebar #oceannews h2 a:hover, body.interior #sidebar #education h2 a:hover { color: #999; }
body.interior #sidebar #oceannews p, body.interior #sidebar #education p { margin: 0 15px; }

body.interior #sidebar #oceannews ul { margin-left: 15px; }
body.interior #sidebar #oceannews ul li { margin: .5em 0; }
body.interior #sidebar #oceannews ul li a { text-decoration: none ; }
body.interior #sidebar #oceannews ul li a:hover { text-decoration: underline; }
body.interior #sidebar #oceannews p { text-align: right; margin-top: 10px; font-weight: bold;}
body.interior #sidebar #oceannews p a { text-decoration: none; }
body.interior #sidebar #oceannews p a:hover { text-decoration: underline; }

/* MAPS */

span.postTitle { font-size: 1.3em; font-weight: bold; color: #333; display: block; margin-bottom: 0;}
span.postDate { font-size: .9em; font-style: italic; color: #333; display: block; margin-bottom: 5px;}
#expeditiontracker { overflow: hidden; }
#maps.ui-tabs { margin-bottom: 20px;}

.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {height:1%;}
.ui-helper-clearfix {display:block;}
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
.ui-state-disabled { cursor: default !important; }
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-tabs { padding: .2em; zoom: 1; }
#maps #holder2 .placeholder, #maps #holder .placeholder  { width: 575px; height: 360px; }
#maps #holder, #maps #holder2, #maps #holder3 { padding: 15px; border: 1px solid #e6e6e6;}
.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px;}
body.interior #content .main #maps.ui-tabs .ui-tabs-nav { list-style: none; position: relative; margin: 0; padding: 0;}
body.interior #content .main #maps.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; border: 1px solid #e6e6e6; background: #e4e9dd; color: #000; border-bottom: 5px solid #e6e6e6;}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; background: #fff; border-bottom: 5px solid #fff; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-hide { display: none !important; }


/* @end */

/* @group 06 - ONE COL */

#content.onecol { width: 950px; float: none; padding: 20px; background: #fff;}
#content.onecol h1 { font-size: 1.5em; line-height: 1.4em; font-weight: bold; color: #333; background: url(/page/-/images/site/bg-greentitlebox.jpg) no-repeat 0 4px; padding-left: 15px; margin-bottom: 10px;} 

#content.onecol #signup input { border: 1px solid #a7a7a7; padding: 3px 5px; font: 12px Arial, "Helvetica Neue", Helvetica, sans-serif; color: #666; margin: 5px 0 15px;}
#content.onecol #signup select#country { margin: 5px 0 15px; }

#content.onecol #invitationpage input { border: 1px solid #a7a7a7; padding: 3px 5px; font: 12px Arial, "Helvetica Neue", Helvetica, sans-serif; color: #666; margin: 0px 0 15px; }
#content.onecol #invitationpage textarea { border: 1px solid #a7a7a7;  font: 12px Arial, "Helvetica Neue", Helvetica, sans-serif; color: #666; margin: 0px 0 15px; }
#content.onecol #invitationpage input#submit_button { color: #fff;}

/* @end */



/* @group 06 - UTILITY */

#content .no-margin { margin: 0; padding: 0;}
.floatl {float: left; margin: 0 10px 10px 0; padding: 0;}
.floatr {float: right; margin: 0 0 10px 10px;}
.floatl-nomargin { float: left; margin: 0; padding: 0;}
.floatr-nomargin { float: right; margin: 0; padding: 0;}
.fitted { cursor: pointer; }
.whitespace {margin: 0; padding: 0; width: 740px; background: #fff; height: 10px; clear: both;}
.clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;}
.required { color: red; }

em { font-style: italic; }
strong { font-weight: bold; }

.clearfix:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */


/* @end */