/* ---------------------------------------------------------- **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 url(http://cwa.bluestatedigital.com/page/-/cwapublic/images/header/bg.png) bottom; } 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 { background: #faf9f9; url(http://cwa.bluestatedigital.com/page/-/cwapublic/images/header/bg.png) bottom; font-size: 13px; line-height: 18px; } .base h1 { font-size:42px; margin:0 0 15px; color:#7d2614; font-family:helvetica, arial, sans-serif; font-weight:bold; } .base h2 { font-size:24px; color:#7d2614; font-family:helvetica, arial, sans-serif; font-weight:bold; margin:0 0 15px; } .base h3 { font-size:18px; color:#7d2614; font-family:helvetica, arial, sans-serif; font-weight:bold; margin:0 0 5px; } .base h4 { font-size:14px; color:#7d2614; font-family:helvetica, arial, sans-serif; } .base p { color: #535353; margin: 0 0 18px; } .base p.date-byline { color: #888; font-family:helvetica, arial, sans-serif; font-size: 12px; margin:0 0 5px; } .base p.summary { margin:0 0 5px; } a { color: #660000; text-decoration: none; } a:hover { text-decoration: underline; } blockquote { margin: 20px 0;padding-left:30px; font-size: 0.8em;font-style:italic; color: #666; border-left: 1px solid #660000; } .base ul, .base ol { margin: 0 0 18px 20px; font-size: 13px; color: #535353; background: #e4e4e4; list-style-position: inside; font-family: arial, helvetica, sans-serif; } .base ul { } .base ol { } .base ul li, .base ol li { } .base ul li {list-style-type:disc;} .base ol li {list-style-type:decimal;} .base li ol li {list-style-type:lower-alpha;} .base ul ul, .base ol ol { padding: 0; } .cufon, .f-replace { text-transform: uppercase; } .button { color: white; border: 0; background-color: #7f2125; padding: 3px 5px; text-transform: uppercase; } #action a { background-color: #600; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: white; display: block; font-size: 24px; line-height: 24px; padding: 5px; margin: 5px 0; text-align: center; } #action a:hover {text-decoration:none;} /* 03 =LAYOUT ---------------------------------------------------------- */ #container { width: 960px; margin: auto; } #header { background: url(/page/-/cwapublic/images/head.jpg) no-repeat; padding-top: 10px; position:relative; } #header h1 { background-color: #600; width: 345px; color: white; padding: 10px 0 10px 87px; font-size: 34px; margin: 10px 0 15px; line-height: 0.8; background: #600 url(/page/-/cwapublic/images/crest.png) 15px 13px no-repeat; } #header h1 .name { color: #c70000; } #header a#header-img { position:absolute; top:0px; height:123px; width:960px; text-indent:-999em; outline:none; } #nav { border-bottom: 3px solid #7f2125; } #nav .first-order li { float: left; } #nav .first-order li li { float: none; } /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* 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 { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.3em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /*** DEMO SKIN ***/ .sf-menu { float: left; } .sf-menu a { border-left: 1px solid #fff; border-top: 1px solid #CFDEFF; padding: .75em 1em; text-decoration:none; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #13a; } .sf-menu li li li { background: #9AAEDB; } /*** arrows **/ .sf-menu 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 */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu 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; } .sf-shadow ul.sf-shadow-off { background: transparent; } /*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/ .sf-navbar { background: #BDD2FF; height: 2.5em; padding-bottom: 2.5em; position: relative; } .sf-navbar li { background: #AABDE6; position: static; } .sf-navbar a { border-top: none; } .sf-navbar li ul { width: 44em; /*IE6 soils itself without this*/ } .sf-navbar li li { background: #BDD2FF; position: relative; font-size: 14px; } .sf-navbar li li ul { width: 13em; } .sf-navbar li li li { width: 100%; } .sf-navbar ul li { width: auto; float: left; } .sf-navbar a, .sf-navbar a:visited { border: none; } .sf-navbar li.current { background: #BDD2FF; } .sf-navbar li:hover, .sf-navbar li.sfHover, .sf-navbar li li.current, .sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active { background: #BDD2FF; } .sf-navbar ul li:hover, .sf-navbar ul li.sfHover, ul.sf-navbar ul li:hover li, ul.sf-navbar ul li.sfHover li, .sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active { background: #D1DFFF; } ul.sf-navbar li li li:hover, ul.sf-navbar li li li.sfHover, .sf-navbar li li.current li.current, .sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar ul li li a:active { background: #E6EEFF; } ul.sf-navbar .current ul, ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ } ul.sf-navbar .current ul ul { top: -999em; } .sf-navbar li li.current > a { font-weight: bold; } /*** remove shadow on first submenu ***/ .sf-navbar > li > ul { background: transparent; padding: 0; } #nav { background: url(http://cwa.bluestatedigital.com/page/-/cwapublic/images/header/nav-bg.png) repeat-x; height: 40px; border-bottom: 4px solid #7e2024;} #nav ul li { background: transparent; border: 0; } #nav ul li a { color: #404040; text-transform: uppercase; letter-spacing: 0.15em; font-size: 17px; padding: 10px 20px 10px; border: 0; } #nav ul li a:hover { color: #ad0000; } #nav ul li ul { background: #fff; box-shadow: 0px 0px 2px #c8c8c8; -webkit-box-shadow: 0px 0px 2px #c8c8c8; -moz-box-shadow: 0px 0px 2px #c8c8c8; border-bottom: 2px solid #ad0000;} #nav ul li ul li a { border: 0; font-size: 1em; } #nav .search { background: #e4e4e4; display: block; float: right; width: 302px; } #nav .search form { padding: 7px 15px 8px; } #search-field { border: 1px solid #ddd; padding: 3px 2px; width: 195px; } #nav button { color: white; border: 0; background-color: #7f2125; padding: 3px 5px; text-transform: uppercase; } #main { float: left; width: 636px; padding: 15px; } #content { background: #fff url(/page/-/cwapublic/images/main-border.gif) 658px 0 repeat-y; } .section-header h2 { float: left; } .section-header p { background: url(/page/-/cwa-union/images/small-rss.png) left center no-repeat; float: right; font-family: arial, helvetica, sans-serif; padding: 3px 0 5px 24px; } #sidebar { float: left; padding: 15px 0; width: 294px; } #sidebar .flag { background-color: #e3e3e3; display: block; color: #404040; font-size: 19px; margin: 0 15px 0 0; padding: 4px 15px; } #sidebar .flag a {font-size:19px;} #sidebar #quick-sign-up { padding: 15px; } #sidebar input { background-color: #f5f6f6; font-family: Arial; font-size: 12px; color: #6a6a6a; padding: 4px 3px; border: 1px inset #bdbebe; margin: 5px 0; } #sidebar .button { display: inline-block; position: relative; top: 3px; } #sidebar #quick-zip { width: 110px; float: left; margin-right: 10px; } #sidebar #action { padding: 0 15px 15px; } #events { padding: 15px; font-family: Helvetica, Arial, sans-serif; } #events li { margin:0 0 10px; } #events .date { color: #878787; font-size: 13px; font-weight: bold; } /* #events a { font-size: 13px; } */ #events h4 a { font-weight: bold; text-decoration: none; color: #404040; font-size:16px; } a.social { margin: 6px; } #connect { padding: 15px 0 15px 15px; } #connect li { float: left; margin: 0 10px 0 0; } h3.flag a {color:#404040;} h3.flag a:hover {text-decoration:none;} #footer { clear: both; } #footer { background: #404040; color: #fff; font-family: arial, helvetica, sans-serif; width: 710px; margin: 0 auto; padding: 15px 125px 30px;} #footer a { color: #fff; } #footer small { text-align: center; margin: 0 auto; display: block; margin-bottom: 30px;} #footer ul { margin: 0 auto; display: block; } #footer ul li { width: 140px; float: left; font-size: 12px; } #footer ul li a { font-weight: bold; text-decoration: none; } #footer ul li ul li a{ font-weight: normal; color: #d0d0d0; padding: 3px 0; display: block;} #footer ul li ul { margin-top: 5px;; } #container { background: #fff; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #feature { clear: both; background-color: #e4e4e4; overflow: hidden; } #hero { float: left; padding: 15px; position: relative; width: 645px; } #cycle { background: #404040; color: #eee; overflow: hidden; position: relative; height: 380px; z-index: 9; } #cycle .slide { position: relative; } #hero-nav { position: absolute; right: 15px; width: 60px; top: 365px; z-index: 10; text-align: center; } #hero-nav a { border: 1px solid #eee; 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; } #hero-nav a.activeSlide { background: #eee; } #hero .detail { font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 5px 75px 10px 15px; } #hero .detail a { color:#fff; text-decoration:underline; } #hero .slide h2 a {text-decoration:none;} #hero .slide h2 a:hover {text-decoration:none;} #hero .detail h2 { font-size: 24px; line-height: 30px; } #hero-side { font-family: Georgia; color: #404040; font-size: 14px; line-height: 20px; margin: 0 15px 0 0; padding: 30px 0 15px; width: 270px; float: right; } #hero-side h2 { color: #600; font-size: 29px; } #posts .post { padding: 15px 0px; border-bottom: 1px solid #e3e3e3; overflow: hidden; } #posts .post.last { border-bottom: none; } #posts .post img { float: left; margin-right: 15px; } #home .side-action { display: none; } #home .summary { float: right; width: 470px; } #home .summary .date-byline { color:#8a8a8a; font-size:14px; } #home .summary h3 a {color:#474747;} ul#action { margin:15px 0 0 0; } #home .section-header { background:#e4e4e4; padding:5px 15px; margin-left:-15px; } #home .section-header h2, .section-header p { margin:0; color:#404040; } #home .section-header img {margin:0;} /* 05 =SUBPAGES ---------------------------------------------------------- */ body.interior h1 { border-bottom:1px solid #c8c8c8; } .entry-desc a {font-weight:bold;} #video .video-entry { margin:0 0 20px; border-bottom:1px solid #c8c8c8; } #video .video-entry.last {border-bottom:none;} #video .thumb { width:130px; float:left; margin:0 10px 0 0; } #photos .photo-entry { border-bottom:1px solid #c8c8c8; margin:0 0 20px; padding:0 0 10px; } #photos .photo-entry.last {border-bottom:none;} #photos .photo-entry .left {width:240px;} #photos .photo-entry .right {width:380px;} .event-entry { border-bottom:1px solid #c8c8c8; margin:0 0 20px; } #events-entry .event-meta {font-weight:bold;} .event-entry.last { border-bottom:none; margin:0px; } .event-entry .left {width:35px;} .event-entry .right {width:580px;} p.event-date { background:#660000; color:#fff; padding:5px 0 5px 10px; width:30px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .event-month {font-size:14px;} .event-date {font-size:20px;} /* 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-filter-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;} /* 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;}