/* ---------------------------------------------------------- **Client Name** CSS Managed by: Blue State Digital Last Update: August 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: #eee; background-image: url(/sitewide/bg.png); background-repeat: repeat-y; background-position: center top; } 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; background: #fff; } .base h1 { font-size: 2em; margin-bottom: 10px; font-weight: bold; letter-spacing: -1px; color: #2b2b2b; border-bottom: 1px solid #ff0000; padding-bottom: 10px; } .base h2 { font-size: 1.6em; margin-bottom: 10px; font-weight: bold; } .base h3 { font-size: 1.4em; } .base h4 { font-size: 1.2em; } .base p { margin-bottom: 10px; } a { color: red; text-decoration: none; } a:hover { border-bottom: 1px solid #2b2b2b; } blockquote { } .base ul, ol { } .base ul { } .base ol { } .base ul li, .base ol li { } .base li ol { } .base li ul { } /* 03 =LAYOUT ---------------------------------------------------------- */ #blog, #pages, #articles, #wrappers { width: 960px; margin: 0px auto; border-right: 1px solid #2b2b2b; border-left: 1px solid #2b2b2b; } #header { background-image: url(/sitewide/header.png); height: 248px; } #header h1 { font-size: 2em; text-indent: -9999px; } #header h1 a { display: block; height: 208px; background-color: transparent; } #header h1 a:hover { border-bottom: 0px; } #header ul#nav { position: relative; height: 41px; background-image: url(/sitewide/menu.png); height: 41px; background-position: 0px -41px; } #header ul#nav li { display: inline; position: absolute; } #header ul#nav li a { display: block; height: 41px; text-indent: -9999px; } #header ul#nav li a:hover { background-image: url(/sitewide/menu.png); border-bottom: 0px; } #header ul#nav li#navA { left: 10px; width: 112px; } #header ul#nav li#navB { left: 122px; width: 83px; } #header ul#nav li#navC { left: 210px; width: 114px; } #header ul#nav li#navD { left: 329px; width: 111px; } #header ul#nav li#navE { left: 440px; width: 255px; } #header ul#nav li#navF { left: 695px; width: 162px; } #header ul#nav li#navG { left: 857px; width: 90px; } #header ul#nav li#navA a:hover { background-position: -10px -1px; } #header ul#nav li#navB a:hover { background-position: -122px -1px; } #header ul#nav li#navC a:hover { background-position: -210px -1px; } #header ul#nav li#navD a:hover { background-position: -329px -1px; } #header ul#nav li#navE a:hover { background-position: -440px -1px; } #header ul#nav li#navF a:hover { background-position: -695px -1px; } #header ul#nav li#navG a:hover { background-position: -857px -1px; } #main #content, #main #framework { color: #666; line-height: 1.4em; margin-top: 20px; padding: 0px 20px 20px 20px; width: 600px; float: left; padding-top: 10px; } #main #sidebar { width: 300px; float: right; background-color: #2b2b2b; padding: 0px 10px 10px 10px; color: white; font-size: 0.9em; line-height: 1.4em; } .full-width #main #framework { width: 940px; } #main #sidebar input { border: 0px; padding: 5px; margin-bottom: 14px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; } #main #sidebar input#quick-firstname { width: 122px; margin-right: 5px; display: inline; float: left; } #main #sidebar input#quick-surname { width: 122px; float: right; margin-right: 0px; display: inline; } #main #sidebar input#quick-email { width: 194px; float: left; } #main #sidebar input#quick-submit { float: right; background-color: black; color: white; } #main #sidebar h2 { color: white; margin-bottom: 5px; font-weight: bold; } #main #sidebar a { color: white; border-bottom: 1px solid #000; } #main #sidebar ul { margin-bottom: 0px; } #main #sidebar ul li ul { margin-left: 15px; } #main #sidebar #quicksignup, #main #sidebar #labour { background-color: #ff0000; padding: 10px 10px 0px 10px; margin-bottom: 10px; } #main #sidebar #quicksignup h2 { text-indent: -9999px; background-image: url(/sitewide/signup.png); background-repeat: no-repeat; height: 24px; } #main #sidebar #labour h2 { text-indent: -9999px; background-image: url(/sitewide/labour.png); background-repeat: no-repeat; height: 18px; } #main #sidebar #labour { padding-bottom: 10px; margin-bottom: 0px; } #main #sidebar #action-center { padding: 10px; background-color: #666; margin-bottom: 10px; } #main #sidebar #action-center h2 { background-image: url(/sitewide/takeaction.png); background-repeat: no-repeat; text-indent: -9999px; } #main .entry { margin-bottom: 20px; border-bottom: 1px solid #2b2b2b; padding-bottom: 10px; } #main .entry .more { font-size: 0.9em; } #footer { font-size: 0.75em; color: #fff; padding: 10px 0px 10px 20px; background-color: #2b2b2b; border-top: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ /* 05 =SUBPAGES ---------------------------------------------------------- */ /* 06 =FRAMEWORK ---------------------------------------------------------- */ #framework input { border: 1px solid #666; padding: 5px; } #framework #submit { text-align: left; padding-top: 15px; } #framework .label { padding-top: 10px; } #framework .text { margin-bottom: 10px; } #framework .fieldset { clear: both; } #framework .checkbox { margin-right: 5px; } /* 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;}