/* DO NOT TOUCH */ /* SAFE VERSION */ /* 6 / 7 / 2011 */ /* ---------------------------------------------------------- UW:NCA 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 10 - MEDIA QUERIEZ COLOR GUIDE (Main Site Colors and their Hex Codes) orange: #d47d00; ---------------------------------------------------------- */ /* 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; } @media all and (min-width: 900px) { /* 02 =COMMON STYLES ------------------------- */ body { background:url(/page/-/images/site/body-bg.jpg) repeat-x; background-color:#C3C4C6; } select, input, textarea { color: #444; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } .base h1 { font-size:32px; margin:0 0 15px; } .base h2 { font-size:22px; margin:0 0 10px; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; } .base h3 { font-size:14px; margin:0 0 10px; color:#393939; text-transform:uppercase; } .base h4 { } .base p {font-size:14px;} .base p, .base a { color:#393939; margin:0 0 10px; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; } a:hover, a:active { outline: none; } a, a:active, a:visited { color: #607890; } a:hover, a:focus { color: #036; } a:link { -webkit-tap-highlight-color: #FF5E99; } blockquote { border-left:1px solid #8e8e8e; color:#5d5d5d; padding:0 0 0 20px; font-style:italic; } .base ul, .base ol { margin-left: 1.8em; margin-bottom:1em; color:#393939; } .base ul { } .base ol { } .base ul li, .base ol li { margin:0 0 3px; } .base ul li { list-style: disc; } .base ol li {list-style:decimal;} .base li ol, .base li ul { font-style:italic; margin-top:5px; font-size:12px; } /* 03 =LAYOUT ------------------------- */ #home { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; } #meta-header { background: #f9f9f9; padding:3px 0 5px; margin:0 0 10px; height:21px; overflow: hidden; } #meta-nav-container { width:960px; margin:0 auto; padding:2px 0; position: relative; } #meta-positioner { position: absolute; left:264px; width:818px; } #meta-positioner li { display:inline; font-size:14px; border-right: 1px solid #bebebf; padding:0 10px; } #meta-positioner a { text-decoration:none; color:#5a5b5d; text-transform:uppercase; } #meta-positioner li.meta-noborder { border:0px; padding:5px 0 0 0; vertical-align:middle; } #container { width:960px; margin:0 auto; } #global-header {position:relative;} #logo { position:absolute; height:88px; width:518px; background:url(/page/-/images/site/header-logo.png); } #quick { float:right; width:255px; height:80px; } #quick p { text-transform:uppercase; font-size:14px; } #quick fieldset {position:relative;} #quick input.text { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; border:1px solid #c3c4c4; color:#818181; padding:1px 5px; position:absolute; font-size:13px; } #quick-email { top:25px; width:230px; } #quick-zip { width:160px; top:55px; } #quick-submit { position:absolute; top:55px; left:175px; } #nav-level-one { height:88px; margin:0 0 10px; } #nav-level-two { height:60px; width:960px; -moz-box-shadow: 0px 0px 5px #cccccc; -webkit-box-shadow: 0px 0px 5px #cccccc; box-shadow: 0px 0px 5px #cccccc; } #global-nav { padding:14px 0 15px; width:740px; background-color: #d7d7d7; background-image: -moz-linear-gradient(top, #d7d7d7, #c5c5c5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #d7d7d7),color-stop(1, #c5c5c5)); background-image: -webkit-linear-gradient(#d7d7d7, #c5c5c5); background-image: linear-gradient(top, #d7d7d7, #c5c5c5); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d7d7d7', EndColorStr='#c5c5c5'); } #global-nav a { color:#1a1a1a; text-decoration:none; font-size:25px; text-transform:uppercase; font-weight:bold; } #global-nav li { display:inline; border-right:1px solid #fff; padding:10px 20px; } #global-nav li#last-nav-item { border-right:none; padding-right:0px; } #global-nav li:last-child a {color:#fe230a;} #cse-cont { background:#a8a8a8; padding:10px; width:200px; } #cse { position:relative; height:40px; } #cse input {position:absolute;} #cse #cse-search { border:none; color:#181818; top:5px; padding:0 6px; left:0px; width:123px; height: 25px; } #cse #cse-submit { top:5px; left:135px; } #global-footer { background:#202020; padding:20px; color:#fff; } #footer-logo { background:url(/page/-/images/site/footer_img.jpg) no-repeat; width:398px; height:80px; float:left; border-right:1px solid #2b2b2b; padding:0 20px 0 0; } #footer-links { float:right; padding:20px 20px 20px 40px; font-size: 18px; } #footer-links li { display:inline; margin:0 20px 0 0; } #footer-links a { color:#fff; text-transform:uppercase; font-weight:bold; text-decoration:none; } #footer-links li:last-child a {color:#fe230a;} #sub-footer { margin:5px 0 0 0; color:#202020; } #sub-footer a { color:#202020; font-weight:bold; } /* 04 =HOMEPAGE ------------------------- */ #feature, #home-content { padding:10px; background:#fff; -moz-box-shadow: 0px 4px 5px #cccccc; -webkit-box-shadow: 0px 4px 5px #cccccc; box-shadow: 0px 4px 5px #cccccc; } #feature {position:relative;} #pager { position:absolute; z-index:75; top:225px; left:75px; } #pager a { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; float:left; background:url(/page/-/images/site/home_pager.jpg); width:18px; margin:0 2px 0 0; } #pager a.activeSlide { background-position:-20px 0; } #hero img { display: block; } .home-rotate-entry {width:700px;} .hero-caption { width:180px; color:#fff; padding:45px 20px 0; background:#000; height: 245px; } .hero-caption p { font-size:18px; text-align: center; margin:0 0 20px; } .hero-caption a { color:#fff; text-decoration:none; font-size:24px; padding:8px; } .hero-image {width:480px;} #feature-actions {width:230px;} .button a { background:url(/page/-/images/site/home_feature_buttons.png); height:90px; margin:0 0 10px; } .button a#button-donate {margin:0px;} #button-volunteer { background-position:0px -101px; } #button-donate { background-position:0px -201px; } #mission { background:#000; color:#fff; padding:25px; font-size:16px; margin:15px 0; } #mission a { color:#ff9600; text-decoration:none; } #mission-text {width:610px;} #home-content { padding:20px; margin:0 0 10px; } .ie8 .home-col { margin:0 20px 0 0; } .home-col { width:290px; margin:0 25px 0 0; } .home-col:last-child {margin:0px;} .home-col h1 { font-size:32px; margin:0 0 15px; text-transform: uppercase; } .work-image { position:relative; margin:0 0 5px; } .over { position:absolute; height:100px; width:290px; } .rgba .over { background: -moz-linear-gradient(left, rgba(255,150,0,.4) 0%, rgba(0,0,0,.6) 74%, rgba(0,0,0,.7) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,150,0,.4)), color-stop(74%,#000000), color-stop(100%,#000000)); background: -webkit-linear-gradient(left, rgba(255,150,0,.4) 0%,rgba(0,0,0,.7) 84%, rgba(0,0,0,.7) 100%); background: linear-gradient(left, rgba(255,150,0,.4) 0%,#000000 74%,#000000 100%); } /* .csstransitions .over { -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } */ .rgba .over.overactive { background: #ff9600; background: -moz-linear-gradient(left, rgba(255,150,0,0) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,150,0,0)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,150,0,0) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,150,0,0) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(left, rgba(255,150,0,0) 0%,rgba(255,255,255,0) 100%); } .work-image h2 { color:#fff; position:absolute; top:0px; right:25px; font-size:16px; } .home-box { margin:0 0 20px; position:relative; } #mid-rotator { background:#000; padding:30px 40px; height:70px; } #mid-rotator a { color:#fff; text-decoration:none; } #mid-rotator p { text-align:center; width:175px; position:absolute; top:30px !important; width:225px !important; left:30px !important; } #pager-prev, #pager-next { position:absolute; top:0px; font-size:22px; top:90px; color:#fff; cursor: pointer; } #pager-prev {left:15px;} #pager-next {left:265px;} #black-box { background:#000; color:#fff; padding:20px; } p.title {font-weight:bold;} #black-box p { margin:0 0 5px; } #black-box a { color:#fff; text-decoration:none; font-weight:bold; } .home-box img {width:116px;} #black-box .floatr {width:120px;} .entry { margin:0 0 10px; } .entry a { color:#d47d00; font-weight:bold; text-decoration:none; } /* 05 =SUBPAGES ------------------------- */ .interior #main { background:#fff; padding:0 20px; -moz-box-shadow: 0 0 5px #cccccc; -webkit-box-shadow: 0 0 5px #cccccc; box-shadow: 0 4px 5px #cccccc; } .interior #holder { float:left; padding:20px 15px; width:645px; border-right:1px solid #e5e5e5; } .interior.full-width #main {padding:20px;} .interior.full-width #holder {padding:0px;} .interior.full-width #holder { border:none; float:none; width:auto; } /* our work pages */ #work #work-title {padding-left:35px;} #work-title h1 { font-size:25px; text-transform:uppercase; color:#10167f; } .subnav.interior #main {padding-left:0px;} .subnav.interior #holder { padding-left:0px; padding-right:0px; width:695px; } #pages-subnav { border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; margin:20px 0; padding:10px 35px; } #pages-subnav li { display:inline; text-transform:uppercase; border-right:2px solid #dcdcdc; padding:0 10px; font-size:15px; } #pages-subnav li a { color:#363636; text-decoration:none; } #pages-subnav li:first-child {padding-left:0px;} #pages-subnav li:last-child {border-right:none;} #work #content { padding:0 35px; } #action-bar { border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf; padding:10px 35px; font-size:15px; text-transform:uppercase; margin:15px 0 25px; background:#e5e5e5; } #action-bar a { color:#fff; text-decoration:none; padding:3px 10px; margin:0 0 0 10px; background-color: #ffad39; background-image: -moz-linear-gradient(top, #ffad39, #fe9500); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffad39),color-stop(1, #fe9500)); background-image: -webkit-linear-gradient(#3e1e1a, #fe9500); background-image: linear-gradient(top, #ffad39, #fe9500); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffad39', EndColorStr='#fe9500'); } #more-work { padding:0 35px; } #more-work h1 { font-size:25px; color:#000; text-transform:uppercase; margin:0 0 15px; } .work-entry { width:170px; float:left; margin:0 25px 0 0; } .work-entry:last-child { margin:0 0 0 0; } .work-entry img { border-bottom:10px solid red; margin:0 0 10px; } .work-entry a { text-transform:uppercase; font-size:15px; text-decoration:none; margin:0 0 5px;} .interior.no-padding #main {padding:0px;} #work-title { margin:0px !important; } #work-main { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; color:#393939; } #work-main .work-entries { margin:20px 0; padding:0 20px; } #work-main .main-work-entry { float:left; width:210px; margin:0 15px 0 0; } #work-main .main-work-entry img { border-bottom:10px solid red; } #work-main .work-title { text-transform:uppercase; font-size:15px; margin:0 0 3px; } #work-main #work-title { padding:20px 20px 10px 20px; } #work-main #border-top { border-top:1px solid #cfcfcf; padding:10px 20px; margin:0 0 0 0; } /* news */ .interior .entry-date { margin:0px; font-size:12px; } .interior article.entry { margin:0 0 30px; } .interior .entry h1 { font-size:25px; margin:0 0 10px; } /* 06 =SIDEBAR ------------------------- */ #sidebar { float:right; width:230px; padding:20px 0; } #sidebar h1 { font-size:25px; margin:0 0 10px; } #twitter-box { margin:25px 0 15px 0; background:#e1e1e2; position:relative; padding:40px 30px; color:#fff; height:85px; } .interior #twitter-box { padding-bottom:50px; font-size:12px; line-height:14px; } #twitter-box-top { background:url(/page/-/images/site/twitter_box_top.png); height:46px; width:285px; position:absolute; top:-15px; left:-25px; } #twitter-box-top a { position:absolute; text-indent:-999em; height:20px; width:200px; top:15px; left:25px; } #tw-pager-prev, #tw-pager-next { cursor: pointer; color:#000; position:absolute; top:60px; font-weight:bold; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; font-size:16px; } #tw-pager-prev {left:20px;} #tw-pager-next {left:270px;} .interior #tw-pager-next {left:220px;} .tweet_list { overflow:hidden; height:125px !important; overflow-y:hidden; } .tweet_list li { padding:10px; margin:0 0 10px; color:#333333; } .tweet_list li a { font-weight:bold; color:#10167f; text-decoration:none; } .tweet_list li img { float:left; padding:0 5px 0px 0; } .tweet_time {display:block;} .tweet_time:after {content:":";} .interior .home-box { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; height:170px; } .interior #mid-rotator p { width:175px !important; left:29px !important; } .interior #pager-prev { top:70px; left:10px; } .interior #pager-next { top:70px; left:215px; } .interior .home-box img {width:75px;} .interior #black-box .floatr {width:100px;} /* 07 =FRAMEWORK ------------------------- */ #framework { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; } body#donate #nav-level-two {display:none;} #framework input[type="checkbox"] { margin:0 5px 0 0; } #framework input[type="radio"] { margin:0 3px 0 0; } body#donate #main { margin:0 0 3px; -moz-box-shadow: 0 0 5px #cccccc; -webkit-box-shadow: 0 0 5px #cccccc; box-shadow: 0 0 5px #cccccc; } body#donate #quick {display:none;} .bsd-contribForm-oneCol .bsd-contribForm-aboveContent { float: left; width: 450px; margin: 15px 40px 0 0; } /* 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: 400px; float: right; } .floatl { float: left; } .floatr { float: right; } /* this isn't an empty bracket, this closes the global media query */ } /* this isn't an empty bracket, this closes the global media query */ /* 08 =UTILITY ------------------------- */ .cufon-loading * { visibility: hidden !important; } .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; } .strong { font-weight: bold; } 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: #0F1579; color:#fff; text-shadow: none; } ::selection { background:#0F1579; color:#fff; 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; } } /* 10 =Media query (320) --------------------------- */ @media only screen and (max-device-width: 480px) { body { width:360px; overflow-x: hidden; } #meta-header {display:none;} #logo { background:url(/page/-/images/site/responsive/logo_360.png); width:360px; height:70px;} #quick {display:none;} #global-nav { width:100%; background:#d8d8d8; padding:5px 10px; } #global-nav li { margin:0 0 2px; width:90%; padding:10px; font-size:19px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #ffad39; background-image: -moz-linear-gradient(top, #ffad39, #fe9500); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffad39),color-stop(1, #fe9500)); background-image: -webkit-linear-gradient(#3e1e1a, #fe9500); background-image: linear-gradient(top, #ffad39, #fe9500); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffad39', EndColorStr='#fe9500'); } #global-nav li a { color:#fff; text-decoration:none; font-weight:bold; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; } #main { font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; font-size:16px; } #cse-cont {display:none;} #hero-rotator {position:relative;} .hero-caption { position:absolute; background:#000; color:#fff; font-size:16px; width:100%; bottom:0px; padding:10px; } .hero-caption a { position:absolute; display:block; text-indent:-999em; width:50px; height:50px; top:0px; left:0px; height:290px; width:370px; } #feature-actions {display:none;} #pager {display:none;} #mission { background:url(/page/-/images/site/responsive/mission_bg_media1.png) repeat-x; } #mission h1 { font-size:18px; margin:0 0 3px; } #mission { font-size:13px; padding:10px; } #mission-nav { margin:10px 0; -moz-column-count:2; -webkit-column-count:2; } #mission-nav li { margin:0 0 5px; } #mission-nav a { text-decoration:none; font-weight:bold; color:#ff9600; font-size:12px; } #home-content {padding:10px;} .home-col { margin:0 0 20px; } .home-box {display:none;} .entry { margin:10px 0; border-bottom:1px solid #e5e5e5; padding:0 0 10px; } .entry-date { color:#333; font-size:12px; } .entry a { color:#d47d00; font-size:14px; font-weight:bold; text-decoration:none; } #home #twitter-box {display:none;} #global-footer {display:none;} #sub-footer { background:#000; color:#fff; font-size:12px; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif; padding:20px; } #sub-footer a { color:#fff; text-decoration:none; font-weight:bold; } }