/* ---------------------------------------------------------- **Alan Khazei** CSS Managed by: Blue State Digital Last Update: May 2009 TABLE OF CONTENTS 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) dark blue: #072e51 light blue: #99bad7 red: #d31733 new red: #cf1932 new blue: #054291 ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #00529b; } 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; margin-left: 10px; } */\ img{border:none;} address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { margin-left:20px; } caption, th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; font-family: Helvetica, Arial, Geneva; color: #ffffff;} p{font-family: Helvetica, Arial, Geneva;} 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 ---------------------------------------------------------- */ html, body { background: #04245c} body {font-size: 10px; background: url(http://alanforsenate.com/page/-/images/Background_BlueGlow_1600x1800.jpg) no-repeat scroll 47% 0;; } .base h1, .base h2, .base h3, .base h4 {color: #072e51;} .base h1, body#home h1, .base h2, body#home h2, .base h3, body#home h3, .base h4, body#home h4, #sidebar h2 {font-weight: bold;} .base h1, body#home h1 { font-size: 24px; margin: 0 0 20px 0; text-transform: uppercase; } .base h2, body#home h2, #sidebar h2 { font-size: 20px; margin: 0 0 15px 0; } .base h3, body#home h3 { font-size: 16px; margin: 0 0 10px 0; } .base h4, body#home h4 { font-size: 12px; margin: 0 0 10px 0; } .base p { color: #000; } .base p, body#home p {line-height: 20px; margin: 0 0 10px 0;} a { /*color:#FFFFFF;*/ color: #04245C; text-decoration: underline; } a:hover { text-underline: none; color:#657797} blockquote { } .base ul, ol { } .base ul { list-style: disc inside; margin: 20px 0 20px 20px; } .base ol { list-style: decimal inside; } .base ul li, .base ol li { list-style: disc outside; margin: 0 0 10px 0; } .base li ol { list-style: decimal inside; } .base li ul { } .base li {line-height: 18px;} img {border:0px} p, ul{font-family: Arial, Geneva; font-size: 10pt; line-height: 1.1em; } #contact{font-family: Arial, Geneva; color: #ffffff; font-size: 10pt; float:left;} #socialnet{float:right;} #paidfor{font-family: Arial, Geneva; color: #ffffff; font-size: 10pt; margin-top:50px;} label{font-size:11pt;} input{padding: 2px; margin:5px;} td{margin-bottom: 5px;} body.interior #content {background-color: #fff;} #content { padding: 0 0 0 10px; width: 950px; background-color: #fff;} body#home #content {background: #fff; background-image: none;} body#home #left {padding: 10px 0 0 0; width: 624px;} body.interior #left {margin: 10px 0 0 0;} body.onecol #content {background: #fff;} body.onecol #left {width: 940px;} /* 03 =LAYOUT ---------------------------------------------------------- */ #container{ width:958px; margin:0 auto; font-family: Verdana, Arial, Helvetica, sans-serif; } #nav{ text-indent:-9000em; } #sidebar { float:right; width:304px; background: #fff; padding: 10px; } /*-header-*/ #header{ background:url(http://alanforsenate.com/page/-/images/NavigationBanner_final.png); width:960px; height:211px; position:relative; } a#logo {display: block; text-indent: -900em; height: 175px; width: 680px; position: absolute; top: 0; left: 0; outline:0px; } #header form { height:26px; width:349px; margin: 0 0 0 10px; position: relative; top:60px; left:685px;} #header fieldset { border:none; } #header form input { position:absolute; border:0; background: none; top:32px; left:110px; } #header #splash-email { width:225px; top:0; left:3px; margin: 0 0 0 0px; font-size:10pt; padding-top:7px } #header #splash-zip { width: 100px; top:32px; left: 0px; font-size:10pt; padding-top:7px} #header ul { list-style:none; padding:0px; position:absolute; top:175px; height:36px; } #header ul li { float:left; margin:0px; } #header ul li a {display: block; height: 36px; text-indent: -900em; outline: 0; } a#nav-home{ width:125px; } a#nav-news{ width:110px; } a#nav-video{ width:112px; } a#nav-learn{ width:173px; } a#nav-events{ width:120px;} a#nav-volunteer{ width:160px; } a#nav-donate{ width:155px; } /*-end header-*/ #footer{ background:#0425c; height:60px; width:950px; font-size:12px; padding:10px 0 0 10px; color:#fff} #disclaimer{ border:#fff 1px solid; width:220px; margin: 0px 0px 10px 0; padding:3px; } #left { width:614px; float:left; padding: 10px 0 10px 0; } /*-sidebar-*/ #sidebar #content{ padding:10px; background: #072e51; width: 940px; } #sidebar #content h2 { font-size:22px; margin: 0 0 10px 0; } #sidebar #content h3 { font-size:12px; font-weight:normal; line-height:15px; } #sidebar #content h4 { font-size:12px; font-weight:normal; } a.content-navbar{ width:303px; } #content-nav{ width:303px; height:294px; background:url(http://alanforsenate.com/page/-/images/images2/sidenav.jpg); position:relative; overflow:hidden; } #content-nav ul { list-style:none; text-indent:-999em; padding:0px; margin:0px; } #content-nav ul li { margin:0px; } #content-nav ul li a { display:block; height:74px; } #events{border:#C4C4C4 1px solid; width:282px; margin: 0px 0px 10px 0; padding:10px; background:#f5f5f5; } .event{ margin: 10px 0; } #contribnew{border:#000 1px solid; width:282px; margin: 0px 0px 10px 0; padding:10px; background:#072e51;} #newsocialnet{border:#fff 1px solid; width:270px; margin: 0px 0px 0px 0px; padding:0px; background:#fff;padding-top:10px} #joinus{border:#000 1px solid; width:282px; margin: 0px 0px 0px 0; padding:10px; background:#072e51;} #citizenraiser{border:#000 1px solid; width:282px; margin: 0px 0px 0px 0; padding:10px; background:#072e51;} #yourideas{border:#000 1px solid; width:282px; margin: 0px 0px 10px 0; padding:10px; background:#072e51;} #newnav{width:284px; margin: 0px 0px 10px 0; padding:10px; background:#fff;} #connect{ border:#000 1px solid; width:282px; margin:0 0 20px 0; padding:10px; background:#072e51; } ul#icons { overflow:hidden; padding:0px; margin:5px 0 0 0; } ul#icons li{ margin:2px; padding:0px; float:left; overflow:hidden; list-style:none; } ul#icons a{ background-image:url(http://alanforsenate.com/page/-/images/images2/icons.png); display:block; width:32px; height:35px; text-indent:-999em; } #button{border:#000 1px solid; width:282px; margin: 0px 0px 10px 0; padding:10px; background:#072e51; } .event{ margin: 10px 0; } a#facebook{ } a#twitter{ background-position: -37px 0 } a#youtube{ background-position: -75px 0 } a#flickr{ background-position: -112px 0 } #sidebar a {color: #04245c; text-decoration:none} #sidebar a:hover { text-underline: none; color:#657797} /*-end sidebar-*/ /* 04 =HOMEPAGE ---------------------------------------------------------- */ body#home #left a {color: #04245c; text-decoration:none} body#home #left a:hover { text-underline: none; color:#657797} body#home h2 {font-size: 20px; text-transform:uppercase; color: #04245c} body#home {color: #000;} #feature{ width:602px; border:#C4C4C4 1px solid; margin-right:0px; overflow:hidden; padding:10px; background:#f5f5f5; } span.date{ font-style:italic; } #feature {height: 320px;} #feature-nav {margin: 0 0 20px 0; position: absolute; bottom: 20px; right: 10px; z-index: 500;} #feature-nav a {padding: 10px; text-decoration: none; margin: 0 0 0 10px; border:0px} #feature-nav a.activeSlide {background: #04245c; color: #fff!important;} #feature {position: relative;} #feature img {margin: 0 0 10px 0; border:0px} .feature-desc {width: 400px;} #news-events{ } #news-sidebar { border:#C4C4C4 1px solid; width: 286px; float:left; margin:10px 10px 20px 0; padding:10px; background:#f5f5f5; } .news-item { margin: 10px 0 0 0; } #news-sidebar p.entry-date { font-size:12px; font-style:italic; padding:5px 0; } #news-sidebar p.entry-title { } #news-sidebar p.entry-source { margin:0 0 5px 0; } #news-sidebar p.entry-summary { } #news-sidebar p.read-more { margin:0 0 10px 0; } .news-home-entry {margin: 0 0 20px 0;} #news-special { border:#C4C4C4 1px solid; width: 283px; float:left; margin:10px 0 20px 0; padding:10px; background:#f5f5f5; float:right; } #home-video { border:#000 1px solid; width: 284px; float:left; margin:10px 0 20px 0; padding:10px; background:#072e51; } #home-video .video-embed { margin-top:10px; } #home-video p.vid-caption{ font-family:helvetica; font-size:15px; margin:10px 0; padding:0 0 10px 0;} li.list-events { list-style:none;font-family:helvetica,arial,geneva; font-size:12px; font-weight:normal; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0 0 10px 0; } /* 05 =SUBPAGES ---------------------------------------------------------- */ .credits { font-size:12px; line-height:normal; text-transform:uppercase; padding-bottom:10px; color:#000000} /*.entry {padding-bottom:20px}*/ span.left{ padding:0; } span.right{ padding:0; } /* news */ #news-entries-container .entry {margin: 0 0 35px 0;} #news-entries-container h2 {margin: 0 0 5px 0;} #news-entries-container .entry-date {font-size: 11px; margin: 0 0 0 0;} #news-entries-container .entry-source {color: #999; font-style: italic;} #news-entries-container .entry-summary {} #news-entries-container .read-more {} #news-entries-container p {margin: 0 0 5px 0; padding: 0 0 0 0;} body#home #news-entries-container .entry {margin: 0 0 20px 0;} body#home #news-entries-container h2, body#home #news-entries-container .entry-date, body#home #news-entries-container .read-more, body#home #news-entries-container .entry-summary {margin: 0; padding: 0;} /* 06 =FRAMEWORK ---------------------------------------------------------- */ .buttonize { background: #FFD519 url(splash/button-bg.png) repeat-x bottom left; border: none; padding: 5px 6px 3px 6px; text-transform: uppercase; font-size: 18px; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: black; text-decoration: none;} .buttonize:hover { cursor: pointer; } .buttonize span { font-size: 14px; } .interior #signup label { color: #000000; font-family: Helvetica, Arial, Geneva; font-size: 0.9em; } #content #signup input {margin-bottom:10px;} /* 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;}