/* ---------------------------------------------------------- **Surfrider 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: #444; background: #eee url(//www.surfrider.org/images/wrapper/bg-texture.png) top left; } 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: #444; } 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 { background: url( images/wrapper/surfrider-design-bg-2.jpg) top center repeat-x fixed; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .base { font-size: 14px; line-height: 18px; } h1, h2, h3, h4 { color: #555; } h1, .base h1 { font-size: 38px; font-weight: bold; line-height: 40px; margin-bottom: 10px; } h2, .base h2 { font-size: 24px; line-height: 28px; margin-bottom: 5px; } h3, .base h3 { font-size: 18px; line-height: 20px; margin-bottom: 5px;} h4, .base h4 { font-size: 14px; line-height: 18px; } .base p { margin-bottom: 18px; } a { color: #0f97b9; text-decoration: none; } a:hover, .clickable:hover h3 a, .clickable:hover .more { color: #054760/*db5015*/; } blockquote { background: #f5f5f5; margin-bottom: 18px; padding: 10px; } .base ul, .base ol { margin: 0 0 18px 18px; } .base ul li { list-style: disc; } .base ul li li { list-style: circle; } .base ol li { list-style: decimal; } .base ul li, .base ol li { } .base li ol, .base li ul { margin: 0 0 0 18px; } #publications #content table { margin: 0 20px 18px 15px; width: 600px; } #content tr { } th { font-weight: bold; padding: 5px; } #regional-campaigns #content td, #publications #content td { border-top: 1px solid #eee; padding: 5px; } input { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } a.button { background: #db5015; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); color: #fff; text-decoration: none; } a:hover.button, .clickable:hover .button { background: #b04111; } #membership .button { font-size: 14px; line-height: 24px; margin: 0 0 0 6px; padding: 2px 8px 4px; } #home #content a.button , #sidebar .button, .info-pane .button { font-size: 16px; line-height: 24px; padding: 3px 10px 5px; } #home #content a.button { margin: 0 20px; } .submit { background: #777; border: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); color: #fff; cursor: pointer; font-weight: bold; padding: 5px 8px 3px; text-transform: uppercase; } input:hover.submit { background: #444; } /* 03 =LAYOUT ---------------------------------------------------------- */ #container { margin: 0 auto; padding: 10px 0; position: relative; width: 980px; } #header { background: url(//www.surfrider.org/images/wrapper/image-map.png) -226px 0 no-repeat; position: absolute; width: 980px; z-index: 1000; } #header #top-block { float: right; width: 785px; } #blurb { color: #777; float: left; margin: 5px 0 0 0; } #membership { float: right; margin: 0 30px 0 10px; } #masthead { background: #076e95; float: left; margin: 0 0 0 30px; width: 150px; height: 125px; } #masthead a { color: #fff; display: block; overflow: hidden; text-indent: -9999em; height: 125px; width: 150px; } #quick-signup { float: right; margin: 30px 30px 0; } #quick-signup legend { color: #fff; font-size: 16px; padding-bottom: 5px; } #quick-signup input {-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); } #quick-zip, #quick-email { background: #f3f3f3; border: 1px solid #eee; color: #777; padding: 3PX 4px; } #quick-signup .submit { font-size: 11px; } #navigation { clear: both; } ul#topnav { background: #0f97b9 url(//www.surfrider.org/images/wrapper/blue-hatch.gif); -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); float: left; line-height: 1.0; padding: 0 0 0 10px; } ul#topnav li { float: left; margin: 0; padding: 0; position: relative; } ul#topnav li a { /*background: #0f97b9;*/ color: #fff; display: block; float: left; font-size: 14px; font-weight: bold; letter-spacing: .5px; padding: 16px 0; position: relative; text-align: center; text-transform: uppercase; } ul#topnav li:hover a, ul#topnav li a:hover { background: #076e95 url(//www.surfrider.org/images/wrapper/dark-blue-hatch.gif); } ul#topnav li .sub { background: #076e95 url(//www.surfrider.org/images/wrapper/dark-blue-hatch.gif); -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; display: none; float: left; position: absolute; padding: 10px 0 20px; top: 45px; left: 0; z-index: 99999; } ul#topnav li .sub a { text-align: left; } ul#topnav li .row { clear: both; float: left; width: 100%; margin-bottom: 10px; } ul#topnav li .sub ul{ float: left; width: 140px; } ul#topnav .sub ul li { color: #fff; width: 100%; } ul#topnav .sub ul li h2 { } ul#topnav .sub ul li h2 a { } ul#topnav .sub ul li a { background: none; color: #fff; display: block; float: none; font-size: 12px; font-weight: normal; height: auto; letter-spacing: 0; line-height: 16px; padding: 8px 20px; text-decoration: none; text-transform: none; } ul#topnav .sub ul li a:hover { color: #ddd; } /*=CHAPTER DROP DOWN*/ ul#topnav li #chapter-list { left: -359px !important; width: 960px !important; } ul#topnav li #chapter-list h3 { color: #fff; font-size: 12px; font-weight: bold; margin: 0 10px 4px; padding: 3px 10px 10px; text-transform: uppercase; line-height: 1.1em; } ul#topnav li #chapter-list .col h3 { margin: 0 0 4px 0; } ul#topnav li #chapter-list .region-block { float: left; width: 320px; } ul#topnav li #chapter-list .col { float: left; margin: 0 10px; width: 140px; } ul#topnav li #chapter-list .col h4, ul#topnav li #chapter-list .col ul { padding: 0 10px; } ul#topnav li #chapter-list .col h4 { color: #fff; font-size: 12px; font-weight: bold; } ul#topnav li #chapter-list .col ul { margin-bottom: 16px; } ul#topnav li #chapter-list .col li { margin: 0 0 8px 0; } ul#topnav li #chapter-list .col li a { padding: 0; } #donate-link a, #topnav #donate-link a:hover { -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } #donate-link a { background: #076e95 url(//www.surfrider.org/images/wrapper/dark-blue-hatch.gif) !important; width: 106px; } #donate-link a:hover { background: #054760 !important; } #mission-link { width: 99px; } #campaigns-link { width: 133px; } #programs-link { width: 127px; } #chapters-link { width: 121px; } #currents-link { width: 123px; } #store-link { width: 92px; } #take-action-link { width: 139px; } #main { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); margin: 0 10px; width: 960px; } .interior #main { margin: 30px 10px 0; position: relative; z-index: 1; } .two-col #main { background: #f9f7f6 url(//www.surfrider.org/images/wrapper/main-bg.gif) 0 0 repeat-y; } #graphic { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid #ddd; height: 150px; overflow: hidden; } #graphic img { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #content { padding: 20px 0; } #page-title { color: #555; font-size: 42px; font-weight: bold; line-height: 42px; padding: 0 20px; } /*.breadcrumb { padding: 30px 20px 10px; }*/ /*.breadcrumb { color: #ccc; padding: 0 20px 10px; }*/ .breadcrumb{margin-left:10px;} .breadcrumb:after{clear:both; content:''; display:table;} .breadcrumb a { min-height:1.5em; color: #555; background: #ccc; float: left; line-height: 1.5; font-size: 12px; padding: .5em 1em .5em .5em; position: relative; margin-left: 1.5em; -webkit-box-shadow: inset 0 1px rgba(0,0,0,.25), inset 0 -1px rgba(0,0,0,.25), inset 0 2px rgba(255,255,255,.6), inset 0 -2px rgba(255,255,255,.6); box-shadow: inset 0 1px rgba(0,0,0,.25), inset 0 -1px rgba(0,0,0,.25), inset 0 2px rgba(255,255,255,.6), inset 0 -2px rgba(255,255,255,.6); } .breadcrumb a:after { content: ''; display: block; width: 1.76776695297em; height: 1.76776695297em; background: #ccc; position: absolute; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; top: 0; right: 0; -webkit-transform: translatex(1.76776695297em) rotate(45deg); -moz-transform: translatex(1.76776695297em) rotate(45deg); -o-transform: translatex(1.76776695297em) rotate(45deg); -ms-transform: translatex(1.76776695297em) rotate(45deg); transform: translatex(1.76776695297em) rotate(45deg); z-index: -1; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.7); border-radius: 0 .25em 0 0; } .breadcrumb a:before { content: ''; position: absolute; display: block; background: #ccc; width: 2.5em; height: 2.5em; left: -1em; top: 0; z-index: -2; -webkit-transform: translatex(-1em); -moz-transform: translatex(-1em); -o-transform: translatex(-1em); -ms-transform: translatex(-1em); transform: translatex(-1em); -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.6); } .breadcrumb a:first-child:before { border-radius: .35em; left:0; } .breadcrumb a:hover,.breadcrumb a:hover:after,.breadcrumb a:hover:before { background: #9ddaf2; color: #00648b; text-shadow: 0 0 10px #42c9ff; } .full-width #content { background: #fff; z-index:-10; position:relative;} .two-col #content { float: left; width: 640px; } #loader{ background: #222 url(//www.surfrider.org/images/wrapper/loading.gif) center center no-repeat; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: none; height: 60px; position: absolute; text-indent: -9999em; width: 60px; z-index: 100; } #campaign #loader { left: 770px; top: 250px; } .two-col #content .entry, .full-width #content .entry { padding: 20px 20px 10px; } .two-col #content .entry { } .full-width #content .entry { /*float: left; width: 600px;*/ } .single-entry { padding: 10px 20px; } /*=ENTRIES*/ .date, .base .date { color: #999; font-size: 11px; margin: 0; } #blog-entry .date { margin-bottom: 18px; line-height: 1.3em;} #blog-entry #sidebar .date { margin-bottom: 0; } .thumb { float: left; border: 2px solid #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); } .entry .thumb { margin: 0 10px 10px 0; /*max-width: 80px;*/} #blog #content .entry .thumb { width: 100px; } #program-blog .thumb { width: 100px; } #content .entry-body { float: right; width: 480px; } #blog #content .entry-body h2 { font-size: 18px; line-height: 18px; } #home #content .entry-body, #sidebar .entry-body { float: right; width: 160px; } #chapter-entry #content .entry-body, #music #content .entry-body, #page #content .entry-body, #people #content .entry-body, #programs #content .entry-body, #publications #content .entry-body { width: 440px; } .pagination { padding: 20px; } .date, .entry-footer, .entry-tools, .topics { color: #646464; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .topics, .entry-footer { padding-bottom: 5px;} .entry-footer a, .entry-tools a, .topics a { color: #646464; font-size: 10px; text-decoration: none;} .entry-footer a, .topics a { text-decoration: underline; } .entry-footer a:hover, .entry-tools a:hover, .topics a:hover { color: #444; text-decoration: none; } .entry-footer a.addthis_button_compact .at300bs { background: url(//www.surfrider.org/images/wrapper/image-map.png) -12px -112px no-repeat; display: block; float: left; margin: 0 3px 0 0; overflow: hidden; width: 11px; height: 16px; } .entry-footer a.comments { border-right: 1px solid #ddd; float: left; margin: 0 4px 0 0; padding: 0 6px 0 0; } .entry-footer a.comments .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) 0 -112px no-repeat; display: block; float: left; margin: 0 3px 0 0; overflow: hidden; width: 11px; height: 16px; } .base .topics, .base .summary, .base .entry-footer { margin: 0; } .share-bar { line-height: 26px; } .entry-tools a.comments .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) -88px 0px no-repeat; display: block; float: left; margin: 0 5px 0 0; overflow: hidden; width: 22px; height: 23px; } .entry-tools a:hover.comments .icon { background-position: -88px -23px; } a.email-share .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) -132px 0px no-repeat; display: block; float: left; margin: 0 5px 0 0; overflow: hidden; width: 22px; height: 23px; } a:hover.email-share .icon { background-position: -132px -23px; } #blog-entry a.addthis_button_compact .at300bs, #program-entry a.addthis_button_compact .at300bs, #utilities a.addthis_button_compact .at300bs { background: url(//www.surfrider.org/images/wrapper/image-map.png) -132px 0px no-repeat; display: block; float: left; margin: 0 5px 0 0; overflow: hidden; width: 22px; height: 23px; } #blog-entry a:hover.addthis_button_compact .at300bs, #program-entry a:hover.addthis_button_compact .at300bs, #utilities a:hover.addthis_button_compact .at300bs { background-position: -132px -23px; } .more .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) 0px -90px no-repeat; /*float: right;*/ display: inline-block; margin: 0 0 0 .3em; overflow: hidden; width: 11px; height: 11px; } a:hover.more .icon, .clickable:hover .more .icon { background-position: 0px -101px; } a.more { font-weight: bold; } .expand .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) -11px -90px no-repeat; /*float: right;*/ display: inline-block; margin: 0 0 0 .3em; overflow: hidden; width: 11px; height: 11px; } a:hover.expand .icon { background-position: -11px -101px; } /*=SIDEBAR*/ #sidebar { background: #f9f7f6; float: right; padding: 10px 0 40px; width: 320px; } #sidebar h2 { font-size: 24px; line-height: 1em; margin-bottom: 10px; } #sidebar h2 a { color: #666666; } #sidebar h3 { font-size: 14px; font-weight: bold; line-height: 16px; margin-bottom: 0px; } #sidebar .module { border-bottom: 1px solid #ddd; padding: 10px 20px 20px; } #sidebar .more { /*float: right;*/ padding-top: 5px; display: block;} #sidebar .entry { clear: both; padding: 5px 0 10px; } #sidebar .topics, #sidebar .entry-footer { display: none; } #sidebar .thumb { float: left; margin: 0 10px 0 0; } #sidebar #take-action { padding: 15px; } #take-action h2 { margin-left: 5px; } #take-action .entry { background: #fff; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); margin: 0 0 18px 0; padding: 5px 5px 2px; } #take-action .first { margin-bottom: 9px; } #take-action .thumb { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #take-action .overlap { margin-bottom: -15px; } #sidebar #take-action .entry { padding: 3px 0 3px 3px; margin-bottom: 25px; } #sidebar #take-action .entry img { border: 0; } #sidebar #take-action .entry .entry-body { width: 175px; float: left; } #sidebar #take-action .overlap a { margin-right: 10px; font-size: 13px; } #sidebar #take-action .overlap { float: right; } #sidebar #take-action h3 { margin: 3px 0; } #sidebar #take-action p { font-size: 12px; } #twitter-feed { padding: 10px 0 20px 0; } #twitter-feed h2 { padding: 0 20px; } #twitter-feed .more-section { margin: 0 20px; } /*=FOOTER*/ #bottom-nav { background: #eeeceb url(//www.surfrider.org/images/wrapper/bottom-nav-bg.gif); border-top: 1px solid #ddd; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; clear: both; color: #333; line-height: 18px; padding: 20px 0 30px; } #bottom-nav .col { border-right: 1px solid #ddd; float: left; width: 159px; } #bottom-nav h2 { color: #6f6f6f; font-size: 16px; font-weight: bold; line-height: 1em; margin-bottom: .6em; padding: 0 20px; } #bottom-nav ul { padding: 0 20px; } #bottom-nav a { color: #777; } #bottom-nav a:hover { color: #222; } #bottom-nav .connect { line-height: 26px; } #bottom-nav .connect .icon { display: block; overflow: hidden; float: left; margin: 0 5px 0 0; width: 22px; height: 22px; } #bottom-nav .facebook-bt a .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) 0px 0px no-repeat; } #bottom-nav .facebook-bt a:hover .icon { background-position: 0px -23px; } #bottom-nav .twitter-bt .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) -22px 0px no-repeat; } #bottom-nav .twitter-bt a:hover .icon { background-position: -22px -23px; } #bottom-nav .rss-bt .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) -44px 0px no-repeat; } #bottom-nav .rss-bt a:hover .icon { background-position: -44px -23px; } #bottom-nav .youtube-bt .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) -66px 0px no-repeat; } #bottom-nav .youtube-bt a:hover .icon { background-position: -66px -23px; } #search { float: right; width: 320px; } #bottom-nav #search p { color: #ccc; padding: 0 20px; } #search form { padding: 5px 20px; } #quick-term { background: #fff; border: 1px solid #d3d3d3; color: #777; padding: 4px; } #quick-search-bt { font-size: 11px; } #footer { color: #999; font-size: 10px; padding: 20px 160px 40px; } #footer .logo { background: url(//www.surfrider.org/images/wrapper/image-map.png) -154px -163px no-repeat; display: block; float: left; margin: 0 20px 0 0; text-indent: -9999em; width: 59px; height: 42px; } #footer p { margin-top: 7px; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #hero { /*background: #111;*/ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); color: #fff; height: 540px; margin: 30px 10px; overflow: hidden; position: relative; } #prev-slide, #next-slide { display: block; position: absolute; overflow: hidden; text-indent: -9999em; top: 250px; width: 36px; height: 81px; z-index: 220; } a#prev-slide { background: url(//www.surfrider.org/images/wrapper/image-map.png) -190px 0 no-repeat; left: 20px; } a:hover#prev-slide { background-position: -190px -81px; } a#next-slide { background: url(//www.surfrider.org/images/wrapper/image-map.png) -154px 0 no-repeat; right: 20px; } a:hover#next-slide { background-position: -154px -81px; } #hero .slide { position: relative; width: 960px; height: 540px; } #hero .slide img { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position: absolute; z-index: 1; } #hero .slide .entry { background: url(//www.surfrider.org/images/wrapper/slide-bg.png); -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; position: absolute; bottom: 0; padding: 5px 75px 30px; width: 810px; z-index: 3; } #hero h2 { color: #fff; font-size: 48px; line-height: 0px; margin-bottom: 3px; padding-top: 10px; text-shadow: 1px 1px 3px #000; } #hero .entry-body { float: left; margin: 5px 0 10px; width: 500px; } #hero .more { margin: 2px 0 0 30px; text-align: center; width: 270px; float: left; } #hero .button { font-size: 32px; line-height: 30px; padding: 1px 20px 8px; margin-left: 25px; } #hero .photo-credit { clear: both; font-size: 12px; line-height: 6px; margin: .5em 0 0 0; font-style: italic; } #home #content { background: #fff; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } #home #content .col { padding: 0 0 36px 0; position: relative; } #home #latest-news { float: left; width: 320px !important; } #home #content .entry { padding: 10px 20px; } #home #content h2 { font-size: 32px; line-height: 1em; padding: 0 20px; margin-bottom: 10px;} #home #content h2 a { color: #555; } #home #content h3 { font-size: 16px; font-weight: bold; margin: 0; } #home #content .more-section { bottom: 0; font-weight: bold; position: absolute; } #home #blog-posts p { margin-bottom: 0; } #home #blog-posts, #home #tweets { border-left: 1px solid #eee; float: left; width: 319px !important; } .tweet { padding: 10px 20px 10px; } .tweet img { float: left; } .tweet .status { } /* 05 =SUBPAGES ---------------------------------------------------------- */ /*=BLOG*/ .month-header { padding: 0 20px; } #blog-nav { float: left; color: #555; font-size: 12px; line-height: 18px; padding: 10px 0; width: 160px; } #blog-nav h2, #blog-nav ul, #blog-nav p { padding: 0 20px; } #blog-nav h2 { font-weight: bold; } #blog-nav ul { margin: 0; } #blog-nav li { list-style: none; margin: 0; padding: 0; } #blog-nav .more { font-weight: bold; margin-bottom: 16px; } #blog-entry #content { padding: 0; } .full-width .entry-col { border-left: 1px solid #ddd; float: right; width: 799px; } #blog-entry #content #resources { float: left; width: 160px; } #blog-entry #content #resources .col { padding: 20px 20px 10px; } #blog-entry #content #resources h3 { color: #555; font-size: 14px; font-weight: bold; } #blog-entry #content #resources li { padding: 2px 0; } #blog-entry #content .entry { } #blog-entry #content .entry img { max-width: 600px; } #blog-entry #content .entry-tools { background: #e9e9e9; clear: both; font-size: 12px; line-height: 26px; margin: 0 1px 0 0; padding: 5px 20px 2px; } #blog-entry .entry-tools a { float: left; margin: 0 20px 0 0; } #sidebar #resources { font-size: 12px; padding-bottom: 20px; } #sidebar #resources h2 { color: #555; font-size: 24px; font-weight: bold; } #sidebar #resources h3 { color: #555; font-size: 14px; font-weight: bold; margin-bottom: 10px;} #sidebar #resources .col { float: left; margin: 0 10px 0 0; width: 130px; } #sidebar #resources .col li, .archive-list li { padding: 2px 0; display: block;} /*=CAMPAIGN*/ #campaign .blurb { float: left; font-size: 14px; line-height: 18px; padding: 10px 20px; width: 600px; } #campaign-dropdown { float: right; padding: 10px 20px; width: 280px; } #campaign-dropdown legend { font-size: 14px; font-weight: bold; } #campaign-dropdown select { width: 280px; } .ui-tabs { margin: 10px 0 0 0; /*position: relative;*/ padding: 0; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ .ui-tabs .ui-tabs-nav { display:inline-block; margin: 0; padding: 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; /*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; } .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-panel { display: block; border-width: 0; padding: 0; background: none; } .ui-tabs .ui-tabs-hide { display: none !important; } .ui-tabs .ui-tabs-nav { background: url(//www.surfrider.org/images/wrapper/border-ddd.gif) left bottom repeat-x; padding: 0 10px; width: 940px; } #program-entry .ui-tabs .ui-tabs-nav { width: 620px; } .ui-state-default { background: #eeeceb url(//www.surfrider.org/images/wrapper/border-ddd.gif) left bottom repeat-x; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: 14px; } .ui-tabs-selected { background: #fff; font-weight: bold; } .ui-tabs-selected a { color: #555; } #victory-count { font-size: 14px; padding: 0.8em 1em 0; } #campaign #tabs { position: relative; } #campaign .ui-state-default { font-size: 18px; } #campaign .map { background: url(//www.surfrider.org/images/wrapper/info-pane-arrow.png) 615px 20px no-repeat; border: 1px solid #eeeceb; height: 480px; margin: 10px; overflow: hidden; position: relative; } #campaign .map .info-pane { background: #f9f7f6; height: 520px; overflow: auto; padding: 10px 10px 10px 20px; position: absolute; right: 0; width: 280px; z-index: 10;} #campaign .map .info-pane .stats { margin: 0 0 3px 0; } #campaign .map .info-pane .total {margin: 0 0 18px 0;} #campaign .map .info-pane .more { margin: 18px 0; } #campaign .map .canvas { position: absolute; left: 0; z-index: 1; } .region-overlay { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; padding: 5px 10px; } .other-regions { position: absolute; bottom: 10px; left: 0; } .other-regions h2 { margin: 0 0 9px 10px; } .other-regions li, #us-regions li { background: #0f97b9; float: left; width: 120px; margin: 0 0 0 10px; } .other-regions li:hover, #us-regions li:hover { background: #054760 } .other-regions a, #us-regions a { color: #fff; } #campaign .region-list { float: right; padding: 20px 0; width: 800px; } #campaign .region-list .col { float: left; width: 160px; } #campaign .region-list a { color: #333; } #region-list-header { color: #555; float: left; font-size: 24px; margin: 0 10px; padding: 20px 10px; width: 120px; } .region-list li { float: left; } .region-list .col h3 { background: #eeeceb; font-size: 12px; font-weight: bold; margin: 0 10px; padding: 3px 10px; } .region-list .col ul { margin: 5px 20px; } .region-list .col li { float: none; margin: 0 0 8px 0; } #regional-campaigns table { margin: 0 0 18px -5px; width: 920px; } /*=CHAPTERS*/ #chapter-index #preface { margin: 0 0 18px 0; padding: 0 20px; width: 600px; } #chapter-index #map { border-top: 1px solid #eeeceb; border-bottom: 1px solid #eeeceb; height : 480px; margin: 0 0 20px 0; width: 960px; } #chapter-index #content h3 { background: #eeeceb; font-size: 12px; font-weight: bold; margin: 0 10px 4px; padding: 3px 10px; } #chapter-index #content .col h3 { margin: 0 0 4px 0; } #chapter-index #content .region-block { float: left; width: 320px; } #chapter-index #content .col { float: left; margin: 0 10px; width: 140px; } #chapter-index #content .col h4, #chapter-index #content .col ul { padding: 0 10px; } #chapter-index #content .col h4 { font-size: 12px; font-weight: bold; } #chapter-index #content .col ul { margin-bottom: 16px; } #chapter-index #content .col li { margin: 0 0 8px 0; } /*=BLUE WATER TASK FORCE*/ #bwtf .nav { background: #eeeceb; margin: 10px 0 0; padding: 0 10px; } #bwtf .nav li { float: left; font-size: 14px; padding: 8px 10px; } #bwtf .nav a.active { color: #555; } #bwtf #map { border: 1px solid #EEECEB; height: 520px; margin: 7px 10px 30px; overflow: hidden; position: relative; } #bwtf #map #info-pane {font-size: 12px; height: 520px; line-height: 16px; overflow-y: auto; position: absolute; right: 0; width: 310px; background: gradient(#f9f7f6 30%, rgba(255,255,255,0)), gradient(rgba(255,255,255,0), #f9f7f6 70%) 0 100%, gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background: -webkit-linear-gradient(#f9f7f6 30%, rgba(255,255,255,0)), -webkit-linear-gradient(rgba(255,255,255,0), #f9f7f6 70%) 0 100%, -webkit-radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), -webkit-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background-color: #f9f7f6; background-repeat: no-repeat; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; } #bwtf #map #info-pane h2 { } #bwtf #map #info-pane ul { margin-left: 0; } #bwtf #map #info-pane .li_cont1 { margin-right: 10px; } #bwtf #map #info-pane li { list-style: none; margin: 10px 0 10px 0; } #bwtf #map #info-pane li ul li { list-style: none; margin: 0 0 3px 15px; } #bwtf #map #info-pane li ul span { margin: 10px 0 10px 0; display:block; font-weight: bold; text-decoration: underline; } #bwtf #blog-posts { border-left: 1px solid #EEE; float: left; width: 319px !important; } #bwtf #blog-posts h2 { font-size: 32px; line-height: 1em; padding: 0px 20px; } #bwtf #blog-posts .entry { padding: 10px 20px; } #bwtf #blog-posts .thumb { width: 100px; } #bwtf #blog-posts .entry .entry-body { width: 165px; } #bwtf #blog-posts a.button { margin: 0px 20px; padding: 5px 10px; } #bwtf #preface { float: left; padding: 0 20px; width: 600px; } #lab-list { padding: 10px 20px; } #bwtf .misc { margin: 20px 0; width: 640px; } #map_canvas { width: 630px; height : 520px; float:left; } #beachList { margin: 0; overflow-y: auto; padding: 10px 20px; } #beachList ul { margin: 0; } #beachList li { color: #0f97b9; cursor:pointer; list-style-type: none; margin-bottom: 18px; } #beachList li:hover { color: #054760/*db5015*/; } /* red, green, yellow boxes */ div.bacteria_status { border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; float:left; margin-right: 5px; height:14px; width:14px; } div.bacteria_status.low { background-color: #42ac4a; } div.bacteria_status.medium { background-color: #fff34d; } div.bacteria_status.high { background-color: #d22129; } div.bacteria_status.other { background-color: #0f97b9;} .key .note {color:#888; font-size:11px;} #utilities { float: right; padding: 10px 20px; width: 200px; } #utilities h2 { font-size: 14px; font-weight: bold; line-height: 18px; } #utilities h3 { font-size: 12px; font-weight: bold; line-height: 18px; } #utilities ul, #utilities button { margin: 0 0 18px 0; padding: 0 33px 0 0;} #utilities h2, #utilities li { margin-bottom: 3px; } #utilities .button { background: #db5015; border: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); color: #fff; display: block; font-size: 18px; padding: 5px 10px; text-decoration: none; } #utilities button:hover.button, #utilities a:hover.button { background: #b04111; } #utilities a.addthis_button_compact { background: #42AC4A; border: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); color: #fff; display: block; font-size: 18px; padding: 5px 10px; text-decoration: none; float:inherit;} #utilities a:hover.addthis_button_compact { background: #444; } #table-data { float: left; padding: 10px 0 10px 20px; width: 700px; } #samplesTable { border-bottom: 1px solid #ddd; margin: 0 0 9px; width: 700px; } #samplesTable td { padding: 3px; } #samplesTable_filter, #samplesTable_length { display: none; } #sharebox { display: inline; } #sharebox h1 {display: inline; } #sharebox a.addthis_button_compact { background: #939393; border: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); color: #fff; display: block; font-size: 18px; padding: 5px 10px; text-decoration: none; } #sharebox a:hover.addthis_button_compact { background: #444; } /*=PARTNERS*/ #partners #content .entry-body { width: 385px; } /*=PEOPLE*/ .position-title { font-size: 14px; font-style: italic; } /*=PROGRAMS*/ #programs #content .thumb { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .program-logo { float: left; height: 60px; margin: 0 10px 0 20px; } .tag-line { padding: 0 20px; } #bwtf #page-title, #program-entry #page-title { padding: 15px 20px 0; } #program-entry #content { padding: 20px 0 0 0; } #program-entry #tabs { background: #F9F7F6 url(//www.surfrider.org/images/wrapper/main-bg.gif) repeat-y 0px 0px; margin: 0; padding: 0 0 20px 0; } .program-sponsor { float: right; margin: 0 20px; } #program-entry .ui-tabs .ui-tabs-nav { background-color: #fff; width: 940px; } #program-content { float: left; width: 640px; } #program-entry .edit-this { padding: 20px; } #program-entry #content .entry-tools { background: #f9f7f6; clear: both; font-size: 12px; line-height: 26px; margin: 0 1px 0 0; padding: 10px 20px; } #program-entry .entry-tools a { float: left; margin: 0 20px 0 0; } /*=PUBLICATIONS*/ .base .downloads { list-style: none; margin: 0; } .base .downloads li { list-style: none; } #latest-issue { margin: 0 0 20px 0; } #publications #content .section-title { margin-right: 20px; margin-left: 20px; } /*=PSAS*/ #request-psa { float: right; padding: 20px 20px 0; text-align: right; width: 280px; } .tiles h2 { padding: 0 20px; } .tile { float: left; padding: 10px 20px; width: 152px; } .tile h3 { font-size: 16px; } #psa-entry .entry img { max-width: 920px; } /*=SUPPORT*/ #support #content #preface { border-bottom: 1px solid #eee; padding: 0 20px 18px; } #support #content .entry { border-bottom: 1px solid #eee; border-right: 1px solid #eee; float: left; padding: 20px; width: 279px; } #support #content .entry h2 { font-size: 16px; line-height: 20px; } #support #content .entry .entry-body { width: 165px !important; } /*=CORPORATE PAGES*/ #cm_codebox { text-align: center; } /*=CONFERENCE PAGES */ #conferences .quickinfo-line { padding: 0 20px; } #conferences .registration-box { float: right; margin: 0 20px; } #conferences #registration-box .button { font-size: 34px; line-height: 34px; margin: 8px 0 0 0px; padding: 2px 8px 2px; } #conferences p.conf-registration { color:#3ADF00; font-size: 34px; } /*=SEARCH RESULTS*/ #cse { padding: 15px; } .cse .gsc-control-cse, .gsc-control-cse { padding: 0 !important; width: 100% !important; } .cse form.gsc-search-box, form.gsc-search-box { margin-bottom: 6px; padding: 8px 5px 2px 5px; } table.gsc-search-box td.gsc-input { padding-right: 2px; } .cse input.gsc-input, input.gsc-input { border: 1px solid #ddd !important; font-size: 16px; padding: 3px; width: 99%; } .cse input.gsc-search-button, input.gsc-search-button { background-color: #777 !important; border: none !important; color: #fff; font-family: inherit; font-size: 15px; font-weight: bold; padding: 4px 8px 5px; text-shadow: none !important; } .cse input:hover.gsc-search-button, input:hover.gsc-search-button { background: #0F97B9; } .gsc-resultsHeader { border-bottom: 1px solid #E9E9E9; clear: both; margin-bottom: 4px; width: 100%; } .cse .gsc-results, .gsc-results { margin-top: 1em; width: 100%; } .cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result { border: none !important; margin-bottom: 1em; padding: 5px !important; } .gsc-webResult.gsc-result:hover { background-color: #EEE; } .gs-result .gs-title * { color: #0F97B9 !important; text-decoration: none !important;} .gs-result .gs-title a:hover, .gs-result .gs-title a:hover * { color: #DB5015 !important; } .gsc-result .gs-title { height: 1em !important; } .cse .gs-webResult.gs-result .gs-snippet, .gs-webResult.gs-result .gs-snippet { color: #444 !important; } .gs-webResult.gs-result .gs-visibleUrl { color: #333 !important; } .cse .gsc-cursor-box, .gsc-cursor-box { border-color: #ddd !important; } .gsc-results .gsc-cursor-box { margin-bottom: 10px; } .cse .gsc-cursor-box, .gsc-cursor-box { border-top: 1px dotted #333; padding: 0.5em 0px 0px 0.5em; text-align: left; } .gsc-results .gsc-cursor { display: inline; } .gsc-results .gsc-cursor-box .gsc-cursor-page { color: #0F97B9 !important; cursor: pointer; display: inline; margin-right: 8px; text-decoration: none !important; } .cse .gsc-results .gsc-cursor-page.gsc-cursor-current-page, .gsc-results .gsc-cursor-page.gsc-cursor-current-page { background-color: #0F97B9 !important; color: #fff !important; padding: 0px 5px; text-shadow: none !important; } .gsc-cursor-page:hover { color: #DB5015; } /*=DISQUS COMMENTS*/ .full-width #disqus_thread { width: 600px; } #disqus_thread, .dsq-brlink { padding: 0 20px; } .base #disqus_thread #dsq-content h3 { } /*.addthis_default_style .at300m, .addthis_default_style .at300bs { float: none !important; }*/ /*.addthis_default_style .at300bs { display: none; }*/ /*=COLORBOX*/ /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:hidden;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* Example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:url(//www.surfrider.org/images/wrapper/modal-overlay.png) repeat 0 0;} #colorbox{} #cboxContent { background:#fff; } #cboxLoadedContent { margin-bottom: 28px; } #cboxTitle { position:absolute; bottom: 4px; left: 0; text-align: center; width:100%; color: #444;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(//www.surfrider.org/images/wrapper/image-map.png) no-repeat -44px -45px; width:22px; height:23px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-44px -68px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(//www.surfrider.org/images/wrapper/image-map.png) no-repeat -66px -45px; width:22px; height:23px; text-indent:-9999px;} #cboxNext.hover{background-position:-66px -68px;} #cboxLoadingOverlay{background:url(//www.surfrider.org/images/wrapper/colorbox/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(//www.surfrider.org/images/wrapper/loading.gif) no-repeat center center;} #cboxClose{position:absolute; bottom:0; right: 5px; background:url(//www.surfrider.org/images/wrapper/image-map.png) no-repeat -22px -45px; width:22px; height:23px; text-indent:-9999px;} #cboxClose.hover{background-position:-22px -68px;} /* The following fixes png-transparency for IE6. It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition Since this method does not support CSS background-positioning, it is incompatible with CSS sprites. Colorbox preloads navigation hover classes to account for this. !! Important Note: AlphaImageLoader src paths are relative to the HTML document, while regular CSS background images are relative to the CSS document. */ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');} /* 06 =FRAMEWORK ---------------------------------------------------------- */ /* SKIN OVERRIDES Last Update: JULY 18, 2010 NOTE: These definitions assume that framework elements have been wrapped in a div with the id "framework". For the YUI styles to work the body id should be "bsd" */ /*=TYPOGRAPHY ---------------------------------------------------------- */ #framework #SKIN h1, /*If you change the font-soze for h1 or it's top margin or padding properties be sure to change the top margin property for "#SKIN #account_actions" such that the base line for the elements within line up with h1 in control_set div*/ #framework #SKIN .basic .main #eventdetail .title, /*Event Title*/ #framework #profiledetail #sectionheader, #framework #stdheader #title /*Page title on Outreach pages*/ { font-size: 24px; font-weight: bold; line-height: 30px; margin-bottom: 6px; } /*if using cufon or typekit for headers be sure to target the following header ids/classes #titletext - header for Outeach pages .headertitle — header for Comunity pages */ #framework #contribution .contribheader, /*Section headers on Contribute form*/ #framework #SKIN h2, #framework #sectionheader, #framework #SKIN .widget_header, #framework #SKIN .widget_title, #framework #community .communitypostinlist .title, /*Blog post title on community web page*/ #framework #community .header, /*Community page headers */ #framework #community .communitypostfull .title, /*Community title for full blog post*/ #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework a#host-button, #framework #loginform .logintitle, #framework #signupform .signuptitle, #framework #outreach_content #loginform .logintitle, #framework #outreach_content #signupform .signuptitle, #framework #manageform .managetitle, #framework #forgotpw .header { font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; } #framework #SKIN h3, #framework #SKIN .basic .main .typedescheader, #framework #community .postlist table.head .text, /*Table heading on Community Dashboard page*/ #framework #community .subheader, /*Subheader on the Community Blog Entry Preview page*/ #framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/ #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead { font-size: 14px; font-weight: bold; line-height: 20px; margin-bottom: 6px; } #framework #SKIN h4, #framework #SKIN h5 { font-size: 12px; font-weight: bold; line-height: 18px; } /*HEADERS WITH BOTTOM BORDERS*/ #framework #contribution .contribheader, /*Section headers on Contribute form*/ #framework #sectionheader, #framework .sectionheader, #framework #SKIN .header, #framework #SKIN .basic .main .typedescheader, #framework #community .header /*Community page headers */ #framework #community .communitypostfull .title, /*Community title for full blog post*/ #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework #stdheader, /*Header for Outreach pages*/ #framework #community .profileteaser .title, /* Profile teaser title on Blog home page*/ #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead, #framework #manageform .managetitle, #framework #forgotpw .header { border-bottom: 1px solid #ddd; padding-bottom: 3px; } /*WIDGET HEADERS*/ #framework #SKIN .widget_header { background: #eee; border-bottom: 1px solid #ddd; margin-bottom: 6px; padding: 5px 10px; position: relative; } /*SUB-HEADERS*/ #framework #SKIN .widget_subheader, /*Widget Subheader on the dashboard*/ #framework #community .subheader /*Subheader on the Community Blog Entry Preview page*/ { background: #F2F7F7; border-bottom: 1px solid #ddd; padding: 5px 10px; } /*=FORM ELEMENTS ---------------------------------------------------------- */ #framework .checkbox, #framework .radiobutton, #framework.label, #framework .text { margin: 0 .5em 0 0; } /*=BUTTONS ---------------------------------------------------------- */ /*INPUT BUTTONS*/ #framework input[type=button], #framework input[type=submit], #framework .submit, #framework #invitationpage #submit_button, #framework #date-filter, #framework .loginbutton input, #framework .signupbutton input, #framework #community input[type=submit], #framework .utils_search button { background: #777; border: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); color: #fff; cursor: pointer; font-weight: bold; padding: 5px 8px 3px; text-transform: uppercase; } /*Targets most Buttons*/ #framework input#processbutton { background: #db5015; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.2); box-shadow: 0px 0px 4px rgba(0,0,0,0.2); color: #fff; text-decoration: none; } #framework input:hover#processbutton { background: #b04111; } /*INPUT HOVER STATES Note this will only work for modern browsers*/ #framework input[type=button]:hover, #framework input[type=submit]:hover, #framework input:hover.submit, #framework #invitationpage input:hover#submit_button, #framework button:hover#date-filter, #framework .loginbutton input:hover, #framework .signupbutton input:hover, #framework #community input[type=submit]:hover, #framework .utils_search button:hover { background: #444; } /*RSVP and DETAILS BUTTONS*/ #framework #event_results .event_footer .links { float: left; } #framework #event_results .event_footer .links .detail_button, #framework #event_results .event_footer .links .rsvp_button { float: right; } #framework #event_results .event_footer .links .detail_button a, #framework #event_results .event_footer .links .rsvp_button a { display: block; margin-left: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 2px 10px; } #framework #event_results .event_footer .links .detail_button a { background: #eee; border: 1px solid #ccc; padding: 2px 10px 1px; } #framework #event_results .event_footer .links .rsvp_button a { background: #555; color: #fff; padding: 3px 10px 2px; } #framework #event_results .event_footer .links .detail_button a:hover, #framework #event_results .event_footer .links .rsvp_button a:hover { background: #33; border-color: #333; color: #eee; } /*Hover state for RSVP and Details buttons*/ /*CONTACT IMPORTER BUTTOM FOR SHARE AND INVITE FORMS*/ #framework #contact_importer_button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; } /*You can change the background color to match your other input button styles*/ /*SEARCH BUTTON*/ #framework .search_form button { } /*=TEXT INPUT FIELDS AND TEXTAREAS ---------------------------------------------------------- */ #framework input.text, #framework input[type=text], #framework textarea { border: 1px solid #ddd; color: #777; padding: 4px; } /*Use this definition to target most of the text input fields*/ /*=TABS NOTE If the background color for your page is not white you will have to update the bottom border color for the active tabs for Framework, Events and Friends i.e. #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } ---------------------------------------------------------- */ /*FRAMEWORK TABS*/ #framework #SKIN #blue_hat { background: none; border-bottom: 1px solid #ddd; height: 43px; } #framework #SKIN #blue_hat ul { display: inline; float: right; height: auto; margin: 0 5px; padding: 18px 0 0 0; } #framework #SKIN #blue_hat li { background: #eee; border: 1px solid #ddd; border-top-left-radius: 3px; display: inline; float: right; padding: 5px 10px 4px; text-decoration: none; } #framework #SKIN #blue_hat li a { color: #888; text-decoration: none; } #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #blue_hat .blue_hat_active a { color: #555; } #framework #SKIN #blue_hat li a:hover { background: none; color: #555; } /*EVENT TABS*/ #framework ul#event_order { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 10px 0; top: 0; width: 100%; } #framework ul#event_order li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; } #framework ul#event_order li a { color: #888; } #framework ul#event_order a:hover { color: #555; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active a { color: #555; } /*WIDGET TABS*/ /*Note that the active tab background color should be the same as the .widget_header background color under the WIDGET HEADERS category above*/ #framework #SKIN .widget_tabs { margin: 0; padding: 0; } #framework #SKIN .widget_tabs li { border-top-left-radius: 3px; float: left; list-style: none; padding: 5px 10px 4px 10px; margin: 0 5px 0 0; list-style-type: none; } #framework #SKIN .widget_tabs li.active_tab { background: #eee; font-weight: bold; } #framework #SKIN .widget_tabs li.inactive_tab { background: #ddd; } /*FRIENDS TABS*/ #framework #SKIN #friends_tabs { border-bottom: 1px solid #ddd; margin: 18px 0 6px 0; } #framework #SKIN #friends_tabs ul { margin: 0; padding: 5px 0 0 0; list-style: none; } #framework #SKIN #friends_tabs li { border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline; float: left; margin: 0 0 -1px 5px; list-style-type: none; padding: 5px 10px 4px; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } #framework #SKIN #friends_tabs ul li.active_tab a { color: #555; font-weight: bold; } #framework #SKIN #friends_tabs ul li.inactive_tab { background: #eee; border: 1px solid #ddd; } /*=SPEAKOUT TABS*/ #framework #speakout #tabs { margin-top: 18px; } #framework #speakout #nav-tabs { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 18px 0; top: 0; width: 100%; } #framework #speakout #nav-tabs li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 5px -1px 0; padding: 5px 10px 4px; text-decoration: none; } #framework #speakout #nav-tabs li.tab-on { background: none; border-bottom: 1px solid #fff; color: #555; font-weight: bold; } /*YUI POP OVER This controls the style of the pop over opened after clicking the contact importer button As noted above, in order for this to work the body id should be "bsd" ---------------------------------------------------------- */ #bsd .yui-panel { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #bsd .yui-panel-container.shadow .underlay { display: none; } #bsd .yui-panel .container-close { right: 10px; } /*This targets the close button in the popover. You can replace the default image with one of your choosing. Image dimensions should be 12px square*/ #bsd .yui-panel .hd { background: #eee; color: #333; border: none; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; padding: 10px; } #bsd .yui-panel .bd { font-size: 12px; line-height: 18px; padding: 6px; } #bsd #contact_importer_wrapper { margin: 0; } #bsd #contact_importer_wrapper #contact_importer_error { margin: 18px 0 0 0; } #bsd #contact_importer_dialog .button-group button { background: #eee; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; padding: 3px 10px; } /*Contact Listings*/ #bsd #contact_importer_wrapper #results_table_header { background: #eee; } #bsd #contact_importer_wrapper #results_table_outer { border: 1px solid #ddd; } /*=LAYOUT ---------------------------------------------------------- */ /*SOCIAL NET WIDGET COLUMNS*/ #framework #SKIN #widget_group_1 { float: left; width: 49%; } /*Left column*/ #framework #SKIN #widget_group_2 { float: right; width: 49%; } /*Right column*/ /*SPEAKOUT*/ #framework #speakout table { clear: left; margin: 0 20px 18px 0; } #framework #speakout td { padding: 5px 0; } #framework #speakout form #zip { display: block; margin-bottom: 18px; } #framework #speakout form .landing-button, #framework #speakout form .landing-button-over { display: block; } #framework #speakout #tip-tabs { display: none; } /*=PLEASE DO NOT DELETE OR MODIFY ANY OF THE STYLES BELOW ---------------------------------------------------------- */ #framework #SKIN #widget_directory_search_groups_by_keyword { float: none !important; } /* 07 =UTILITY ---------------------------------------------------------- */ .edit-this { line-height: 26px; } #blog-entry .edit-this { margin: 18px 0 0 0; } .edit-this a .icon { background: url(//www.surfrider.org/images/wrapper/image-map.png) 0px -45px no-repeat; display: block; float: left; margin: 0 5px 0 0; overflow: hidden; width: 22px; height: 22px; } .edit-this a:hover .icon { background-position: 0px -68px; } .clickable { cursor: pointer; } .cufon-loading a { visibility: hidden !important; } /*Prevents flash of unstyled content*/ .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;