/* ---------------------------------------------------------- **CWA** CSS Managed by: Blue State Digital Last Update: May 2009 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 ---------------------------------------------------------- */ /*=TYPOGRAPHY*/ body {font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; color: #535353; } .base h1 { font-size:24px; margin: 0 0 18px; color:#0a45a2; font-weight:bold; text-transform:uppercase; } .base h2 { font-size:18px; color:#0a45a2; font-weight: bold; margin:0 0 9px; } .base h3 { font-size:14px; color:#0a45a2; font-weight: bold; margin:0 0 3px; } .base h4 { font-size:12px; color:#0a45a2; font-weight: bold; } .base p { margin: 0 0 18px; line-height: 20px;} .base p.date { /*font-size: 10px;*/ margin:0 0 5px; font-style:italic; } .base p.entry-date { margin-bottom: 9px; } .base p.summary { margin:0 0 5px; } a { color: #0a45a2; } a:hover { color: #4b6dc5; text-deocration: none; } blockquote { margin:20px; padding:10px; font-style:italic; } .base ul, ol { margin:0 0 10px 20px; } .base ul { } .base #action ul { margin: 0; } .base ol { } .base ul li, .base ol li {line-height:18px;} .base ul li {list-style-type:disc;} .base #action ul li { list-style: none; } .base ol li {list-style-type:decimal;} .base li ol li {list-style-type:lower-alpha;} .base li ul { } .state-list, #home-news-links span a {color: #0a45a2;} /* light beige */ .state-list span {color: #707161;} /* dark beige */ .welcome-source, #home-news-links, body.interior h1 {color: #0a45a2;} /* blue */ #home-news-links .welcome-message, #home-news-links span, #sidebar h3, #sidebar h3 a {color: #122b5e;} #sidebar h3 { background: #feea96; margin-bottom: 10px; padding: 8px 20px; } #nav a #feature-text, #feature-text a, #footer-links-cont a, #district-map a {color: #fff;} .entry-date, .event-time-location { color: #666666;} .event-month {font-size: 15px;} .event-date-heading {font-size: 22px!important;} .event-day { font-size: 24px; } #feature-desc {font-size: 13px;} .news-headline, #district-map {font-size: 16px;} .state-list, #nav, #home-news-links, #home-news-headlines h3, #sidebar h3 {font-size: 18px;} body.interior .entry-title {font-size: 19px;} #home-news-entries .entry-title, .side-event-title {font-size: 17px;} #welcome-title {font-size: 29px;} #feature-header {font-size: 29px; border-bottom:1px solid #fff; padding:0 0 5px; } .int-section-head h2 {font-size: 30px;!important} body.interior h1 {font-size: 40px!important;} #feature-header, #welcome-title, .welcome-text, .welcome-source, #home-news-links, .entry-title, .entry-date, #home-news-headlines h3, .news-headline, #footer h3, #district-map, .side-event-title, #sidebar h3, #nav, body.interior h1, .int-section-head h2 {font-weight: bold;} .state-list, #nav, #welcome-title, .welcome-source, #home-news-links, #footer h3, #district-map-ul .first, #sidebar h3, #sidebar #upcoming-events .month, .event-month, body.interior h1, .int-section-head h2 { text-transform: uppercase; } #nav a, #feature-header a, #home-news-links a, .entry-title a, .news-headline a , .footer-link-block a, #district-map a, #sidebar h3 a, .side-event-title a, .int-section-head h2 a, h2#home-feature-header a, #video-multimedia h2.f-replace a {text-decoration: none;} #feature-desc {line-height: 18px;} .welcome-text, .welcome-source {line-height: 25px;} #feature-header {line-height: 32px;} /* 03 =LAYOUT ---------------------------------------------------------- */ html, body {background: #000507 url("/page/-/nabet/images/bg.jpg") 50% 0 repeat-x;} #container {width: 960px; margin: 0 auto;} #header { background: #FFF; height: 174px; position: relative;} #header #masthead a { background: url("/page/-/nabet/images/nabet-logo.gif") no-repeat; height: 123px; width: 560px; text-indent: -9999em; position: relative; right: 14px; float: left; } .state-list {position: absolute; right: 0; top: 48px;} /*=SEARCH*/ #site-search-form { float: right; padding: 35px 20px 0 0; } #site-search-form legend {text-indent: -900em;} #search-query { background: #f5f6f6; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #444; font-size: 12px; padding: 4px;} #search-submit { background: url(/page/-/nabet/images/search.gif); cursor: pointer; border: 0; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; height: 24px; width: 75px; text-indent: -900em;} /*=NAV*/ #nav-wrap {position: absolute; height: 39px; background: #d6d9c3; width: 100%; bottom: 0; background: url(/page/-/nabet/images/nav-trap.gif) 0 100% no-repeat; } #navigation { background: url(/page/-/nabet/images/nav-bar.png) no-repeat; bottom: 12px; position: relative; height: 39px; } #navigation a { display: block; text-decoration: none; } #navigation li {float: left; list-style-type:none; } /*SUPERFISH*/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { float: left; line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 12em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li.sfHover a { background: #3658a3; color: #fff; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { background: #3658a3; font-size: 12px; line-height: 16px; top: 40px; /* match top ul list item height */ text-transform: none; z-index: 99; } .sf-menu li.sfHover ul a { background: none; border-bottom: 1px solid #0c3066; color: #fff; padding: 8px 10px; font-weight: normal; } .sf-menu li.sfHover ul a:hover { background: #202d51; color: #f1d13a; } ul.sf-menu li:hover li ul { background: #000; top: -999em; } ul.sf-menu li li ul, ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { display: none; top: -9999em; } ul.sf-menu li li:hover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } #nav-home { background: url(/page/-/nabet/images/navigation.gif) 0 0; height: 40px; width: 120px; text-indent: -9999em; } .sfHover #nav-home, a#nav-home:hover { background-position: 0 -40px; } #nav-about { background: url(/page/-/nabet/images/navigation.gif) -120px 0; height: 40px; width: 128px; text-indent: -9999em; } .sfHover #nav-about, a#nav-about:hover { background-position: -120px -40px; } #nav-news { background: url(/page/-/nabet/images/navigation.gif) -248px 0; height: 40px; width: 121px; text-indent: -9999em; } .sfHover #nav-news, a#nav-news:hover { background-position: -248px -40px; } #nav-training { background: url(/page/-/nabet/images/navigation.gif) -369px 0; height: 40px; width: 152px; text-indent: -9999em; } .sfHover #nav-training, a#nav-training:hover { background-position: -369px -40px; } #nav-join-us { background: url(/page/-/nabet/images/navigation.gif) -521px 0; height: 40px; width: 139px; text-indent: -9999em; } .sfHover #nav-join-us, a#nav-join-us:hover { background-position: -521px -40px; } #nav-for-members { background: url(/page/-/nabet/images/navigation.gif) -660px 0; height: 40px; width: 156px; text-indent: -9999em; } .sfHover #nav-for-members, a#nav-for-members:hover { background-position: -660px -40px; } #nav-for-locals { background: url(/page/-/nabet/images/navigation.gif) -816px 0; height: 40px; width: 144px; text-indent: -9999em; } .sfHover #nav-for-locals, a#nav-for-locals:hover { background-position: -816px -40px; } #content { background: #fff url("/page/-/nabet/images/side-bg.gif") 100% 0 repeat-y; border-bottom: 5px solid #0f366e; } #main {float: left; width: 620px; padding: 30px 0 30px 20px;} body.full-width #content { background-image: none; } body.full-width #main {width: 920px;} /*=SIDEBAR*/ #sidebar { float: right; padding: 20px 0; width: 300px; background: #fff5cb; } #sidebar .module { padding-bottom: 15px; } #sidebar form { clear: both; margin: 0 20px; } #sidebar form input { border:1px solid #d4cba9; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size:12px; color:#777; padding: 4px; margin:0 0 4px; } #sidebar #quick-email { width: 250px; } #sidebar #quick-zip { width: 159px; } #sidebar form input#quick-submit { border:none; margin:0; padding:0; float:right; } #action, #browse-directory { border-top: 1px solid #f2dc8e; padding: 15px 20px; } #action ul { list-style: none; } #action li { margin: 0 0 5px 0; } .button a, #action a { background: #0d3167 url("/page/-/nabet/images/button-bg.gif") 0 0 repeat-x; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #fff; display: block; font-size: 21px; padding: 9px 0 7px; text-decoration: none; text-align: center; text-transform: uppercase; } .button a:hover, #action a:hover { background: #0d3167; } #sidebar #upcoming-events { overflow: hidden; margin: 0 20px 15px 20px;} #sidebar #upcoming-events .left {background: url(/page/-/districts/red-template-assets/images/calendar-icon.png); height: 53px; width: 52px; position: relative;} #sidebar #upcoming-events .right {width: 230px;} #sidebar #upcoming-events .date { background: #202d51; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #FFF; float: left; text-align: center; height: 40px; width: 40px; } #sidebar #upcoming-events .day { font-size: 20px; } #sidebar #upcoming-events .month { font-size: 15px; } #sidebar #upcoming-events .summary { float: right; width: 210px; } #sidebar #upcoming-events h4 a { text-decoration: none; } #featured-links-ul li {list-style-type: none; margin: 0 0 5px 0;} #connect ul li {list-style-type: none;} /*=social*/ #connect li { float: left; margin: 0px 10px 0 0; } #connect a { background: url(/page/-/nabet/images/nabet-soc.png) no-repeat; width: 39px; height: 41px; display: block; text-indent: -900em; } #connect .side-twitter {background-position: -52px 0;} #connect .side-facebook {background-position: -105px 0;} #connect .side-myspace {background-position: -158px 0;} #connect .side-youtube {background-position: -158px 0;} #connect .side-flickr {background-position: -212px 0;} /*=FOOTER*/ #footer { background: #0f376e; color: #fff; padding: 10px 20px 50px 20px; } #footer p { margin-bottom: 18px; } #footer #copyright-etc { float: left; width: 600px; } #footer #contact-info { float: right; text-align: right; width: 260px; } #footer div a { color: #fff;} #footer div a:hover { color: #6c95c4;} .footer-link-block {float: left; margin: 0 20px 0 0; width: 113px;} .footer-link-block.last {margin-right: 0;} #footer h3 {margin: 0 0 9px 0;} #footer li {margin: 0 0 6px 0;} /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home-feature-outer { background: #FFEEAA; position: relative; height: 323px; } #home-feature-container { } #home-feature-img { position: absolute; left: 0; width: 660px; } #home-feature-txt { position: absolute; left: 680px; top: 30px; width: 260px; } #home-feature-txt h2 { font-size: 24px; line-height: 30px; text-transform: uppercase; } #home-feature-nav { position: absolute; left: 660px; width: 300px; top: 290px; z-index: 10; text-align: center; } #home-feature-nav a { border: 1px solid #DDB01F; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; display: inline-block; text-indent: -99999em; margin: 0 5px 0 0; width: 10px; height: 10px; } #home-feature-nav a.activeSlide { background: #DDB01F; } #feature-trap { height: 12px; line-height: 1px; background: url(/page/-/nabet/images/feature-trap.png) no-repeat; } #feature {position: relative; margin: 0 0 20px 0;} #feature-text {position: absolute; background: #910e0e; width: 254px; right: 15px; top: 15px; padding: 20px;} #feature-header {margin: 0 0 10px 0;} #feature-desc {margin: 0 0 10px 0;} #welcome-title {margin: 0 0 7px 0;} #welcome-message { font-size: 14px; margin: 0 0 20px 0;} #welcome-message .left {width: 140px;} #welcome-message .right {width: 470px;} #home-news-links {margin: 0 0 20px 0;} /*=VIDEO*/ #video-multimedia h2, #home-news-links h2 {background: #0a45a2; padding: 3px 5px; color: #fff!important;} #video-multimedia h2 a {background: none!important; padding: 0!important;} #video-multimedia h2 a {display: inline!important;} #video-multimedia h2 a, #home-news-links h2 a { background: #0a45a2; color: #fff; text-transform: uppercase; padding: 2px 5px; } #video-multimedia #latest { float: left; width: 300px; } #video-multimedia #media-posts { float: right; width: 300px; } #video-multimedia #media-posts .thumb { border: 1px solid #ddd; float: left; line-height: 0; padding: 3px; } #video-multimedia #media-posts .summary { float: right; margin-top: 5px; width: 192px; } .lrg-video-overlay { background: url(/page/-/nabet/images/play-bt-large.png) center center no-repeat; display: block; text-indent: -9999em; width: 290px; height: 217px; position: absolute; } .small-video-overlay { background: url(/page/-/nabet/images/play-bt-small.png) center 18px no-repeat; display: block; text-indent: -9999em; width: 92px; min-height: 48px; position: absolute; height: 90px;} .lrg-photo-overlay {position: absolute; display: block; height: 193px; width: 290px; text-indent: -900em;} .small-photo-overlay {position: absolute; display: block; width: 92px; height: 62px; text-indent: -900em;} #media-posts .entry {margin: 0 0 10px 0;} .news-entry { border-bottom: 1px solid #ddd; margin: 0 0 18px 0; padding: 0 0 1px 0; } .news-entry.last, .news-headline.last {border-bottom: none;} .entry-title {margin: 0 0 10px 0;} .entry-desc {margin: 0 0 10px 0; width: 90%;} .news-headline {border-bottom: 1px solid #ccc; padding: 0 0 10px 0;} .news-headline .entry-date {border: none;} #home-news-headlines h3 {margin: 0 0 10px 0; } .news-headline {margin: 0 0 10px 0; width: 98%;} /* 05 =SUBPAGES ---------------------------------------------------------- */ body.interior h1 {margin: 0 0 15px 0;} .int-section-head {overflow: hidden; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 8px 0; margin: 0 0 15px 0;} .int-section-head .left {width: 400px;} .int-section-head .right {width: 220px; overflow: hidden; padding: 8px 0 0 0;} .int-section-head .all-link {float: left; text-align: right!important; width: 185px; padding: 3px 5px 0 0;} .int-section-head .rss-btn {float: right; border-left: 1px dotted #ddd; padding: 0 0 0 7px;} .side-view-all { margin: 10px 0 0 0;} .int-content-block {margin: 0 0 20px 0;} .int-content-block p {margin: 0 0 10px 0;} #int-content-block p.section-nav { margin-top: 40px; } h2.int-feature-head {font-size: 22px; font-weight: bold; line-height: 26px;} h2.int-feature-head a {text-decoration: none;} .int-feature-summary {line-height: 18px;} .int-feature {background: #0e3369; overflow: hidden; border: 8px solid #0a254c; width: 96%; height: 215px;} .int-feature .left {width: 245px; color: #fff; padding: 10px;} .int-feature .right {width: 320px;} .int-feature-head {margin: 0 0 8px 0;} .int-feature, .int-feature a {color: #fff!important;} /* VIDEO & VIDEO */ .video-entry, .photo-entry {margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: 1px solid #ccc;} #video .entry { margin: 0 0 18px 0; } #video .thumb { border: 1px solid #ddd; float: left; line-height: 0; padding: 3px; } #video .summary { float: right; width: 470px; } .video-img-link {display: block; position: relative;} .video-img-link span {display: block; text-indent: -900em; font-size: 0; line-height: 0; width: 39px; height: 27px; background: url(/page/-/nabet/images/play-bt-small.png); position: absolute; top: 30px; left: 45px;} .photo-entry .left {width: 240px;} .photo-entry .right {width: 365px;} /*=EVENTS */ #events #main .event {border-bottom: 1px solid #ddd; margin: 0 0 15px 0; padding: 0 0 1px 0; } #events #main .event.last {border-bottom: none;} #events #main .event-date { background: #0a45a2; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #FFF; float: left; text-align: center; height: 50px; width: 50px; } #events #main .event .right {width: 560px;} .event-month {} .event-day {} /* GET LOCAL */ .local-entry {margin: 0 0 10px 0; border-bottom: 1px solid #ccc; padding: 0 0 10px 5px;} .local-entry.last {border-bottom: none;} .local-entry h3 {margin: 0 0 10px 0;} .local-details {margin: 0 0 0 10px;} .local-entry .address p {margin: 0 0 0 0;} .local-entry .phone {color: #333;} .local-entry .website {margin: 0;} .local-entry .address {margin: 0 0 5px 0;} .local-entry p {margin: 0 0 5px 0;} .local-filert-cont {margin: 0 0 0 0; border-bottom: 1px solid #ccc; padding: 0 0 15px 0;} #local-filter-form legend {text-indent: -900em; font-size: 0; line-height: 0;} .filter-block {float: left;} #filter-district {width: 110px;} #filter-state {width: 150px;} #filter-sector {width: 180px;} #filter-submit {float: left; margin: -2px 0 0 5px;} /* COMPANIES */ .company-entry {width: 97%; margin: 0 0 30px 0;} .company-header {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 6px 0; margin: 0 0 10px 0;} .company-header h2 {margin: 0;} .company-header .right {padding: 5px 5px 0 0;} /* SEARCH */ .search-result {margin: 0 0 30px 10px; width: 98%;} .search-result h3 {font-size: 15px; text-transform: none;} /* 06 =FRAMEWORK ---------------------------------------------------------- */ /* 07 =UTILITY ---------------------------------------------------------- */ .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;} .left {float: left;} .right {float: right;} /* 08 JL STYLES -------------------*/