/* ---------------------------------------------------------- **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 09 - SUPERFISH 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-family: Arial, Helvetica, sans-serif;} #nav {font-family: "Arial Narrow"} #header h1, .state-list, #home-news-links span a {color: #d6d8c0;} /* light beige */ .state-list span {color: #707161;} /* dark beige */ a, .welcome-source, #home-news-links, .event-day, body.interior h1, .event-date-heading {color: #7d2614;} /* dark red */ #welcome-title {color: #6d0000;} /* very dark red */ #footer p {color: #910e0e;} #nav a, .welcome-message, #home-news-links span, body, .side-header, .side-header a {color: #333;} .entry-date, .event-time-location {color: #666;} #feature-text, #feature-text a, #footer-links-cont a, #district-map a {color: #fff;} #footer-links-cont {font-size: 11px;} body, .news-headline .entry-date {font-size: 12px;} #feature-desc {font-size: 13px;} .event-time-location {font-size: 14px;} .event-month {font-size: 15px;} .news-headline, #district-map {font-size: 16px;} .state-list, #nav, #home-news-links, #home-news-headlines h3, .side-header {font-size: 18px;} body.interior .entry-title {font-size: 19px;} .event-date-heading {font-size: 25px;} #home-news-entries .entry-title, .side-event-title {font-size: 24px;} #welcome-title {font-size: 29px;} #feature-header {font-size: 29px; border-bottom:1px solid #fff; padding:0 0 5px; } .event-day, .int-section-head h2 {font-size: 30px;} body.interior h1 {font-size: 40px;} #header h1 {font-size: 47px;} #header h1, #feature-header, #welcome-title, .welcome-text, .welcome-source, #home-news-links, .entry-title, .entry-date, #home-news-headlines h3, .news-headline, .footer-link-group-head, #district-map, .side-event-title, .event-day, .event-month, .side-header, #nav, body.interior h1, .int-section-head h2, .event-date-heading {font-weight: bold;} #header h1, .state-list, #nav, #welcome-title, .welcome-source, #home-news-links, .entry-title, #home-news-headlines h3, .footer-link-group-head, #district-map-ul .first, .side-header, .side-event-title, .event-month, body.interior h1, .int-section-head h2, .event-date-heading {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, .side-header a, .side-event-title a, .int-section-head h2 a {text-decoration: none;} #feature-desc {line-height: 18px;} .entry-desc {line-height: 24px;} .welcome-text, .welcome-source {line-height: 25px;} #feature-header {line-height: 32px;} .base h1 { font-size:42px; margin:0 0 15px; color:#7d2614; font-family:helvetica, arial, sans-serif; font-weight:bold; } .base h2 { font-size:17px; color:#7d2614; font-family:helvetica, arial, sans-serif; font-weight:bold; margin:0 0 15px; } .base h3 { font-size:12px; color:#7d2614; font-family:helvetica, arial, sans-serif; font-weight:bold; text-transform:uppercase; margin:0 0 5px; } .base h4 { font-size:12px; color:#7d2614; font-family:helvetica, arial, sans-serif; } .base p { margin:0 0 20px; line-height:18px; } .base p.date { font-size:10px; margin:0 0 5px; font-style:italic; } .base p.summary { margin:0 0 5px; } a {color:#7d2614;} a:hover { } blockquote { margin:20px; padding:10px; font-style:italic; } .base ul, ol { margin:0 0 10px 20px; } .base ul { } .base ol { } .base ul li, .base ol li {line-height:18px;} .base ul li {list-style-type:disc;} .base ol li {list-style-type:decimal;} .base li ol li {list-style-type:lower-alpha;} .base li ul { } /* 03 =LAYOUT ---------------------------------------------------------- */ html, body {background: #910e0e;} /* medium red */ #container {width: 964px; margin: 0 auto;} #header {background: url(/page/-/districts/red-template-assets/images/header-bg.png) no-repeat; height: 173px; position: relative;} #header h1 {position: absolute; top: 40px; left: 50px;} .state-list {position: absolute; right: 0; top: 48px;} #nav {position: absolute; height: 60px; background: #d6d9c3 url(/page/-/districts/red-template-assets/images/nav-bg.png) repeat-x; width: 100%; bottom: 0;} /* #nav-ul li {float: left; list-style-type:none;} #nav-ul li a {padding: 19px 38px 19px 0; display: block;} #nav-ul li.first a {padding-left: 27px;} #nav-ul li.last a {padding-right: 0;} */ #content {background: #fff; padding: 12px 0 30px 0;} #main {float: left; width: 630px; padding: 0 0 0 12px;} body.full-width #main {width: 940px;} #sidebar {float: right; width: 302px; margin-right: 12px;} /* sidebar */ .side-content-block {margin: 0 0 20px 0;} #district-map {position: relative; border-bottom: 1px solid #000; margin: 0 0 20px 0; width: 289px; border: 6px solid #d6d9c2;} #district-map-ul {position: absolute; top: 40px; left: 30px;} #district-map-ul li {margin: 0 0 0 0; list-style-type:none;} #district-map-ul a {padding: 6px 25px 6px 8px; width: 245px; display: block;} #district-map-ul a:hover, #district-map-ul .first {background: rgba(145, 14, 14, .7);} #district-map-ul .first {margin: 0 0 8px 0;} #district-map img {display:block;} #district-map-ul li.first {color: #fff; padding: 6px 0 6px 8px;} /* search */ #site-search-form legend {text-indent: -900em;} #search-query {border: 0; background: #ececec; font-size: 12px; padding: 3px;} #search-submit {background: url(/page/-/districts/red-template-assets/images/magnifying-glass.png); border: 0; height: 32px; width: 34px; text-indent: -900em;} /* photos & video */ .side-header {margin: 0 0 10px 0;} #side-photos-video-cont {background: #d6d9c2; padding: 6px;} #side-top-vid {margin: 0 0 7px 0;} #side-bottom-vids {overflow: hidden;} .bottom-vid {float: left; margin: 0 8px 0 0;} .bottom-vid.last {float: left; margin-right: 0;} .side-large-video-entry {display: block; width: 288px; height: 175px; background-repeat: no-repeat; background-position: center center; position: relative;} .side-large-video-entry span {display: block; text-indent: -900em; line-height: 0; font-size: 0; height: 49px; width: 72px; position: absolute; top: 60px; left: 105px; background: url(/page/-/districts/red-template-assets/images/youtube-play-button.png);} .side-small-video-entry {display: block; width: 90px; height: 90px; background-repeat: no-repeat; background-position: center center; position: relative;} .side-small-video-entry span {display: block; text-indent: -900em; line-height: 0; font-size: 0; height: 27px; width: 39px; position: absolute; top: 30px; left: 25px; background: url(/page/-/districts/red-template-assets/images/youtube-small-play-button.png);} /* events */ .side-event {overflow: hidden; margin: 0 0 15px 0;} .side-event .left {background: url(/page/-/districts/red-template-assets/images/calendar-icon.png); height: 53px; width: 52px; position: relative;} .side-event .right {width: 230px;} .event-month {position: absolute; left: 9px;} .event-day {position: absolute; top: 14px; left: 1px; width: 48px; text-align: center;} .event-date-heading {margin: 0 0 14px 0;} /* social */ #side-social-cont a {background-image: url(/page/-/districts/red-template-assets/images/social-buttons.png); width: 39px; height: 39px; display: block; text-indent: -900em; float: left; margin: 0 10px 0 0;} .side-twitter {background-position: -57px 0;} .side-facebook {background-position: -114px 0;} .side-myspace {background-position: -171px 0;} /* footer */ #footer {background: #5a0000; padding: 25px 25px 50px 25px;} #footer p {margin: 0 0 15px 0;} .footer-link-block {float: left; margin: 0 20px 0 0; width: 113px;} .footer-link-block.last {margin-right: 0;} .footer-link-group-head {margin: 0 0 10px 0;} .footer-link-list li {margin: 0 0 5px 0;} /* 04 =HOMEPAGE ---------------------------------------------------------- */ #feature {position: relative; margin: 0 0 20px 0;} #feature-text {position: absolute; background: #910e0e; width: 254px; right: 4px; top: 0; padding: 20px; height: 261px;} #feature-header {margin: 0 0 10px 0;} #feature-desc {margin: 0 0 10px 0;} #welcome-title {margin: 0 0 7px 0;} #welcome-message {background: url(/page/-/districts/red-template-assets/images/beige-gradient-lite.jpg); padding: 0 0 6px 0; margin: 0 0 20px 0;} #welcome-message .left {width: 140px;} #welcome-message .right {width: 470px;} #home-news-links {margin: 0 0 20px 0;} .news-entry {margin: 0 0 20px 0; border-bottom: 1px solid #ccc; padding: 0 0 20px 0; width: 98%;} .news-entry.last, .news-headline.last {border-bottom: none;} .entry-title {margin: 0 0 10px 0;} .entry-date {margin: 0 0 10px 0; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; padding: 5px 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 #999; padding: 0 0 10px 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 solid #999; padding: 0 0 0 7px;} .side-view-all {text-align: right; margin: 10px 0 0 0;} .int-content-block {margin: 0 0 20px 0;} .int-content-block p {margin: 0 0 10px 0;} /* VIDEO & VIDEO */ .video-entry, .photo-entry {margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: 1px solid #ccc;} .video-entry .left {width: 14px;} .video-entry .right {width: 480px;} .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/-/districts/red-template-assets/images/youtube-small-play-button.png); position: absolute; top: 30px; left: 45px;} .photo-entry .left {width: 240px;} .photo-entry .right {width: 375px;} /* EVENTS */ .main .side-event {border-bottom: 1px solid #ccc; margin: 0 0 15px 0; padding: 0 0 15px 0; width: 95%;} .main .side-event.last {border-bottom: none;} .main .side-event .left {background: url(/page/-/districts/red-template-assets/images/calendar-icon.png); height: 53px; width: 52px; position: relative;} .main .side-event .right {width: 530px;} .event-month {position: absolute; left: 9px;} .event-day {position: absolute; top: 14px; left: 1px; width: 48px; text-align: center;} /* 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;} /* 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 -------------------*/ #sidebar form {clear:both;} #sidebar form input { font-family:Georgia; font-size:14px; color:#333; font-style:italic; padding:5px; border:1px solid #ececec; margin:0 0 4px; } #sidebar form input#search-query { font-size:14px; padding:7px 5px 7px 10px; width:246px; } #sidebar form input#quick-submit { border:none; margin:0; padding:0; float:right; } /* 09 =SUPERFISH ---------------------------------------------------------- */ /*** ESSENTIAL STYLES ***/ #nav-ul, #nav-ul * { margin: 0; padding: 0; list-style: none; } #nav-ul { line-height: 1.0; } #nav-ul ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } #nav-ul ul li { width: 100%; } #nav-ul li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } #nav-ul li { float: left; position: relative; } #nav-ul a { display: block; position: relative; } #nav-ul li:hover ul, #nav-ul li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul#nav-ul li:hover li ul, ul#nav-ul li.sfHover li ul { top: -999em; } ul#nav-ul li li:hover ul, ul#nav-ul li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul#nav-ul li li:hover li ul, ul#nav-ul li li.sfHover li ul { top: -999em; } ul#nav-ul li li li:hover ul, ul#nav-ul li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /*** DEMO SKIN ***/ #nav-ul { float: left; margin-bottom: 1em; } #nav-ul a { /*border-left: 1px solid #fff;*/ /*border-top: 1px solid #CFDEFF;*/ padding: 21px 14px 21px 14px!important; text-decoration:none; } /* #nav-ul li {float: left; list-style-type:none;} #nav-ul li a {padding: 19px 38px 19px 0; display: block;} #nav-ul li.first a {padding-left: 27px;} #nav-ul li.last a {padding-right: 0;} */ #nav-ul a, #nav-ul a:visited { /* visited pseudo selector so IE6 applies text colour*/ /*color: #13a;*/ } #nav-ul li { /*background: #BDD2FF;*/ } #nav-ul li li { background: #D6D9C2; font-size: 12px!important; } #nav-ul li li li { background: #9AAEDB; } #nav-ul li:hover, #nav-ul li.sfHover, #nav-ul a:focus, #nav-ul a:hover, #nav-ul a:active { background: #D6D9C2; outline: 0; } #nav-ul li li a {padding: 10px 10px!important;} #nav-ul li li a:hover {background: #333; color: #fff;} #nav-ul ul {margin: 15px 0 0 0;} /*** arrows **/ #nav-ul a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* 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*/ } /* point right for anchors in subs */ #nav-ul ul .sf-sub-indicator { background-position: -10px 0; } #nav-ul ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ #nav-ul ul a:focus > .sf-sub-indicator, #nav-ul ul a:hover > .sf-sub-indicator, #nav-ul ul a:active > .sf-sub-indicator, #nav-ul ul li:hover > a > .sf-sub-indicator, #nav-ul ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*** shadows for all but IE6 ***/ .sf-shadow ul { background: url('../images/shadow.png') no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; }