/* ---------------------------------------------------------- **Americans For The Arts: Arts Action Fund** CSS Managed by: Blue State Digital Last Update: March 2010 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) green.......#abbe3c light blue..#1791B6 ---------------------------------------------------------- */ /* 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:helvetica, arial, sans-serif; } .base h1 {font-size:1.4em;} .base h2 {font-size:1.2em;} .base h3 { font-size:12px; font-weight:bold; margin: 3px 0 3px; } .base h4 { font-size:1em; text-transform:uppercase; margin: 0 0 5px; } .base h5 { font-size:1em; margin:0 0 5px; } .base p { font-family:helvetica, arial, sans-serif; font-size:12px; line-height:17.8px; margin:10px 0; } a { outline:none; text-decoration:none; color:#1791b6; } a:hover {text-decoration:underline;} blockquote { font-family:helvetica, arial, sans-serif; font-size:12px; font-style:italic; line-height:16.8px; margin:10px 0; margin:20px; } .base ul, ol { /*margin:0 0 0 15px;*/ } .base li { margin:0 0 5px; font-family:helvetica, arial, sans-serif; font-size:12px; line-height:16.8px; } .base ul { } .base ol { } .base ul li, .base ol li { list-style-type:disc; } .base li ol { } .base li ul { } /* 03 =LAYOUT ---------------------------------------------------------- */ #container { width:940px; margin:0 auto; overflow: hidden; } #body-wrapper {overflow:hidden; clear:both; } #header {position:relative;} #header-signup { background:#abbe3c; width:490px; position:absolute; top:20px; right:0px; padding:6px 0 6px 18px; } #header-signup p { color:#fff; font-weight:bold; font-size:14px; } #header-signup form#quicksignup { width:240px; position:absolute; top:3px; right:40px; } #header-signup form fieldset { } #header-signup form input { background:#fff; -moz-border-radius:4px; -webkit-border-radius:4px; border:none; position:absolute; top:10px; font-size:10px; font-weight:bold; } #header-signup input#splash-email { width:126px; left:14px; padding:6px 0 6px 6px; } #header-signup input#splash-zip { width:75px; left:150px; padding:6px 0 6px 6px; } #header-signup input#submit {left:235px;} #nav ul { position:absolute; right:0; top:100px; text-transform: uppercase; } #nav ul li { display:inline; font-size:17px; margin:0 0 0 15px; } #nav ul li a {color:#000;} #nav ul li a:hover { color:#1ab6e7; text-decoration: none;} #footer { background:#454545 no-repeat; color:#fff; overflow:hidden; padding:15px 15px 15px; } #footer-text { /* float:right; */ padding:30px 20px 0; text-align:center; line-height:23px;} #footer-text a { text-decoration:underline; color:#fff; } #footer ul li {display:inline;} #footer img { float:left; } #footer-text span.footer-office {font-weight:bold;} body#map #sidebar { float:right; } #sidebar { float:left; width:290px; padding:8px; } #sidebar a {font-size:12px;} #sidebar a span.more { text-transform:uppercase; font-size:10px; font-weight:bold; } #sidebar #social-connect { margin:0 0 0 15px; } #sidebar #vid-wrapper { padding:0 0 0 10px; } #sidebar #more-vids { padding:0 0 0 10px; } #sidebar li { list-style-type:disc; color:#1791B6; list-style-position:outside; font-size:12px; } #body-wrapper a {font-size:12px;} #four04 { float:left; width:630px; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #hero { background:#abbe3c; padding:10px; margin:0 0 15px 0; overflow:hidden; } #hero-column-left { float:left; width:610px; margin:0 10px 10px 0; position:relative; } #hero-controls { position:absolute; left:10px; bottom:10px; } #hero-controls a { font-weight:bold; font-family:helvetica, arial, sans-serif; text-decoration:none; color:#000;} #hero-controls li { display:inline; background:rgba(255, 255, 255, 0.6); padding:4px 6px 1px 5px; } #hero ul { margin:0px; } #hero-cycle {height:285px;} #hero-cycle .quote-box a { color:#000; } #hero-column-left #pager { position:absolute; top:257px; left:5px; z-index:5; } #hero-column-left #pager a { background:#fff; background: rgba(255, 255, 255, .6); height:15px; width:15px; margin:0 3px 0; padding:2px 4px; color:#000; font-size:10px; font-weight:bold; border:1px solid #666; -moz-border-radius:3px; } #hero-column-left #pager a:hover {text-decoration:none;} #hero-column-left #pager a.activeSlide { background: rgba(255, 255, 255, 1); height:15px; width:15px; } .entry {position:relative;} #hero-column-right { float:left; width:298px; } #mission { background:#90aa2e; -moz-border-radius:10px; -webkit-border-radius:10px; padding:0 0 10px 15px; position:relative; margin:0 0 10px; padding:10px; } #mission a#mission-indent { text-indent:-999em; } #mission a { } .quote-box { position:absolute; width:298px; top:160px; left:620px; height:125px; overflow: hidden; } .quote-box p { margin:5px; font-size:12px; } .quote-box p.quote { font-size:18px; color:#fff; line-height:1em; font-weight: bold; } .quote-box p.quote-learn { font-size:10px; text-transform:uppercase; color:white; } #hero-actions li { display:inline; margin:0 2px 0; } .body-column { float:left; width:290px; padding:10px; } .body-column a {font-size:12px;} .body-column a span.more { text-transform:uppercase; font-size:10px; font-weight:bold; } .body-column li { list-style-type:disc; color:#1791B6; list-style-position:outside; font-size:12px; margin: 0 0 10px; } #mid-column ul { padding:0 0 0 15px; } #grey-col {background:#e6e6e6; margin:0 0 10px; padding-bottom:20px; } .body-box { margin:0 0 10px; } .body-box ul li { color:#000; } .body-box p { color:#000; } .title { margin:0 0 14px; } .body-column { } #sidebar #connect { margin:0 25px 0; } .news-entry { margin:0 0 15px; overflow:hidden; } .news-entry-no-image { margin:0 0 15px; } .news-entry img { float:left; margin:0 10px 5px 0;} .entry-content { float:left; width:475px; } .entry-title p { margin:0 0 0 0px; color:#999; font-size:10px; } #news-meta h3 { font-size:14px; } .home-entry { margin:0 0 10px 0; } .artsvote-qa { margin:0 0 15px; } #more-vids { margin:10px 0 0 0; } #more-vids .home-more { margin:5px 0 0 0; } #more-vids ul li { display:inline; position:left; margin:0 2px 0 0; } .events-entry { margin:0 0 15px; padding:0 0 0 10px; } .events-entry p { margin: 0 0 0 0; } .events-entry a {font-weight:bold;} ul#follow-us li { list-style-type:none;} ul#follow-us {padding:0} .home-more { background:url(/page/-/afta/img/btn-readmore.png) no-repeat; height:22px; padding:2px 10px 0 0; float:right; } .home-more a:hover { text-decoration:none; } span.more { color:#fff; padding:0 0 0 8px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ #interior-wrap ul, ol { margin:0 0 0 20px; } #interior-wrap ul {} #interior-wrap ol { } #interior-wrap ul li {list-style: outside disc; margin: 0 0 5px 0;} #interior-wrap ol li {list-style: outside decimal;} #interior-wrap li ol { } #interior-wrap li ul { } #interior-wrap .entry { border-bottom:1px solid #c8c8c8; padding:0 0 10px 10px; width:575px; margin:0 0 25px; overflow:hidden; } #interior-wrap .news-image { float:left; width:100px; } #interior-wrap .news-meta { float:left; width:470px; } #interior-wrap .vid-entry { margin:0 0 15px; overflow:hidden; border-bottom:1px solid #c8c8c8; padding:0 0 10px 10px; width:575px; } #interior-wrap .vid-image { float:left; width:100px; } #interior-wrap .vid-meta { float:left; width:470px; } .stories-entry { margin: 0 0 15px; border-bottom: 1px solid #e8e8e8; padding: 0 0 10px; } .stories-box span.news-date { font-size:18px; } .stories-entry .stories-box { overflow:hidden; margin:0 0 10px 0; } .stories-entry .stories-img { float:left; width:100px; } .stories-entry .stories-summary { float:left; width:470px; } .events-clear { overflow:hidden; } .events-thumb { float:left; width:96px; margin:0 10px 0 0; } .events-entry-right { float:left; width:520px; margin:0 0 10px; } .interior-news { margin:20px 0; border-bottom:1px solid #e5e5e5; } .interior-news .news { border-bottom:1px solid #e5e5e5; margin:0 0 10px 0; overflow:hidden; background:pink; } .interior-news .news-entry { overflow:hidden; margin:0; } .interior-news .news-entry-title span.news-date { font-size:15px; } .interior-news .news-entry-title p { font-size:10px; color:#999; margin:0; } .interior-news .news-img { float:left; width:100px; } #news-meta h3 { font-size:14px; } .interior-events .entry-title span.news-date { font-size:15px; } .interior-events .events-content { margin:10px 0; } .interior-events a { font-weight:normal; } .interior-video { margin:0 0 20px; border-bottom:1px solid #e5e5e5; } #vid-player { margin: 10px 0; } #header-action { background:#abbe3c; overflow: hidden; padding:0 10px 0 0; margin:0 0 15px; } #header-action p { float:right; color: #fff; font-style: italic; } #header-action a { color:#fff; text-decoration: underline; font-style: normal; } #interior-wrap { float:left; width:627px; } body.interior-full-width #interior-wrap { float:left; width:900px; } body.interior #interior-wrap { float:left; width:627px; } .pages-sidebar { width:942px; } span.entry-title { font-size:15px; color:#000; } span.entry-title:hover { color:#1791B6; text-decoration:none; } #interior-title { margin:1px 0 25px 0; position:relative; background:url(/page/-/afta/img/interior-title-lines.png); width:587px; height:24px; } #interior-title img { padding:0px; } #interior-img { margin:0 0 10px; } #pages-title { position:absolute; background: #fff; padding: 10px 10px 10px 0; top:0; text-transform:uppercase; } #interior-content { margin:0 0 20px; } #interior-content a { text-transform: uppercase; font-size:10px; font-weight: bold; } #interior-content ul { margin: 50px; } #interior-content ul li { margin:10px 0; list-style-type:disc; color:#2597b8; font-size:10px; } #interior-content ul li p { font-size:12px; color:#000; } .entry span.news-date { color:#000; font-size:15px; } span.news-date { color:#000; font-size:10px; } span.news-date:hover { color:#1791B6; } #interior-pages-content { width:590px; } #interior-pages-content img { padding:10px; } body.interior-full-width #body-wrapper #interior-pages-content { width:900px; } #vid-entry {clear:both;} #vid-entry #vid-thumb { float:left; margin:0 10px 20px; } #vid-entry #vid-description { float:left; width:290px; } .return-index { margin:10px 0; } /* DISQUS MODULE */ #disqus_thread { border-top:1px dotted #c8c8c8; margin:20px 0 0px 0; padding:20px 0 0 0; width:587px; } label.dsq-subscribe-label { font-size:12px; } /*SHARE THIS */ .more-links { background:#e8e8e8; padding:7px 10px 1px; margin:0 0 20px 0; } p.byline { color: #999999; margin: 0 0 10px 0; } .more-links a.facebook, #blog.list .entry .more-links a.facebook { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat 0 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} .more-links a.facebook:hover, #blog.list .entry .more-links a.facebook:hover { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat 0 -20px; } .more-links a.digg, #blog.list .entry .more-links a.digg { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat -21px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} .more-links a.digg:hover, #blog.list .entry .more-links a.digg:hover { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat -21px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} .more-links a.tweet, #blog.list .entry .more-links a.tweet { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat -45px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} .more-links a.tweet:hover, #blog.list .entry .more-links a.tweet:hover { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat -45px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} .more-links a.technorati, #blog.list .entry .more-links a.technorati { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat -67px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} .more-links a.technorati:hover, #blog.list .entry .more-links a.technorati:hover { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat -67px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} .more-links a.email, #blog.list .entry .more-links a.email { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat -90px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} .more-links a.email:hover, #blog.list .entry .more-links a.email:hover { background: url(/page/-/afta/img/btn-blog-socnet.png) no-repeat -90px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} /* 06 =FRAMEWORK ---------------------------------------------------------- */ #framework { width:630px; float:left; } #framework ul, ol { margin:0 0 0 20px; } .fieldset .label { margin:10px 0 2px 0; font-size:14px; font-weight:normal; } #signup label.field { font-weight:normal; } #contact_importer_button_container { float:left; } td.field { font-size:12px; } td.label { font-size:12px; } .full-width #framework { width:100%; float:none; } /*=CONTRIBUTIONS*/ #framework #contribution td.contribheader { border-bottom: 1px solid #eee; } #framework #invitationpage .label { width: 12%; } #framework #contribution td.contribbutton table td { padding: 10px 0; text-align: left; }/*Left aligns the contribute submit buttons and increse the vertical spacing above it*/ /*=FUNDRAISING*/ #framework td, #framework th { padding: 2px 0; } /*Adds vertical spacing between the rows of form elements*/ #framework .checkbox, #framework .radiobutton, #framework .label, #framework .text { margin: 0 5px 0 0; } /*Adds spacing to the right of check boxes and radio buttons*/ #framework .label, #framework .fieldlabel { text-transform: capitalize; } /*targets label elements in form*/ #framework input.text, #framework textarea { margin: 2px 5px 2px 0; } /* Adds spacing around text input fields*/ #framework .submit, #framework #invitationpage #submit_button, #framework #date-filter { margin: 1em 0 0 0; } /*Targets most Buttons*/ #framework #captcha_container #captcha_buttons { line-height: 0; margin: 0; } /*Removes vertical spacing between captcha buttons*/ #framework .label, #framework .fieldlabel { font-size:14px; } #framework span.radio { margin:0 0 0 5px; } /*Adds spacing next to credit card amounts */ #framework input#legal_confirm { margin:0 5px 0 0; } /* Adds spacing next to legal compliance check box */ #framework td.contribcolumn { font-size:12px; } #framework td.contribcolumn ol { margin:10px 0 0 20px; } /* Moves the legal compliance text slightly down */ #framework td.contribcolumn input { border:1px solid #c8c8c8; padding:5px; } #framework td.contribcolumn select { padding:3px; } /* 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;}