/* ---------------------------------------------------------- **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) "White": f0efe1 ---------------------------------------------------------- */ /* 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 ---------------------------------------------------------- */ html { background: #202132 url("/page/-/wrapper/img/bg.jpg") 50% 0 no-repeat; } body { font-size: 12px; color: #58595b; background: #202132 url("/page/-/wrapper/img/bg.jpg") 50% 0 no-repeat; font-family: Verdana, Helvetica, Arial, sans-serif; } #main.base { line-height: 1.4; } h1, h2, h3, h4, h5, h6 { font-weight: bold; text-transform: uppercase; color: #5f5273; margin-bottom: 10px; } .base h1 { font-size: 20px; letter-spacing: -.5px; } .base h2 { font-size: 18px; text-transform: none; } .base h3 { font-size: 14px; } .base h4 { font-size: 12px; color: #58595b; margin-bottom: 8px; } /* this just looks like bold, uppercase paragraph text */ a { text-decoration: none; font-weight: bold; } #main a:link, #main a:visited { text-decoration: underline; color: #442372; } #main a:visited { color: #6e3ab8; } a:hover, a:active, #main a:hover, #main a:active { color: #3b1e63; text-decoration: none; } #main h1 a:link, #main h1 a:visited, #main h2 a:link, #main h2 a:visited, #main h3 a:link, #main h3 a:visited { color: #5f5273; text-decoration: none; } #main h4 a:link, #main h4 a:visited, #main h4 a:hover, #main h4 a:active { color: #58595b; text-decoration: none; } #main h4 a:hover, #main h4 a:active { text-decoration: underline; } .base p, .base object { margin-bottom: 18px; } blockquote { border: 5px solid #dad8d1; background: #c2bdbe; color: #40374d; padding: 15px; width: 200px; float: right; margin: 15px; margin-right: 0; } .base ul, ol { margin: 0 0 18px 30px; } .base ul { } .base ol { } .base ul li { list-style-type: disc; } .base ol li { list-style-type: decimal; } .base li ol { margin: 0 0 0 28px; } .base li ul { margin: 0 0 0 28px; } /* 03 =LAYOUT ---------------------------------------------------------- */ #wrap { width: 960px; margin: 0 auto; } #content { padding: 10px; background: #a1a899 url("/page/-/wrapper/img/content-bg.jpg") 100% 0 no-repeat; } #main { background: #f0efe1; width: 590px; padding: 25px; float: left; } .full-width #main { width: 890px; } #support-body { position: relative; left: -6px; clear: both; font-weight: bold; text-transform: uppercase; border-top: 1px solid #c8c5c0; padding-top: 25px; margin-top: 20px; } #support-body a:link, #support-body a:visited { color: #f0efe1; width: 230px; height: 42px; padding-top: 16px; text-align: center; background: url("/page/-/wrapper/img/support-body-bg.gif") 0 0 no-repeat; display: block; text-decoration: none;} #support-body a:hover, #support-body a:active { color: #f6e3e3; } #support-body span { display: inline-block; height: 10px; width: 10px; background: url("/page/-/wrapper/img/support-body-arrow.gif") 100% 100% no-repeat; } #header { position: relative; height: 235px; overflow: hidden; } #logo h3 { background: #0e0e15; color: #f0efe1; height: 55px; margin-bottom:15px; padding-left: 15px; } #logo h3 img { vertical-align: bottom; margin-left: 3px; position: relative; top: 2px; } #quick-signup { position: absolute; right: 0; top: 129px; width: 300px; } #quick-signup h5 { color: #a49aa8; font-size: 12px; margin-bottom: 3px; } #quick-signup label, #quick-signup input.text { color: #666; font-size: 12px; } #quick-signup input { border: 1px solid #b4b4b7; background: #dddde0; padding: 3px 3px 5px 3px; } #quick-signup input.submit { background: #5f5273; border: none; font-weight: bold; text-transform: uppercase; padding: 4px 4px 5px 4px; color: #FFF; } #quick-email { width: 150px; } #quick-zip { width: 50px; } #nav { text-transform: uppercase; background: rgb(87, 86, 95); background: rgba(87, 86, 95, .25); height: 33px; border-top: 6px solid #41384f; position: absolute; left: 0; bottom: 0; font-weight: bold; width: 960px; } #nav li { float: left; padding: 7px 0 10px; } #nav li.current, #nav a:hover, #nav a:active { background: rgb(72, 65, 84); background: rgba(72, 65, 84, .7); } #nav a { color: #a49aa8; padding: 7px 15px 12px; } #sidebar { float: right; width: 290px; text-align: center; } #sidebar a { display: block; } #sidebar p { color: #9e9b98; padding-top: 35px; } #sidebar h4 { font-size: 17px; text-indent: 8px; letter-spacing: -.5px; margin-bottom: 0; } #sidebar h4 a:link, #sidebar h4 a:visited { color: #cac3cd; padding-top: 15px; position: absolute; height: 91px; width: 280px; display: block; top: 0; left: 0; } #sidebar h4 a:hover, #sidebar h4 a:active { color: #FFF; padding-top: 15px; position: absolute; height: 91px; width: 280px; display: block; top: 0; left: 0; outline: none; } #sidebar h4 span { background: url("/page/-/wrapper/img/sidebtn-arrow.gif") 100% 100% no-repeat; margin-left: 5px; height: 13px; width: 11px; display: inline-block; } #sidebar h4#support { height: 76px; width: 290px; text-align: center; margin-bottom: 10px; position: relative; } #sidebar h4#support a:link, #sidebar h4#support a:visited { color: #f0efe1; padding-top: 24px; height: 82px; width: 290px; background: none; } #sidebar h4#support a:hover, #sidebar h4#support a:active { color: #f6e3e3; } #sidebar h4#support span { background-image: url("/page/-/wrapper/img/support-arrow.gif"); } #sidebar .first { border-top: 5px solid #5c6057; } .sidebtn { width: 280px; height: 76px; border: 5px solid #5c6057; border-top: none; background: #40374d url("/page/-/wrapper/img/sidebtn-bg.gif") no-repeat; position: relative; } #side-connect { background: #7c8276 url("/page/-/wrapper/img/connect.png") 0 0 no-repeat; border: 5px solid #5c6057; margin-top: 10px; } #side-connect ul { margin-bottom: 10px; } #side-connect li { float: left; text-align: left; width: 100%; } #side-connect a:link, #side-connect a:visited { font-weight: normal; color: #f0efe1; padding: 12px 0 10px 65px; line-height: 1.2; display: block; height: 23px; } #side-connect a:hover, #side-connect a:active { color: #3e403b; } #side-connect h4 { height: 36px; margin-bottom: 10px; color: #a1a899; padding-top: 7px; background: none; } #side-connect #fb { background: url("/page/-/wrapper/img/fb.gif") 15px 3px no-repeat; } #side-connect #fl { background: url("/page/-/wrapper/img/fl.gif") 15px 3px no-repeat; } #side-connect #tw { background: url("/page/-/wrapper/img/tw.gif") 15px 3px no-repeat; } #side-connect #yt { background: url("/page/-/wrapper/img/yt.gif") 15px 3px no-repeat; } .banner-image { display: block; } .banner-caption { text-transform: uppercase; font-size: 11px; } #footer { background: rgb(37, 33, 36); background: rgba(37, 33, 36, 0.75); text-transform: uppercase; font-weight: bold; clear: both; height: 50px; padding-top: 25px; } #footer a { color: #a49aa8; padding: 10px; } #footer a:hover, #footer a:active { background: rgb(72, 65, 84); background: rgba(72, 65, 84, .7); } #footer li.first a:hover, #footer li.first a:active { background: none; } #footer img { vertical-align: bottom; position: relative; top: 2px; } #footer ul { text-align: center; } #footer li { display: inline; } #copyright { color: #a49aa8; font-size: 10px; font-weight: bold; clear: both; text-align: center; margin: 5px 0 15px; } #copyright a:link, #copyright a:visited { color: #a49aa8; text-decoration: underline; } #copyright a:hover, #copyright a:active { text-decoration: none; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #rotator-wrap { background: #989f90; text-transform: uppercase; /*height: 368px; with pager, height should be 36px taller than rotator */ font-size: 13px; margin-bottom: 20px; } #rotator-wrap a { color: #f0efe1; text-decoration: none; } #rotator { height: 332px; } #pager, #rotator-wrap p { float: right; margin: 10px 10px 0 10px; } #rotator-wrap p a { font-weight: normal; } #rotator-wrap p a:hover, #rotator-wrap p a:active { color: #41384f; } #pager a:link, #pager a:visited { color: #41384f; padding: 5px 7px 7px; font-weight: bold; } #pager a.activeSlide { color: #f0efe1; outline: none; } #pager a:hover, #pager a:active { background: #7b8175; } /* 05 =SUBPAGES ---------------------------------------------------------- */ #more-videos { float: left; margin: 30px 0 10px; display: inline; } #more-videos ul li.video-entry { list-style: none; padding: 0; float: left; margin: 0 10px 0 0; width: 85px; text-align: center; } #more-videos ul { padding: 0; margin: 0; height: 90px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ /* 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; } .fitted { cursor: pointer; } 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;}