/* ---------------------------------------------------------- Common Good CSS Managed by: Blue State Digital TABLE OF CONTENT 01 - HTML5 Boilerplate 02 - COMMON STYLES 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - SIDEBAR 07 - FRAMEWORK 08 - UTILITY 09 - PRINT COLOR GUIDE (Main Site Colors and their Hex Codes) #202020 - black #F8DA33 - yellow FONTS font-family:'Avenir LT W01 35 Light'; font-family:'Avenir LT W01 65 Medium Oblique'; font-family:'Avenir LT W01 85 Heavy'; font-family:'Avenir LT W01 95 Black'; font-family:'Avenir LT W01 65 Medium'; ---------------------------------------------------------- */ /* 01 =HTML5 Boilerplate ------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } nav ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select {vertical-align:middle;} /* end HTML5 Boilerplate reset */ /* HTML5 boilerplate base styles */ html { overflow-y: scroll; } body { font:13px/1.231 sans-serif; *font-size:small; } select, input, textarea, button { font:99% sans-serif; } pre, code, kbd, samp { font-family: monospace, sans-serif; } ul, ol { list-style-type: none; } small { font-size: 85%; } b, strong, th { font-weight: bold; } i, em { font-style: italic; } td, td img { vertical-align: top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } textarea { overflow: auto; } .ie6 legend, .ie7 legend { margin-left: -7px; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } .ie7 img { -ms-interpolation-mode: bicubic; } label, input[type=button], input[type=submit], button { cursor: pointer; } button, input, select, textarea { margin: 0; } button { width: auto; overflow: visible; } /* end HTML5 boilerplate base styles */ /* BSD base styles */ caption, th { text-align: left; } /* 02 =COMMON STYLES ------------------------- */ body { color: #000;} select, input, textarea { color: #444; } .base { font: 14px/22px 'Avenir LT W01 35 Light'; } .base h1 { font: 24px 'Avenir LT W01 85 Heavy'; border-bottom: 4px solid #000; text-transform: uppercase; margin-bottom: 10px; } .base h1 a { color: #000; text-decoration: none; } .base h2 { font: 18px 'Avenir LT W01 65 Medium'; } .base h3 { font: 16px 'Avenir LT W01 85 Heavy'; } .base h4 { font: 14px 'Avenir LT W01 85 Heavy'; } .base h5 { font: 12px 'Avenir LT W01 85 Heavy'; } .base h6 { font: 11px 'Avenir LT W01 85 Heavy'; } .base p { font-size: 14px; margin-bottom: 15px; } a, a:link { outline: none; color: #000;} a:link { -webkit-tap-highlight-color: #FF5E99; } blockquote { border-left: 3px solid #F8DA33; padding-left: 10px; margin-left: 20px; } .base ul, .base ol { margin: 15px 0; padding-left: 25px;} .base ul li { list-style: disc; } .base ol li { list-style: decimal; } .base li ol, .base li ul { margin: 0; } .diag { background: url(/page/-/images/wrappers/bg-diag.png) repeat; } .hovered { cursor: pointer; } /* 03 =LAYOUT ------------------------- */ #container { width: 980px; margin: 0 auto; } #content-wrap { padding-top: 20px; } #content { width: 700px; float: left; } body#pages #content { width: 700px; float: left; } body#pages #content div.inner { padding-right: 30px; } #sidebar { width: 280px; float: right; } body.full-width #content { width: 980px; float: none; } body.full-width #content div.inner { padding-right: 0; } body.full-width #sidebar { display: none; } #header { height: 205px; position: relative; border-bottom: 8px solid #000;} #header-right { width: 400px; min-height: 100px; position: absolute; top: 15px; right: 0;} #top-nav { font-size: 10px; text-transform: uppercase; text-align: right; margin-bottom: 8px;} #top-nav li { display: inline; border-right: 1px solid #000; padding: 0 4px;} #top-nav li a { text-decoration: none; color: #000; } #top-nav li a:hover { text-decoration: underline; } #top-nav li.last { padding-right: 0; border-right: 0;} #quick-signup { margin-bottom: 10px; } #quick-signup input#quickemail, #quick-signup input#quickzip, #quicksearch input { font-size: 12px; color: #999; background: #fafafa; text-transform: lowercase; padding: 5px; margin-right: 2px; width: 155px;} #quick-signup input#quickzip { width: 100px; } #quick-signup span { padding: 5px; background: url(/page/-/images/wrappers/bg-diag.png); display: inline-block; } #quick-signup input.submit { background: #ee1b2e; font: 12px 'Avenir LT W01 95 Black'; text-transform: uppercase; color: white; padding: 5px 0px; border: none; width: 91px; } #quick-signup input.submit:active { color: #f8da33; } a#logo { font: 34px/30px 'Avenir LT W01 95 Black'; width: 100px; height: 40px; border: none; letter-spacing: -1px; text-transform: uppercase; color: #000; text-decoration: none; display: block; background: url(/page/-/images/wrappers/country-colored.png) no-repeat; padding-left: 145px; padding-top: 10px; margin-top: 32px; margin-bottom: 40px; height: 82px; } a#logo span { letter-spacing: 0px; display: block; font: italic 11px/11px 'Avenir LT W01 65 Medium Oblique'; text-transform: none;} #site-nav { clear: both; font-family:'Avenir LT W01 85 Heavy'; width: 707px; } #site-nav li { /* display: inline; */ border-left: 1px solid #000; text-transform: uppercase; color: #000; font-size: 16px; float: left; height: 32px; width:155px; } #site-nav a { display: block; padding: 0px 15px; height: 32px; text-decoration: none; color: #000; } #site-nav a:hover { background: #000; color: #fff; } #site-nav span { clear: both; font: italic 11px/11px 'Avenir LT W01 65 Medium Oblique'; display: block; text-transform: none; } #site-nav li.about { border: none; width: 115px; } #site-nav li.about a { padding-left: 0; } #site-nav li.problem { width:147px } #site-nav li.solution { width:152px } #site-nav li.action { width:142px } #site-nav li.blog { width: 132px; } #site-nav li.twitter, #site-nav li.facebook { border: none; float: right; margin-left: 5px; width:32px; } #site-nav li.twitter a, #site-nav li.facebook a { width: 31px; height: 31px; text-indent: -9999px; padding: 0; overflow: hidden; } #site-nav li.twitter a { background: url(/page/-/images/wrappers/btn-header-twitter.png) no-repeat; } #site-nav li.facebook a { background: url(/page/-/images/wrappers/btn-header-facebook.png) no-repeat; } #nav-right { float: right; width: 255px; height: 32px; } #nav-right form { float: left; width: 172px; } #nav-right input { background: #fafafa url(/page/-/images/wrappers/search.png) 96% center no-repeat; } #nav-right a { text-decoration: none; float: left; display: inline-block; text-indent: -9999px; width: 32px; height: 32px; margin-left: 8px; } #nav-right #headFb { background: url(/page/-/images/wrappers/btn-header-facebook.png) no-repeat 0 0; } #nav-right #headTwit { background: url(/page/-/images/wrappers/btn-header-twitter.png) no-repeat 0 0; } .ie7 #nav-right, .ie6 #nav-right { position: relative; top: -30px; } #site-footer { background:url(/page/-/images/footer_fuzz.jpg) no-repeat; padding:20px 0 20px 15px; color:#666; font-size:11px; } #site-footer a { color:#666; text-decoration:none; } #site-footer a:hover { color: #262626; } #site-footer .overview { font-weight:bold; } #site-footer .left, #site-footer .overview, #site-footer .about, #site-footer .problem, #site-footer .solutions, #site-footer .takeaction { float:left; width:125px; margin:0 30px 0 0; border-right:1px solid #e8e8e8; padding-right:10px; height:145px; } #site-footer li { line-height:20px; } #site-footer li.first { font-weight:bold; text-transform:uppercase; } #site-footer .takeaction { margin-right:0px; width:120px; border-right:none; padding-right:0px; } #site-footer #footer-tax .level_1 { width: 125px; float: left; margin: 0 30px 0 0; border-right: 1px solid #e8e8e8; padding-right: 10px; height: 145px; } #site-footer #footer-tax .level_1 a { font-weight: bold; text-transform: uppercase; } #site-footer #footer-tax .level_2 a { font-weight: normal; text-transform: none; } #site-footer #footer-tax .node_home .level_2 a { font-weight: bold; } #site-footer #footer-tax .node_take-action { margin-right: 0px; width: 120px; border-right: none; padding-right: 0px; } #site-footer #footer-tax .node_connect-on-facebook, #site-footer #footer-tax .node_follow-on-twitter { width: 21px; height: 20px; text-indent: -9999px; } #site-footer #footer-tax .node_connect-on-facebook a, #site-footer #footer-tax .node_follow-on-twitter a { display: block; width: 21px; height: 20px; } #site-footer #footer-tax .node_connect-on-facebook { float: left; } #site-footer #footer-tax .node_follow-on-twitter { float: left; } #site-footer #footer-tax .node_connect-on-facebook a { background: url(/page/-/images/footer_fb.png) no-repeat 0 0; } #site-footer #footer-tax .node_follow-on-twitter a { background: url(/page/-/images/footer_tw.png) no-repeat 0 0; } #site-footer #footer-tax .node_resources { display: none;} /* 04 =HOMEPAGE ------------------------- */ body#home { color: #262626; } body#home a { color: #262626; } body#home #fb-for-ie { display:none; } body#home .more { display: inline-block; text-decoration: none; padding: 6px 10px; background-color: #f8da33; color: #262626; font-size: 12px; } body#home .more.all { color: white; background-color: #0085ca; font-weight: bold; } body#home #feature { padding: 20px 0; background-color: #f2f2f2; color: #262626; margin-bottom: 25px; } body#home #highlight { padding: 12px 0; background: url(/page/-/images/wrappers/bg-diag.png); position: relative; } body#home #feature section { padding: 25px; padding-right: 40px; background: #f8da33; width: 560px; float: left; } body#home #feature section h1 { font-size: 22px; font-weight: bold; border-bottom: 1px solid #262626; padding-bottom: 15px; margin-bottom: 15px; text-transform: uppercase; font-family:'Avenir LT W01 95 Black' } body#home #feature section p { font-size: 18px; line-height: 1.2; margin-bottom: 15px; font-family:'Avenir LT W01 65 Medium'; } body#home #feature section .action { background-color: #262626; color: #f8da33; display: inline-block; height: 40px; width: 220px; margin-right: 12px; text-align: center; line-height: 40px; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 16px; font-family:'Avenir LT W01 85 Heavy'; } body#home #cycle { width: 340px; float: right; } body#home #cycle li { position: relative; height: 268px; background-color: #f8da33; } body#home #cycle li h2 { padding: 12px; font-size: 25px; text-transform: uppercase; font-family: 'Avenir LT W01 85 Heavy'; font-weight: bold; } body#home #cycle li h2 a { text-decoration: none; } body#home #cycle li p { padding: 0 12px; font-size: 16px; } body#home #cycle li img { } body#home #cycle .action { text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 18px; color: #f8da33; display: block; background: url(/page/-/images/wrappers/arrow-yellow-big.png) 95% center no-repeat; background-color: black; background-color: rgba(0,0,0,0.85); padding: 15px; width: 286px; position: absolute; bottom: 14px; left: 14px; font-family:'Avenir LT W01 85 Heavy'; } body#home #pager { position: absolute; bottom: -19px; right: 98px; } body#home #pager .page { text-decoration: none; background-color: #c9c9c9; height:11px; width:11px; display: inline-block; margin-right:10px; -webkit-border-radius:11px; -moz-border-radius: 11px; border-radius: 11px; } body#home #pager .page.activeSlide { background-color: #4f4f4f; } body#home #news { clear: left; float: left; width: 480px; margin-right: 20px; margin-bottom: 35px; } body#home #news h2 { font-family:'Avenir LT W01 85 Heavy'; text-transform: uppercase; font-size: 18px; /* 24px; */ padding-bottom: 3px; margin-top: 5px; border-bottom: 4px solid #262626; } body#home #news h2 a { text-decoration: none; } body#home #news .rss { text-indent: -9999px; width: 14px; height: 14px; background: url(/page/-/images/wrappers/btn-home-rss.png) no-repeat; display: inline-block; float: right; position: relative; top: 9px; right: 4px; } body#home #news article { font-family: Helvetica, Arial, sans-serif; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #c7c8ca; } body#home #news article h4 { font-weight: bold; font-size: 18px; margin-bottom: 10px; } body#home #news article h4 a { text-decoration: none; } body#home #news article .thumbnail { float:left; margin: 0 10px 10px 0; } body#home #news article p { margin-bottom: 7px; } body#home #news article .more { float: right; } body#home #news .dateline { color: #999999; } body#home #news .more.all { margin-top: 12px; float: right; } body#home #events { width: 207px; padding-right: 27px; border-right: 1px solid #262626; font-family: Helvetica, Arial, sans-serif; float: left; margin-top: 7px; } body#home #events h2 { font-weight: bold; font-size: 18px; border-bottom: 4px solid #262626; text-transform: uppercase; margin-bottom: 11px; } body#home #events h4 { font-weight: bold; margin-bottom: 9px; } body#home #events h2 a, body#home #events h4 a, body#home #side h2 a { text-decoration: none; } body#home #events .more { float: right; } body#home #side { margin-bottom: 35px; } body#home #side aside { width: 207px; float: right; font-family: Helvetica, Arial, sans-serif; margin-top: 7px; } body#home #side aside h2 { font-weight: bold; font-size: 18px; border-bottom: 4px solid #262626; text-transform: uppercase; margin-bottom: 11px; } body#home #side aside li { list-style: disc inside; margin: 3px 0; } body#home #side aside li a { text-decoration: none; color: #333333; } body#home .feature { margin-top: 30px; clear right; padding: 16px; width: 443px; background: url(/page/-/images/wrappers/bg-diag.png); float: left; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 200; } body#home .feature li { list-style-type: disc; list-style-position: inside; font-size: 16px; } body#home .feature a { text-decoration: none; } body#home .feature h5 { font-weight: bold; text-transform: uppercase; border-bottom: 1px solid black; margin-bottom: 5px; width: 200px; display: inline-block; text-align: center; } body#home .feature.bottom { margin-bottom: 30px; font-size: 14px; } body#home .feature .inner { display: block; padding: 17px 30px; text-decoration: none; overflow: hidden; padding-right: 28px; } body#home .feature.top .inner { background-color: #f8da33; } body#home .feature.bottom .inner { background-color: #c5deed; } body#home .feature img { float: left; margin-right: 32px; /* 70px; */ padding: 22px 0;} body#home .feature.bottom img { margin-right: 40px; } body#home .feature.top img { padding: 12px 0; } /* 05 =SUBPAGES ------------------------- */ body#blog .blog-entry { margin:0 0 35px; } body#blog a.button { background:#f8da33; color:#000; padding:3px 5px 0; text-decoration:none; text-transform:none; font-weight:normal; float:right; font-size:12px; } body#blog .blog-entry .entry-meta { float: left; width: 170px;padding-right: 15px;} body#blog .entry-meta .box { margin: 5px 0; } body#blog .blogcats { background:url(/page/-/images/wrappers/bg-diag.png) repeat; padding:22px 15px; } body#blog .blogcats p { font: 18px 'Avenir LT W01 65 Medium'; text-align:center; margin: 0; text-transform: uppercase;} body#blog .blogcats p a { color: #262626; text-decoration: none; background:#f8da33; padding: 2px;} body#blog .blogcats p a:hover { background: #262626; color: #f8da33; } body#blog .blogcats.resource p { font-size: 15px; line-height:22px; } body#blog .social.box { margin:10px 0; } body#blog .sharing-option { text-align:center; } body#blog .morecats p { text-align:center; margin:2px 0; font-family:'Avenir LT W01 65 Medium'; } body#blog .morecats p a { background:#f8da33; padding:5px; color:#262626; text-transform:uppercase; text-decoration:none; } body#blog .morecats p a:hover { color: #f8da33; background: #262626; } body#blog .entry-cont { width: 481px; float:left } body#blog .entry-date { font-size:12px; } body#blog .entry-date a { color:#000; font-weight:bold; text-transform:uppercase; } body#blog .entry-cont h2 { font-size:14px; text-transform:uppercase; margin:5px 0; } body#blog .entry-cont h2 a { text-decoration:none; color:#000; } body#blog #blog-share-option { text-align:center; } body#blog .pagination { text-align: center; } /* Section Headers */ #section-header { padding: 12px 0; border-top: 17px solid #f3f3f3; border-bottom: 17px solid #f3f3f3; background-color: #f3f3f3; margin-top: 15px; font-family:'Avenir LT W01 65 Medium';} #section-header .section-header-left { width: 570px; float: left; background: #F8DA33; color: #202020; font-size: 22px; padding: 20px 30px; } #section-header .section-header-left .section-title { font: 80px 'Avenir LT W01 95 Black'; } #section-header .section-header-right { width: 270px; padding: 30px; float: right; background: #202020; color: #F8DA33; font-size: 18px; } #section-header .section-header-right a { color: #fff; text-decoration: none; } #section-header .section-header-right a:hover { text-decoration: underline; } #section-header .section-header-right li:first-child { font-size: 24px; } #section-header .section-header-right li:first-child a { color: #F8DA33 } #section-header .section-header-right #header-tax a { text-decoration: none; } #section-header .section-header-right #header-tax a:hover { text-decoration: underline; } #section-header .section-header-right #header-tax .level_0 { font-size: 24px; } #section-header .section-header-right #header-tax .level_0 a { color: #F8DA33; } #section-header .section-header-right #header-tax .level_1 { font-size: 18px; } #section-header .section-header-right #header-tax .level_1 a { color: #fff; } .search_result { } /* 06 =SIDEBAR ------------------------- */ #sidebar h2 { text-transform: uppercase; border-bottom: 4px solid #000; font: 23.5px 'Avenir LT W01 85 Heavy'; padding-left: 25px;} #sidebar .inner { border-left: 2px solid #000; } .side-box { margin-bottom: 20px; padding: 15px 0 15px 25px;} .side-tout { background: url(/page/-/images/wrappers/bg-diag.png) repeat; padding: 25px 10px; margin-bottom: 10px; } .side-tout p { margin: 0px; } .side-tout a { text-decoration:none; font: 17px 'Avenir LT W01 35 Light'; color: #000; text-transform: uppercase; background: #f8da33; } .side-tout a:hover { color: #f8da33; background: #000; } #sidebar h3 { text-transform: uppercase; border-bottom: 2px solid #000; font: 15px 'Avenir LT W01 85 Heavy'; padding-left: 25px; } #sidebar h3 span { font-family: 'Avenir LT W01 65 Medium'; } .side-cat { background:url(/page/-/images/wrappers/bg-diag.png) repeat; height: 20px; width: 80px; font: 12px 'Avenir LT W01 35 Light'; text-transform: uppercase; margin: 0 10px 10px 0; float: left; padding: 25px 15px; } .side-cat a { text-decoration: none; color: #000; background: #f8da33; display: block;} /* 07 =FRAMEWORK ------------------------- */ .bsd-contribForm-oneCol .bsd-contribForm-aboveContent { float: left; width: 400px; height: 800px; margin-right: 40px; } /* this style allows you to position the form description to the left of the contribution form (note, you may have to adjust width and height depending on site layout and form options). */ .bsd-contribForm-oneCol .bsd-contribForm-belowContent { float: left; width: 100%; } /* this style makes sure the below form text spans the entire page. */ .bsd-contribForm-oneCol form#contribution { width: 460px; float: right; } /* 08 =UTILITY ------------------------- */ .cufon-loading * { visibility: hidden !important; } .floatl { float: left; margin: 0; padding: 0 10px 10px 0; } .floatr { float: right; margin: 0; padding: 0 0 10px 10px; } .error, .required { color: red; } .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } ::-moz-selection{ background: #F8DA33; color:#000; text-shadow: none; } ::selection { background: #F8DA33; color:#000; text-shadow: none; } /* 09 =PRINT ------------------------- */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } #sidebar, #editToggle, .editThis, #navigation, #addthis, #search, #nav { display: none; } /* hide disqus since it is extraneous content that just increases page size */ #disqus_thread {display:none;} a.dsq-brlink {display:none;} /* float blog entry images to decrease page length */ #main {overflow:hidden;} #main img { float:left; clear:both; /*keeps images from piling up next to each other*/ margin:0 10px 10px 0; } }