/* ---------------------------------------------------------- **Client Name** 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) #19204d - DARK BLUE (NAV LINKS) #69b034 - BRIGHT GREEN ---------------------------------------------------------- */ /* 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: Arial, Helvitica, sans-serif; } body {font-size: 12px;} /*#nav, */#footer {font-family: Georgia, "Times News Roman", serif; display: none; } #nav {font-size: 16px;} #content-header h1 {font-size: 38px;} .home-column h3.column-header {font-size: 19px;} /* colors */ #content-header h1, #footer, #footer a {color: #fff;} #nav a, .home-column h3.column-header a {color: #19204d;} /* dark purple */ #nav a:hover, a {color: #69b034;} /* links */ a, #nav a, a.button-small:hover {text-decoration: none;} a:hover {text-decoration: underline;} /* misc */ #home-content .home-column h3.column-header {font-weight: normal;} /* 03 =COMMON STYLE ---------------------------------------------------------- */ body .base {font-size: 12px;} .base h1 {font-size: 30px; margin: 0 0 15px 0;} .base h2 {font-size: 22px; margin: 0 0 10px 0;} .base h3 {font-size: 16px; margin: 0 0 0 0;} .base h1 {color: #19204d;} /* dark blue */ .base h2, .base h3, .base h4 {color: #69b034;} /* bright green */ .base h1, .base h2, .base h3 {font-weight: bold;} .base h1, .base h2, .base h3 {text-transform: uppercase;} .base .highlight-box p {font-style: italic;} .base p { font-size: 12px; line-height: 19px; margin: 0 0 10px 0;} blockquote{ background: url(/page/-/images/bg-blockquote.jpg) no-repeat; font: .95em/1.5em Georgia, "Times New Roman", Times, serif; margin: 15px 0 20px 35px; padding: 10px 0 0 39px;} .base ul, ol {margin: 0 0 0 10px;} .base ul {} .base ol { } .base ul li {list-style: inside disc; margin: 0 0 5px 0;} .base ol li {list-style: inside decimal;} .base li ol { } .base li ul { } /* 04 =LAYOUT ---------------------------------------------------------- */ #header {background: url(/page/-/images/header-bg.png) no-repeat -10px 0; height: 136px; width: 960px; position: relative; margin: 0 0 10px 0;} #header-rss { float:right; margin: 0 20px 0 0; } #logo {position: absolute; display: block; height: 136px; width: 300px; text-indent: -900em;} #nav {position: absolute; overflow: hidden; bottom: 5px; right: 80px;} #nav li {float: left; border-right: 1px solid #69b034; padding: 2px 0;} #nav li a {padding: 0 10px;} #nav-donate {position: absolute; bottom: 2px; right: 0;} #content {margin: 0 0 15px 0; width: 900px; } /* sidebar */ #sidebar {width: 315px; float: right; text-align: center; padding: 10px 0 0 0; display:none; } .sidebar-content-block {margin: 0 0 15px 0;} .sidebar-content-block p { text-align:left; margin:0 0 -4px 18px; } /* signup */ #quicksignup {background: #e6ecf0 url(/page/-/images/quick-bg.png) no-repeat center center; height: 51px; width: 300px; position: relative; margin: 0 auto 0 auto; -moz-border-radius: 3px; -webkit-border-radius: 3px;} #quicksignup legend {text-indent: -900em;} #splash-email {position: absolute; top: 17px; left: 15px; border: 0; font-size: 13px; height: 17px; width: 180px;} #quickSubmit {position: absolute; top: 10px; right: 0; background: none; border: 0; height: 30px; width: 95px; text-indent: -900em; cursor: pointer;} #site-search {background: #e6ecf0 url(/page/-/images/form-search.png) no-repeat center center; height: 51px; width: 300px; position: relative; margin: 0 auto 10px auto; -moz-border-radius: 3px; -webkit-border-radius: 3px;} #site-search legend {text-indent: -900em;} #search-term {position: absolute; top: 17px; left: 40px; border: 0; font-size: 13px; height: 17px; width: 155px;} #search-submit {background: pink;} #quick-email {position: absolute; top: 7px; left: 7px; border: 0; width: 178px;} #quick-submit {position: absolute; background: none; border: none; text-indent: -900em; height: 30px; width: 85px; top: 0; right: 0; cursor: pointer;} #side-action-buttons {background: #b8cad6; width: 295px; margin-left: auto; margin-right: auto; padding: 5px 0 0 0; -webkit-border-radius: 3px; -moz-border-radius: 3px;} #side-give {margin: 0 0 2px 0;} #side-pray {margin: 0 0 2px 0;} /* main content */ #main-content {padding: 20px;} body.twocol #main-content { } /* blog */ body#blog .entry, body#news .entry { margin: 0 0 40px 0; } body#blog .entry h2, body#news .entry h2 { margin: 0 0 0 0; } body#news .blog-meta, body#blog .blog-meta {font-style: italic; color: #666;} body#news .entry p, body#blog .entry p { margin: 0 0 0 0; } body#blog .entry .left { float:left; width:100px; } body#blog .entry .right { float:left; width:700px; margin:0 0 10px 10px;} .more-links { background:#e8e8e8; padding:7px 10px 1px; margin:0 0 50px 0; } p.byline { color: #999999; margin: 0 0 10px 0; } #blog .entry .more-links a.facebook, #blog.list .entry .more-links a.facebook { background: url(/page/-/images/btn-blog-socnet.png) no-repeat 0 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #blog .entry .more-links a.facebook:hover, #blog.list .entry .more-links a.facebook:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat 0 -20px; } #blog .entry .more-links a.digg, #blog.list .entry .more-links a.digg { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -21px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #blog .entry .more-links a.digg:hover, #blog.list .entry .more-links a.digg:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -21px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #blog .entry .more-links a.tweet, #blog.list .entry .more-links a.tweet { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -45px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #blog .entry .more-links a.tweet:hover, #blog.list .entry .more-links a.tweet:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -45px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #blog .entry .more-links a.technorati, #blog.list .entry .more-links a.technorati { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -67px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #blog .entry .more-links a.technorati:hover, #blog.list .entry .more-links a.technorati:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -67px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #blog .entry .more-links a.email, #blog.list .entry .more-links a.email { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -90px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #blog .entry .more-links a.email:hover, #blog.list .entry .more-links a.email:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -90px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.button-small { color:#ffffff; position:absolute; top:3px; left:7px; } /* footer */ #footer {} #footer .left {float: left;} #footer .right {float: right;} /* 05 =HOMEPAGE ---------------------------------------------------------- */ #home-wrapper { width:960px; } /* feature */ #home-feature { float:left; width:635px; position: relative; height: 367px; overflow: hidden; } /*#home-feature-info {background: url(/page/-/images/feature-nav-bg.png); height: 62px; width: 635px; position: absolute; bottom: 0; -moz-border-radius-bottomLeft: 3px; -moz-border-radius-bottomRight: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px;}*/ #feature-prev {position: absolute; display: block; text-indent: -900em; height: 62px; width: 70px; outline: 0; bottom: 0; left: 0; z-index: 10;} #feature-next {position: absolute; display: block; text-indent: -900em; height: 62px; width: 80px; outline: 0; bottom: 0; right: 0; z-index: 10;} .home-feature-entry {height: 367px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .home-feature-entry p {background: url(/page/-/images/feature-nav-bg.png); position: absolute; bottom: -10px; color: #fff; width: 455px; left: 0; height: 47px; line-height: 16px; font-style: italic; font-size: 14px; -moz-border-radius-bottomLeft: 3px; -moz-border-radius-bottomRight: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; padding: 15px 90px 0 90px;} .home-feature-link {position: absolute; display: block; height: 367px; width: 635px; text-indent: -900em; z-index: 1;} .home-feature-img {height: 367px; width: 635px; -moz-border-radius: 3px; -webkit-border-radius: 3px;} #home-side-buttons { float: left; width: 317px; margin: 0 0 0 7px; text-align: right;} #home-side-buttons img { margin: 0 0 3px 0; } #home-content { background:#ffffff; width:960px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .home-column { width: 300px; padding: 0 10px 0 10px; float: left; margin: 10px 0 10px; } #home-column-title-log{ width:300px; height:20px; border-bottom:1px solid #babcc9; margin:0 0 10px; padding:0 0 5px 0; } .log-item { margin:0 0 19px 0px; height:60px; } .log-thumbnail { float:left; width:99px; } .log-text { float:left; width:185px; padding:8px 0 0 16px; } .log-text p.log-title { font-weight:bold; line-height:13px; margin:0;} .log-text a { color:#474340; text-decoration:underline; } #home-button-log-entries { background: #69b034 no-repeat; width:115px; height:21px; -moz-border-radius: 3px; -webkit-border-radius: 3px; position:relative; } #home-button-log-entries img { position:absolute; top:5px; left:5px; } #home-column-title-involved { width:300px; height:20px; border-bottom:1px solid #babcc9; margin:0 0 10px; padding:0 0 5px 0; } .content-holder { margin:14px 0 0 0; } .content-holder p { color:#19204d; } p.action-title { font-size:15px; margin:0 0 10px 0; font-weight:bold; } p.action-text {font-size:13px; line-height:18px; margin:0; } span.action-text-sub { font-style:italic; } #home-button-positions { background: #69b034 no-repeat; width:115px; height:21px; -moz-border-radius: 3px; -webkit-border-radius: 3px; position:relative; margin:10px 0 0 0; } #home-button-positions img { position:absolute; top:4px; left:7px; } #home-button-gift { background: #69b034 no-repeat; width:126px; height:21px; -moz-border-radius: 3px; -webkit-border-radius: 3px; position:relative; margin:10px 0 0 0; } #home-button-gift img { position:absolute; top:4px; left:6px; } a.home-button-large { display: none; } a.home-button-large img{ margin:0 0 10px 0; } #home-column-title-videos { width:300px; height:20px; border-bottom:1px solid #babcc9; margin:0 0 16px; padding:0 0 5px 0; } #videos { color:#474340; } #featured-video { margin:0 0 13px 0; } #featured-video-summary a{ color:#474340; text-decoration:underline; } #featured-video-summary p { font-size:13px; line-height:15px; margin: 0 0 17px 0;} #video-small { width:300px; } .video-small-entry { float:left; width:91px; padding-right:9px; } .video-small-entry p { font-size:11px; font-style:italic; line-height:13px; margin:0 0 0px 0; } #home-side-join { width:300px; border-top: 1px solid #babcc9; margin:15px 0 0 0; padding:10px 0 0 0; display: none; } body#home #main-content {padding: 0 0 0 0;} h3.column-header {border-bottom: 1px solid #babcc9; padding: 0 0 5px 0; margin: 0 0 10px 0;} /* 06 =SUBPAGES ---------------------------------------------------------- */ /* common */ #content-header {background: #8caabd; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; padding: 10px 0 0 20px; position: relative; height: 60px;} #content-header h1 {position: absolute;} #search-cont #main-content {display:none; } #search-form {position: relative; height: 33px; width: 283px; background: url(/page/-/images/search-bg.png); display: none; } #search-form legend {display: none;} #search-field {position: absolute; border: 0; width: 156px; top: 8px; left: 30px; font-size: 14px;} #search-submit {background: none; border: 0; text-indent: -900em; height: 30px; width: 87px; position: absolute; right: 0; top: 0; cursor: pointer;} #main {-moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px;} body.twocol #main { } body.onecol #main {background: #fff;} /* positions */ #position-categories-cont .positions-ul {margin: 0; padding: 0; overflow: hidden; list-style: none;} #position-categories-cont .positions-ul li {float: left; width: 150px; margin: 0 50px 0 0; padding: 0 0 5px 0; list-style-type: none;} #position-categories-cont {border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;} .content-block {margin: 0 0 15px 0;} .position-entry {border-bottom: 1px solid #eee; margin: 20px 0 15px 0; padding: 0 0 10px 0;} p.position-urgency {color: #990000; margin: 0 0 0 0; padding: 0 0 0 0; font-size: 10px; text-transform: uppercase;} p.position-location {margin: 0 0 5px 0;} p.position-description {color: #333;} .position-entry h3 {margin: 0 0 0 0; padding: 0 0 0 0;} /* alumni */ .alumni-header {overflow: hidden; margin: 0 0 25px 0;} .alumni-header .left-column {float: left; width: 295px;} .alumni-header .right-column {float: left; width: 295px; text-align: right;} #main-content .entry .right h2 { margin:0; } #main-content .entry { margin: 0 0 30px 0; } #main-content .entry .left { float:left; width:100px; } #main-content .entry .right { float:left; width:800px; margin-left: 10px; } #main-content .entry .more-links a.facebook, #main-content.list .entry .more-links a.facebook { background: url(/page/-/images/btn-blog-socnet.png) no-repeat 0 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #main-content .entry .more-links a.facebook:hover, #main-content.list .entry .more-links a.facebook:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat 0 -20px; } #main-content .entry .more-links a.digg, #main-content.list .entry .more-links a.digg { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -21px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #main-content .entry .more-links a.digg:hover, #main-content.list .entry .more-links a.digg:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -21px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #main-content .entry .more-links a.tweet, #main-content.list .entry .more-links a.tweet { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -45px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #main-content .entry .more-links a.tweet:hover, #main-content.list .entry .more-links a.tweet:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -45px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #main-content .entry .more-links a.technorati, #main-content.list .entry .more-links a.technorati { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -67px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #main-content .entry .more-links a.technorati:hover, #main-content.list .entry .more-links a.technorati:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -67px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #main-content .entry .more-links a.email, #main-content.list .entry .more-links a.email { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -90px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #main-content .entry .more-links a.email:hover, #main-content.list .entry .more-links a.email:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -90px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} #alumni-side-block h3 {color: #19204d!important; font-size: 20px!important; margin: 0 10px 10px 10px; border-bottom: 1px solid #ccc; padding: 0 0 4px 0; text-align: left;} #alumni-side-block a {margin: 0 0 5px 0; display: block;} /* 07 =FRAMEWORK ---------------------------------------------------------- */ /* 08 =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;}