/* ---------------------------------------------------------- Jennifer Brunner 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; } 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:url(/page/-/Site/bg.png) center top no-repeat scroll #d6f0ff; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:0 0 1px 0; } .base h1 { } .base h2, #home h2 { height:28px; background:url(/page/-/Site/h-bg.gif) 0 0 no-repeat scroll #005dad; font-style:italic; line-height:26px; text-indent:13px; color:#fff; font-weight: bold; font-size: 18px;} .base .left h2 { margin:0 14px 15px 19px; } .base h2 strong, #home h2 strong { font-style:normal; text-transform:uppercase; } .base .left h3 { font-size:15px; font-weight:bold; color:#0e1b43; margin:21px 25px 15px 33px; } .base .right h3, #home .right h3 { height:22px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; font-style:italic; color:#005e9b; } .base h4 { } .base .left p { color:#505153; margin:0 25px 15px 33px; } a {color:#bf1c1b;} a:hover {text-decoration:none;} blockquote { background-color:#d5e4eb; font-style:italic; margin:34px 40px 34px 45px; padding:8px 10px 1px 10px; } .base .left blockquote p { margin:12px 19px; } /* 03 =LAYOUT ---------------------------------------------------------- */ #wrapper {width:992px; text-align:left; margin:0 auto; } #header { width:992px; height:152px; background:url(/page/-/Site/header.jpg) 0 0 no-repeat scroll transparent; position:relative; } #header h1 {position: absolute; display: block; width: 300px; height: 130px; top:10px; left: 0;} #header h1 a{cursor: pointer; display: block; width: 300px; height: 130px; } #header h1 a span{display:none;} #header form { position:absolute; top:43px; left:538px; } #header form p.first strong { display:block; text-indent:-9999px; position:absolute; top:0; left:0; } #header form p.first { font-size:14px; font-weight:bold; color:#fff; text-indent:97px; padding:12px 0 7px 0; } #header form p.last { margin:0 0 0 7px; } #header form p.last input { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#06c; border:none; padding:6px 5px 5px 5px; float:left; } #header form p.last input#email { width:226px; margin:0 8px 0 0; } #header form p.last input#zip-code { width:93px; margin:0 8px 0 0; } #header form p.last input#sign-up { width:76px; height:27px; background:url(/page/-/Site/sign-up.gif) 0 0 no-repeat scroll transparent; font-size:0; line-height:0; text-indent:-9999px; padding:0; margin:0; cursor:pointer; } ul#nav { width:992px; height:49px; } ul#nav li { float:left; display:inline; } ul#nav li a { display:block; height:49px; text-indent:-9999px; background:url(/page/-/Site/nav-bg.jpg) 0 0 no-repeat scroll transparent; } ul#nav li#about a {width:187px;} ul#nav li#about a.active, ul#nav li#about a:hover { background-position:0 -49px; } ul#nav li#issues a { width:92px; background-position:-187px 0; } ul#nav li#issues a.active, ul#nav li#issues a:hover { background-position:-187px -49px; } ul#nav li#involved a { width:144px; background-position:-279px 0; } ul#nav li#involved a.active, ul#nav li#involved a:hover { background-position:-279px -49px; } ul#nav li#news a { width:84px; background-position:-423px 0; } ul#nav li#news a.active, ul#nav li#news a:hover { background-position:-423px -49px; } ul#nav li#video a { width:87px; background-position:-507px 0; } ul#nav li#video a.active, ul#nav li#video a:hover { background-position:-507px -49px; } ul#nav li#blog a { width:81px; background-position:-594px 0; } ul#nav li#blog a.active, ul#nav li#blog a:hover { background-position:-594px -49px; } ul#nav li#donate a { width:317px; background-position:-675px 0; } ul#nav li#donate a.active, ul#nav li#donate a:hover { background-position:-675px -49px; } .white-box-top { clear:both; width:992px; height:16px; background:url(/page/-/Site/white-box-top.png) 0 0 no-repeat scroll transparent; } .white-box { width:992px; background:url(/page/-/Site/white-box-bg.png) 0 0 repeat-y scroll transparent; overflow:hidden; } .white-box-bottom { width:992px; height:12px; background:url(/page/-/Site/white-box-bottom.png) left bottom no-repeat scroll transparent; margin:0 0 2px 0; } .base .left { margin:7px 0 25px 0; } #footer { width:992px; background:url(/page/-/Site/footer-bg.png) left bottom no-repeat scroll transparent; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#fff; text-align:center; padding:16px 0 15px 0; margin:0 0 15px 0; } #footer ul { width:490px; margin:0 auto; } #footer ul.last { clear:both; width:300px; margin:0 auto 9px auto; overflow:hidden; } #footer ul li { float:left; display:inline; padding:0 8px 0 4px; border-right:1px solid #fff; margin:0 0 11px 0; } #footer ul li.first {padding-left:0;} #footer ul li.last { padding-right:0; border:none; } #footer a {color:#fff;} #footer ul li#footer-donate { padding:0; border:none; position:relative; } #footer ul li#footer-donate a { display:block; width:82px; height:33px; background:url(/page/-/Site/footer-donate.gif) 0 0 no-repeat scroll transparent; text-indent:-9999px; position:absolute; top:-6px; left:5px;} #footer p { clear:both; line-height:20px; } #footer p.credits { width:283px; height:38px; line-height:38px; border:1px solid #fff; margin:15px auto; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #slideshow { width:655px; float:left; margin:7px 14px 0 0; position:relative; height: 299px; padding-left: 10px; overflow: hidden;} #the-show {background-color: transparent !important; position: relative; width: 655px; background-color: #FFF;} #the-show .slide{width:655px; height: 279px; background-color: transparent;} #slideshow img { display:block; margin:0 0 0 0; } #slideshow p { font-size:12px; text-indent:31px; color:#505153; margin:5px 0 0 0; } #slideshow p span {color:#06c;} #slideshow p a{color:#06c; text-decoration: none;} #pagination { font-size:13px; position:absolute; top:272px; right:13px; z-index:900; } #pagination a { display:block; float:left; color:#666; text-align:center; text-decoration:none; padding:11px 5px 0 5px; } #pagination a.activeSlide { background:url(/page/-/Site/slideshow/pagination-on.gif) center top no-repeat scroll transparent; color:#06c; } #sub-nav { width:296px; float:left; margin:7px 0 0 0; } #sub-nav h2 { height:34px; background:url(/page/-/Site/h2-action-center.gif) 0 0 no-repeat scroll transparent; text-indent:-9999px; } #sub-nav ul {width:296px;} #sub-nav ul li a { display:block; background:url(/page/-/Site/sub-nav-bg.gif) 0 0 no-repeat scroll transparent; text-indent:-9999px; } #sub-nav ul li#volunteer a {height:54px;} #sub-nav ul li#tell a { height:48px; background-position:0 -54px; } #sub-nav ul li#become a { height:47px; background-position:0 -102px; } #sub-nav ul li#send a { height:47px; background-position:0 -149px; } #sub-nav ul li#help a { height:50px; background-position:0 -196px; } .left { width:679px; float:left; margin:0 0 25px 0; } .left h2#head-blog { margin:0 14px 15px 19px; } .left h2#head-news { margin:0 8px 10px 0; } .left h2#head-video { margin:0 0 9px 0; } .left h3 a, .left h3 { font-size:15px; color:#0e1b43; margin:0 0 2px 0; text-decoration: none;} .left p { font-size:12px; line-height:20px; color:#505153;} .left p.credits { font-size:10px; text-transform:uppercase; line-height:normal; margin:0 0 2px 0;} .left p.credits span {color:#0e1b43;} .left span.count {color:#bf1c1b;} .left p.credits a { font-size:11px; text-transform:none; font-style:italic; } .left-inner{width: 646px; padding: 0 14px 0 19px;} .left-inner h2{margin: 0 0 15px 0 !important;} .left-inner p{margin-right: 0 !important; margin-left: 0;} .post { background:url(/page/-/Site/divider.gif) left bottom repeat-x scroll transparent; padding:0 0 6px 0; margin:0 22px 15px 32px; } .post p{margin-bottom: 15px;} .left p.all { margin:11px 22px 0 32px; } .left p.all a.rss { display:inline-block; background:url(/page/-/Site/rss.gif) 1px 3px no-repeat scroll transparent; text-indent:19px; } .left .sub { width:327px; float:left; margin:15px 0 0 0; } .left .sub .post { background:url(/page/-/Site/divider.gif) left bottom repeat-x scroll transparent; padding:0 0 11px 0; margin:0 10px 9px 10px; } .left .sub h3 { line-height:19px; margin:-3px 0 0 3px; } .left .sub p.credits { margin:0 0 0 3px; } .left .sub p.source { font-size:10px; text-transform:uppercase; margin:0 0 0 3px; } .left .sub p.source a {text-transform:none;} .left .sub p.all { margin:17px 22px 0 18px; } .left .sub.first {margin-left:19px;} .left .sub.last p.all { text-align:right; margin:-2px 10px 0 0; } .right { width:296px; float:left; margin:0 0 25px 0; } .right h2#head-connect { margin:0 0 8px 0; } .right h2#head-events { margin:0 0 2px 0; } .right h3#head-social { margin:0 0 0 9px; } .right h3#head-mobile { clear:both; margin:0 0 0 9px; } #connect { font-family:Arial, Helvetica, sans-serif; background-color:#d5e4eb; padding:0 0 13px 0; margin:0 0 8px 0; } #tweet { background:url(/page/-/Site/tweet-bg.gif) left bottom no-repeat scroll transparent; padding:0 0 8px 0; margin:0 0 20px 0; position:relative; } #home .right #tweet h3, .base .right #tweet h3 { height:15px; position:absolute; top:5px; left:9px; } #tweet p { background:url(/page/-/Site/tweet-top.gif) 0 0 no-repeat scroll transparent; font-size:15px; line-height:20px; color:#004b72; padding:37px 35px 0 22px; } #tweet p.credits { background:none; font-size:10px; color:#06c; padding:4px 0 0 22px; margin:0; } #tweet p.last { background:none; font-size:12px; text-align:right; padding:0 20px 0 0; margin:-1px 0 0 0; } #connect ul { overflow:hidden; margin:0 0 29px 0; } #connect ul li { font-size:10px; display:inline; overflow:hidden; } #connect ul li a { display:block; float:left; width:47px; text-align:center; text-decoration:none; color:#005e9b; padding:47px 0 0 0; margin:0 0 0 4px; } #connect ul li#facebook a { background:url(/page/-/Site/facebook.gif) center top no-repeat scroll transparent; margin:0 0 0 8px; } #connect ul li#twitter a { background:url(/page/-/Site/twitter.gif) center top no-repeat scroll transparent; } #connect ul li#youtube a { background:url(/page/-/Site/youtube.gif) center top no-repeat scroll transparent; } #connect ul li#flickr a { background:url(/page/-/Site/flickr.gif) center top no-repeat scroll transparent; } #connect ul li#myspace a { background:url(/page/-/Site/myspace.gif) center top no-repeat scroll transparent; margin:0 0 0 5px; } #connect form { font-size:12px; color:#005e9b; overflow:hidden; } #connect form p { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; margin:-2px 0 0 12px; } #connect form p input { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#06c; border:none; padding:6px 5px 5px 5px; float:left; } #connect form p input#mobile { width:185px; margin:10px 4px 0 -2px; } #connect form p input#sign-up2 { width:82px; height:33px; background:url(/page/-/Site/sign-up2.gif) 0 0 no-repeat scroll transparent; font-size:0; line-height:0; text-indent:-9999px; padding:0; margin:7px 0 0 0; cursor:pointer; } .right ul#events { font-size:12px; color:#505153; } .right ul#events li { background:url(/page/-/Site/divider.gif) left bottom repeat-x scroll transparent; padding:8px 10px 8px 14px; } .right ul#events li a{text-decoration: none;} .right ul#events li.last {background:none;} .right ul#events li strong {color:#0e1b43;} .right ul#events li strong span {text-transform:uppercase;} /* 05 =SUBPAGES ---------------------------------------------------------- */ .base #sub-nav { float:none; margin-bottom:9px; } #the-blog h2#head-blog { margin:7px 17px 7px 19px; } #the-blog .post { background:url(/page/-/Site/divider2.gif) left bottom repeat-x scroll transparent; padding:0 0 6px 0; margin:0 22px 15px 32px; } #the-blog.archive .post{background:url(/page/-/Site/divider.gif) left bottom repeat-x scroll transparent; padding:0 0 6px 0; margin:0 22px 15px 32px; } #the-blog.base .left h3 { font-size:20px; line-height:24px; margin:5px 0 3px 2px; } #the-blog.base .left p { margin:0 0 15px 2px; } #the-blog .left p.credits { margin:0 0 2px 2px; } #the-blog.base .left p.meta { background:url(/page/-/Site/divider2.gif) left top repeat-x scroll transparent; padding:6px 0 2px 0; margin:25px 0 0 2px; } #the-blog.base .left p.meta span { font-size:10px; text-transform:uppercase; } #the-blog ul#comments li { background:url(/page/-/Site/divider2.gif) left bottom repeat-x scroll #fff; padding:16px 25px; margin:0 20px 0 33px; } #the-blog ul#comments li.alt { background:url(/page/-/Site/divider2.gif) left bottom repeat-x scroll #f2f6f7; } #the-blog ul#comments li p {margin:0;} #the-blog ul#comments li p.first { margin:0 0 3px 0; } #the-blog ul#comments li p.credits { color:#bf1c1b; text-transform:none; margin:6px 0 0 0; } #disqus_thread{padding: 15px 22px 15px 32px;} #the-blog .left form { font-family:Arial, Helvetica, sans-serif; color:#505153; margin:28px 0 0 33px; } #the-blog .left form h4 { font-size:14px; margin:0 0 12px 60px; } #the-blog.base .left form p { margin:0 0 6px 0; } #the-blog .left form label { display:block; float:left; width:55px; font-size:10px; font-weight:bold; text-transform:uppercase; text-align:right; margin:0 5px 0 0; } #the-blog .left form input { width:350px; background:url(/page/-/Site/comment-input-bg.gif) 0 0 repeat-x scroll transparent; padding:3px; border-top:none; border-right:1px solid #b4b4b4; border-bottom:1px solid #d9d9d9; border-left:1px solid #b4b4b4; } #the-blog .left form textarea#comment-comment { width:354px; height:223px; } #the-blog .left form p#remember { margin:0 0 3px 279px; } #the-blog .left form p#remember input, #the-blog .left form p#remember label { display:inline; float:none; width:auto; font-weight:normal; text-transform:none; border:none; background:none; } #the-blog.base .left form p.last { margin:7px 0 0 57px; } #the-blog .left form input#preview, #the-blog .left form input#post-it { width:82px; height:33px; font-size:0; line-height:0; text-indent:-9999px; padding:0; border:0; margin:0; cursor:pointer; } #the-blog .left form input#preview { background:url(/page/-/Site/preview.gif) 0 0 no-repeat scroll transparent; } #the-blog .left form input#post-it { background:url(/page/-/Site/post.gif) 0 0 no-repeat scroll transparent; } .right a#subscribe { display:block; width:296px; height:63px; background:url(/page/-/Site/subscribe.gif) 0 0 no-repeat scroll transparent; text-indent:-9999px; } #the-blog .side-nav { background-color:#d5e4eb; font-size:12px; padding:14px 17px 1px 17px; margin:7px 0 0 0; } #the-blog .side-nav h3 {height:24px;} #the-blog .side-nav ul { margin:0 0 16px 0; } #the-blog .right .blog-archive li{margin-bottom: 5px;} /* 06 =FRAMEWORK ---------------------------------------------------------- */ /* 07 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 27px 20px 0;} .floatr {float: right; margin: 0; padding: 0 0 20px 27px;} .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; } .paginate{margin-left: 32px !important;} 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;}