/* ---------------------------------------------------------- Everglades Foundation CSS Managed by: Blue State Digital TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,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,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { 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; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ body { font: 75% Arial, Helvetica, sans-serif; color: #231f20; } #content.base { color: #231f20; font-size: 12px; line-height: 16px;} .base h1 { text-transform: uppercase; font-size: 50px; margin-bottom: 15px; color: #6c5735;} .base h2 { text-transform: uppercase; font-size: 24px; margin-top: 15px; margin-bottom: 5px;} .base h3 { font-weight: bold; } .base h4 { } .base p { margin-bottom: 15px; } a { color: #569288; text-decoration: none} a:hover { color: #6c5735; text-decoration: none } blockquote { border-left: 3px solid #b2bb1d; padding-left: 10px; margin: 15px;} .base ul, ol { padding-left: 20px; list-style-position: outside; margin: 15px 0;} .base ul li { list-style-type: disc; } .base ol li { list-style-type: decimal; } .base ul li, .base ol li { line-height: 18px; } .base li ol, .base li ul { margin: 0; } .trade-gothic { text-transform: uppercase; } .clarendon { text-transform: uppercase; } /* 03 =LAYOUT ---------------------------------------------------------- */ html { background: #04b1b0 url(/page/-/images/wrapper/background.png) repeat-x; } body { background: #04b1b0 url(/page/-/images/wrapper/background.png) repeat-x; } #container { width: 960px; margin: 0 auto 15px;} #header { background: url(/page/-/images/wrapper/bg-header.png) no-repeat; height: 185px; position: relative; padding: 25px 30px 30px; z-index: 99;} #header a.logo { background: url(/page/-/images/wrapper/logo.png) no-repeat; text-indent: -9999px; width: 180px; height: 113px; display: block; position: absolute; z-index: 1000; overflow: hidden;} #header h2.tagline { text-align: right; font-size: 47.5px; line-height: 36px; color: #74664a; position: relative; top: 25px; z-index: 500;} ul#navigation { position: relative; text-align: right; top: 40px;} ul#navigation li { display: inline; color: #6c5735; } ul#navigation li a { color: #6c5735; font-weight: bold; text-decoration: none; padding: 0 5px;} ul#navigation li a.donate { color: #00b1b0; } ul#navigation li a:hover { text-decoration: none; } /** SUCKERFISH STYLES **/ .sf-menu { line-height: 1.0; position: relative; z-index: 1500;} .sf-menu ul { position: absolute; top: -9999em; width: 125px; padding: 7px 10px; z-index: 99;} .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { position: relative; } .sf-menu a { display: inline-block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 12px; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 125px; top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 125px; top: 0; } ul#navigation.sf-menu li ul li { float: left; text-align: left; line-height: 16px; padding: 3px 0; border-top: 1px dotted #74664a; position: relative; z-index: 1500; } ul#navigation.sf-menu li ul li.top { border: none; } .sf-menu li ul { background: #fff; } ul#navigation.sf-menu li li a { color: #b2bb1e; font-weight: normal;} ul#navigation.sf-menu li li a:hover { color: #74664a; text-decoration: none;} .sf-shadow ul { background: url('/page/-/js/superfish-1.4.8/images/shadow.png') no-repeat bottom right; } .sf-shadow ul.sf-shadow-off { background: transparent; } /** END OF SUCKERFISH STYLES **/ #body { background: #fff; padding: 20px 25px 20px 20px; position: relative; z-index: 1;} #main { background: url(/page/-/images/wrapper/bg-main.png) repeat-y 619px;} body.full-width #main { background: none; } #content { width: 604px; float: left; padding-right: 17px;} #sidebar { padding-left: 20px; float: left; width: 274px;} #sidebar div.actions { text-align: right; } #sidebar div.actions h3 { display: block; color: #74664a; font-size: 22px;} #sidebar div.actions label { display: none; } #sidebar div.actions input { margin: 10px 0 20px; } #sidebar div.actions input.text { margin: 10px 5px 20px; font-size: 11px; color: #231f20; padding: 3px; width: 175px;} #sidebar div.actions form#quicksignup h3 { display: block; font-size: 22px;} #sidebar #subnav { margin: 15px 0; } #sidebar #subnav h2 { font-size: 28px; color: #6c5735; margin-bottom: 15px;} #sidebar #subnav ul li { font-size: 12px; border-bottom: 1px dotted #a7a7a7; padding: 5px;} #sidebar #subnav ul li a { color: #b2bb1d; text-decoration: none;} #sidebar .sidebar-box.text { text-align: right; margin: 10px 0;} #sidebar .sidebar-box.text h3 { font-size: 28px; color: #6c5735; } #sidebar .sidebar-box.text.photos h3 { margin-bottom: 10px; } .sidebar-box { border-bottom: 3px solid #b2bb1d; } #footer { margin-top: 20px; background: #7b6548; padding: 15px; text-align: center; font-size: 10px; line-height: 14px; color: #fff; text-transform: uppercase;} #footer p a { color: #fff; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ body#home #feature { position: relative; width: 590px; height: 310px; margin-bottom: 10px; overflow: hidden;} body#home #feature #rotator { width: 588px; height: 308px; overflow: hidden; position: relative; z-index: 50;} body#home #feature #rotator img { position: absolute; z-index: 100; } body#home #feature #rotator div.text { position: absolute; background: url(/page/-/images/wrapper/bg-hero-text.png) repeat-x; z-index: 500; color: #6c5735; width: 568px; margin-top: 20px; padding: 0 10px; overflow: hidden; height: 110px;} body#home #feature #rotator div.text h2 { font-size: 45px; } body#home #feature #rotator div.text h3 { font-size: 24px; } body#home #feature #rotator div.text p a { font-weight: bold; color: #6c5735; text-decoration: none; font-size: 11px; display: block; margin-top: 7px;} body#home #feature #pager { position: absolute; bottom: 1px; right: 1px; z-index: 999; background: #fff; color: #6c5735; font-weight: bold; font-size: 11px; padding: 5px; } body#home #feature a#prev { background: url(/page/-/images/wrapper/img-hero-pager-previous.png) no-repeat 50% 0; width: 10px; height: 9px; display: inline-block; text-indent: -9999px; overflow: hidden;} body#home #feature a#next { background: url(/page/-/images/wrapper/img-hero-pager-next.png) no-repeat 50% 0; width: 10px; height: 9px; display: inline-block; text-indent: -9999px; overflow: hidden;} body#home #feature #pager div.controls { display: inline; } body#home #feature #pager div.controls a { color: #6c5735; font-weight: bold; padding: 3px 5px; text-decoration: none;} body#home #feature #pager div.controls a.activeSlide { background: #6c5735; color: #fff;} body#home .col-one { width: 296px; float: left; margin-right: 10px;} body#home .col-two { width: 298px; float: left;} body#home #news { background: #c2d9d9; width: 284px; margin-bottom: 10px;} body#home #news h2 { text-align: center; color: #6c5735; margin: 15px 0;} body#home #news h2 a { color: #6c5735; text-decoration: none;} body#home #news h2 span.trade-gothic { font-size: 28px; } body#home #news h2 span.clarendon { font-size: 14px; } body#home #news div.news-ticker ul li { display: inline; } body#home #news div.entry { margin: 10px 15px 0 15px; padding-bottom: 10px; border-bottom: 1px dotted #fff; height: auto; } body#home #news div.entry h3 { font-weight: bold; font-size: 18px;} body#home #news div.entry h3 a { text-decoration: none; } body#home #news div.entry h3 a:hover { text-decoration: underline; } body#home #news div.entry span.dateline { font-weight: bold; font-size: 11px; color: #777; line-height: 18px; } body#home #news div.entry p { font-size: 13px; line-height: 18px; color: #6c5735;} body#home #news div.entry p a { font-weight: bold; text-decoration: none;} body#home #news h4 { padding: 10px 15px; font-weight: bold; color: #569288; line-height: 16px;} body#home #news h4 a { font-weight: normal; color: #6c5735;} body#home #why-should-i-care { width: 284px; background: #b2bb1d; color: #6c5735;} body#home #why-should-i-care h2 { text-align: center; margin: 15px 0;} body#home #why-should-i-care h2 span.trade-gothic { font-size: 28px; color: #6c5735;} body#home #why-should-i-care h2 span.clarendon { font-size: 14px; color: #fff;} body#home #why-should-i-care ul { font-weight: bold; font-size: 11px; line-height: 14px;margin: 15px 10px;} body#home #why-should-i-care li { padding-left: 50px; margin: 10px 0; } body#home #why-should-i-care li.water-quality { background: url(/page/-/images/wrapper/img-whysave-waterquality.png) no-repeat; height: 44px; line-height: 40px;} body#home #why-should-i-care li.quality-of-life { background: url(/page/-/images/wrapper/img-whysave-qualityoflife.png) no-repeat; height: 32px; padding-top: 5px;} body#home #why-should-i-care li.water-supply { background: url(/page/-/images/wrapper/img-whysave-watersupply.png) no-repeat; height: 36px; padding-top: 8px;} body#home #why-should-i-care li.tourism { background: url(/page/-/images/wrapper/img-whysave-commercialfishing.png) no-repeat; height: 45px; padding-top: 1px;} body#home #why-should-i-care li.endangered-species { background: url(/page/-/images/wrapper/img-whysave-endangered.png) no-repeat; height: 54px; padding-top: 7px;} body#home #why-should-i-care li.economy { background: url(/page/-/images/wrapper/img-why-save-economy.png) no-repeat; height: 40px; padding-top: 7px;} body#home #steps-to-save { background: url(/page/-/images/wrapper/bg-home-9essentialsteps.png) no-repeat; padding: 20px 15px; height: 403px; margin-top: 10px;} body#home #steps-to-save h2 { text-align: center; margin: 15px 0;} body#home #steps-to-save h2 span.trade-gothic { font-size: 28px; color: #6c5735;} body#home #steps-to-save h2 span.clarendon { font-size: 14px; color: #68a19c;} body#home #steps-to-save li { list-style-type: decimal; font-weight: bold; font-size: 11px; color: #6c5735; padding: 9px 10px 9px; border-bottom: 1px dotted #68a19c; list-style-position: inside; line-height: 15px;} body#home #steps-to-save li.no-border { border-bottom: none; } /* 05 =SUBPAGES ---------------------------------------------------------- */ body.full-width #content { border: none; width: 920px; padding: 0;} body.full-width #sidebar { display: none; } body#news.list #content h2 { margin-bottom: 5px; } body#news.list #content h2 a { text-decoration: none; } body#news div.entry { border-bottom: 1px dotted #c2d9d9; } body#news div.entry p a { font-weight: bold; text-decoration: none;} body#news.interior span.dateline { display: block; font-weight: bold; margin-bottom: 10px; } form#cse-search-box input.text { padding: 3px; margin-right: 5px; color: #333;} body.videos #playerContainer { width: 600px; float: left; } body.videos #playerContainer .video-container { width: 560px; height: 338px; overflow: hidden;} body.videos #playerContainer h3 { font-size: 20px; line-height: 22px; margin: 10px 0; width: 560px;} body.videos #playerContainer h4 { font-style: italic; } body.videos #playerContainer p.description { margin-top: 15px; font-size: 13px; width: 560px;} body.videos #playlist { width: 315px; height: 380px;float: left; padding-right: 5px;} body.videos #playlist ul { margin: 0; padding: 0; } body.videos #playlist li { list-style-type: none; line-height: 16px; margin-bottom: 15px; cursor: pointer;} body.videos #playlist li div { float: left; margin-right: 10px; height: 72px; overflow: hidden; border: 3px solid #6c5735; position: relative;} body.videos #playlist li div img { position: relative; top: -13px;} body.videos #playlist li span.title { font-weight: bold; display: block; } body.videos #playlist li span.published { font-size: 12px; font-style: italic; position: relative; top: -10px;} body.videos #playlist-counter { width: 320px; float: left; text-align: center; margin: 5px 0;} body.videos #playlist-counter a { font-weight: bold; } body.videos #playlist-counter span.qp_counter { padding: 0 10px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ body#framework form#contribution input.text, body#framework form#contribution select { margin-bottom: 5px; } body#framework form#contribution label.fieldlabel { text-transform: capitalize; } body#framework form#contribution input.radiobutton { margin: 5px; } body#framework form#contribution input.checkbox { margin: 5px; } /* 07 =UTILITY ---------------------------------------------------------- */ .cufon-loading .trade-gothic, .cufon-loading .clarendon, .cufon-loading #SKIN #control_set h1, .cufon-loading #content.base h1 { visibility: hidden !important; } .stroke { border: 1px solid #6c5735; } .border { border: 5px solid #f3f3f4; } .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;}