/* ---------------------------------------------------------- **HBO By the People: The Election of Barack Obama** 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: #fff; background: #000; height: 100%; } 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 { color: #eee; font-family: Arial, Helvetica, sans-serif; height: 100%; width: 100%; } #home { background: #000 url(/page/-/images/interior-bg.jpg) center top no-repeat; } #stories { background: #000 url(/page/-/images/home-bg.jpg) center top no-repeat fixed; } #interior, #pages, #videos, #oops {background: #000 url(/page/-/images/interior-bg.jpg) center top no-repeat;} .base { font-size: 12px; line-height: 16px; } .base h1 { } .base h2 { font-size: 18px; font-weight: bold; letter-spacing: 1px; margin: 20px 0; text-transform: uppercase; } .base h3 { font-size: 18px; font-weight: bold; line-height: 20px; margin-bottom: 2px; } .base h4 { font-size: 14px; font-weight: bold; line-height: 18px; margin-bottom: 2px; } .base p { margin: 0 0 16px; } a { color: #85a3d5; text-decoration: none; } a:hover { color: #fff; } blockquote { font-style: italic; margin: 16px; } .base ul, ol { margin: 0 0 16px 16px; padding: 0 0 0 16px; } .base ul { } .base ol { } .base ul li { list-style: disc; } .base ol li { list-style: decimal; } .base li ol { } .base li ul { } small { text-shadow: none; } /* 03 =LAYOUT ---------------------------------------------------------- */ #container { margin: 0 auto; width: 960px; } #masthead { /*overflow: hidden;*/ padding: 25px 0 30px; width: 960px; text-shadow: 1px -1px -1px #000; } #masthead h1 { float: left; margin: 5px 0 35px 11px; } #masthead h1 a { background: url(/page/-/images/by-the-people.png) left top no-repeat; display: block; width: 300px; height: 84px; overflow: hidden; text-indent: -9999px; } #quick-signup { margin: 0 10px 0 0; padding: 0; text-align: right; } #quick-signup legend { display: none; } #quick-signup #email { background: none; border: 1px solid #555; color: #bbb; font-size: 12px; padding: 3px 4px; width: 216px; } #quick-signup #submit-bt { margin-top: 0; vertical-align: top; } #site-nav { float: right; font-size: 13px; margin: 20px 6px 0 0; } #site-nav li {/* float: left;*/ padding: 0 5px; text-transform: uppercase; } #site-nav li li { margin-left: 0; margin-bottom: 10px; text-transform: none; } /*** SUPER FISH ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { background: url(/page/-/images/content-bg.png); left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } #main { clear: both; overflow: hidden; width: 960px; } #content { /*background: url(/page/-/images/content-bg.png);*/ float: left; overflow: hidden; width: 640px; text-shadow: -1px 0px -1px #000; padding: 10px 0 40px; } #home #content { padding-top: 1px; } .column { float: left; margin: 0px; width: 300px; } .base .section-title { margin-left: 10px; } .entry { margin-bottom: 10px; padding: 10px 10px 20px; } .date-byline { color: #666666; /*font-style: italic;*/ } .entry .date-byline { margin-bottom: 0; } .base .more { font-size: 14px; margin: 0 10px; } .more a { background: url(/page/-/images/more.gif) right center no-repeat; padding-right: 18px; } .hidden { display: none; } #sidebar { /*background: url(/page/-/images/content-bg.png);*/ float: right; font-size: 12px; line-height: 16px; margin-top: 153px; padding: 1px 0 15px 0; width: 319px; text-shadow: 1px -1px -1px #000; } #interior #sidebar, #pages #sidebar, #videos #sidebar, #oops #sidebar { margin-top: 220px; } #sidebar h2 { font-size: 18px; text-align: center; text-transform: uppercase; margin: 20px 0; } #sidebar ul { margin: 0 10px; } #sidebar .call-to-action li { background: #85a3d5; font-size: 18px; margin-bottom: 1px; padding: 15px 10px; text-align: center; text-transform: uppercase; } #sidebar .call-to-action li a { color: #000; } #sidebar .call-to-action li a:hover { color: #fff; } #sidebar ul { margin-bottom: 40px; } #sidebar li { text-align: center; margin-bottom: 10px; } .vote-bt a { background: url(/page/-/images/vote-bt.gif) center top no-repeat; display: block; height: 60px; overflow: hidden; text-indent: -9999px; } .vote-bt a:hover { background: url(/page/-/images/vote-bt.gif) center -60px no-repeat; } .share-bt a { background: url(/page/-/images/share-bt.gif) center top no-repeat; display: block; height: 60px; overflow: hidden; text-indent: -9999px; } .share-bt a:hover { background: url(/page/-/images/share-bt.gif) center -60px no-repeat; } .shared-bt a { background: url(/page/-/images/shared-bt.gif) center top no-repeat; display: block; height: 60px; overflow: hidden; text-indent: -9999px; } .shared-bt a:hover { background: url(/page/-/images/shared-bt.gif) center -60px no-repeat; } .facebook, .twitter, .youtube { float: left; margin-bottom: 20px; background: url(/page/-/images/button-bg.gif) left top repeat-x; } .facebook a, .twitter a, .youtube a { display: block; padding: 75px 0 0 0; text-align: center; width: 99px; } .facebook { margin-left: 10px; } .facebook, .twitter { margin-right: 1px; } .facebook a { background: url(/page/-/images/facebook.gif) center 20px no-repeat; } .twitter a { background: url(/page/-/images/twitter.gif) center 20px no-repeat; } .youtube a { background: url(/page/-/images/youtube.gif) center 20px no-repeat; } .hbo { margin: 10px 0 20px 9px; } .hbo a { background: url(/page/-/images/hbo-bt.gif) left top no-repeat; clear: both; display: block; overflow: hidden; text-indent: -9999px; width: 310px; height: 90px; } .hbo a:hover { background: url(/page/-/images/hbo-bt.gif) left -92px no-repeat; } #youtube-video-gallery div.youtube-video object { float: left; } #youtube-video-gallery div.youtube-video ul { width: 300px; float: right; } #youtube-video-gallery div.youtube-video ul li { list-style-type: none; float: right;} #youtube-video-gallery div.youtube-video ul li p { width: 200px; } .fb-fanbox { margin-left: 15px; } .fb-fanbox .facebook-link { margin-top: 10px; } #footer { background: url(/page/-/images/film-credits.png) center top no-repeat; color: #666666; font-size: 12px; margin: 40px 0 0 0; padding: 130px 0 60px; text-align: center; text-shadow: 1px -1px -1px #000; } #footer p { margin-bottom: 16px; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home #content { padding-top: 0; } #air-date { background: url(/page/-/images/content-bg.png); font-size: 18px; font-weight: bold; letter-spacing: 1px; margin: 0 320px 1px 0; /*padding: 10px;*/ text-transform: uppercase; } #counter, #the-moment { margin: 0 0 1px 0; overflow: hidden; width: 640px; } #counter { height: 136px; margin: 0 0 1px; } #the-moment { background: url(/page/-/images/the-moment-bg.png); color: #000; font-size: 14px; line-height: 17px; padding: 20px 0; } #the-moment .blurb { float: left; margin: 0 10px 0 11px; width: 299px; } #the-moment .blurb h2 { font-size: 13px; font-weight: bold; margin: 3px 0 0 0; text-transform: none; } #the-moment .call-to-action { float: left; line-height: 21px; margin: 0 10px; width: 300px; } #the-moment .call-to-action h3 { font-size: 18px; margin: 0 0 10px 0; padding: 0; text-align: center; text-transform: uppercase; } #the-moment .call-to-action li { background: #000 url(/page/-/images/button-bg.gif) left top repeat-x; font-size: 18px; margin-bottom: 1px; padding: 13px 10px; text-align: center; text-transform: uppercase; } #the-moment .call-to-action li a:hover { color: #fff; } #feature { background: #000; overflow: hidden; margin: 0 10px; padding: 1px 0 15px 0; width: 640px; } #feature h3 { color: #85a3d5; margin-bottom: 3px; } #feature .date-byline { margin-bottom: 16px; } #feature .more { margin-left: 0; } .one-year-ago { margin-right: 20px; } .base .one-year-ago p { margin-bottom: 0; } .one-year-ago .date-byline { /*text-align: center;*/ } #poll-data { background: url(/page/-/images/one-year-ago-bg.gif) left top no-repeat; width: 300px; height: 160px; } .obama-biden, .mccain-palin { color: #85a3d5; float: left; font-size: 42px; line-height: 42px; padding: 70px 0 0 0; text-align: center; width: 150px; } .campaign-highlights img { margin: 0 0 10px 0; } .campaign-highlights { margin-left: 20px; } .external-link { background: url(/page/-/images/video-link.gif) right center no-repeat; padding-right: 20px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ /*#interior #content, #pages #content { background: url(/page/-/images/interior-bg.png); }*/ #interior .base .entry, #pages .base .entry { font-size: 14px; line-height: 18px; padding-right: 40px; } #interior .base .entry h3 { color: #85a3d5; font-size: 24px; line-height: 30px; margin-bottom: 0; text-transform: none; } #pages .base .entry h2 { } .base .previous { float: left; } .base .next { float: right; } /*=HIGHLIGHTS GALLERY*/ .video-list { margin-bottom: 20px; } #video-gallery h3 { font-size: 14px; font-weight: bold; margin: 9px 0 0 0; } #video-gallery .entry { background: url(/page/-/images/video.png) left 10px no-repeat; margin: 0 10px 5px 10px; overflow: hidden; padding: 1px 0 1px 78px; } #video-gallery .pagination { margin-left: 10px; } /*=VIDEO*/ #clips { background: url(/page/-/images/clips-bg.jpg) center top no-repeat; } #clips #content { background: none; width: 960px; padding-bottom: 0; } .base #video-clips { background: #000 url(/page/-/images/clips-tabs-bg.gif) center top no-repeat; margin: 0; padding: 0 92px; overflow: hidden; } .base #video-clips li { background: ; float: left; display: inline; padding: 20px 0 5px; text-align: center; width: 192px; } .base #video-clips img { margin-bottom: 8px; } .music-credit { color: #777; text-align: center; } .clip-container { text-align: center; height: 400px; } .base-bar { background: #000 url(/page/-/images/clips-tabs-bg.gif) center top no-repeat; margin: 5px 0 0 0; padding: 40px 0 0 0; text-align: center; } .ui-tabs-selected { background: url(/page/-/images/selected-clip.gif) center top no-repeat; } .ui-tabs { padding: .2em; zoom: 1; } .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; } .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; } .ui-tabs .ui-tabs-hide { display: none !important; } /*=BLOG*/ .blog-feature p { padding-right: 10px; } /*=STORIES*/ #stories { background: url(/page/-/images/clips-bg.jpg) center top no-repeat; } #stories #content { background: none; width: 960px; overflow: hidden; } #stories h3 { color: #85a3d5; } .stories-container { background: url(/page/-/images/divider.gif) center top repeat-y; width: 960px; margin: 10px 0 0 0; padding: 0 0 20px 0; overflow: hidden; } .stories-header { background: url(/page/-/images/the-moment-bg.png); color: #000; padding: 15px 0 20px; overflow: hidden; text-shadow: none; width: 960px; } .base .stories-header h2 { margin: 5px 10px; } .stories-header .blurb { float: left; font-size: 14px; line-height: 17px; margin: 0 10px; width: 450px; } .base .button { background: #000 url(/page/-/images/button-bg.gif) left top repeat-x; float: right; font-size: 18px; margin: 0 10px 0 0; padding: 15px 0; text-align: center; text-transform: uppercase; letter-spacing: 1px; width: 450px; } .story-pictures { float: left; width: 470px; } .story-pictures img { margin: 0 0 5px 0; } .story-words { float: right; width: 470px; } .story { border-bottom: 1px solid #262626; margin: 0 10px; padding: 20px 0 10px; } /*=404*/ #oops .blurb { font-size: 14px; line-height: 18px; } /*=DISQUS COMMENTS*/ #disqus_thread { margin-top: 60px; } .base #disqus_thread #dsq-content h3 { } .dsq-badge-registered { text-shadow: none; } /* 07 =FRAMEWORK ---------------------------------------------------------- */ .forms { font-size: 14px; line-height: 18px; padding: 10px 40px 10px 10px; } .forms #signup { width: 590px; } .forms td { padding-top: 5px; padding-bottom: 5px; text-align: left; vertical-align: top; } .forms #email, .forms #firstname, .forms #lastname, .forms #to, .forms #from_email, .forms #from_firstname, .forms #from_lastname, .forms #recaptcha_response_field { background: none; border: 1px solid #555; color: #738fbe; font-size: 14px; padding: 4px 5px; text-shadow: 1px -1px -1px #000; } #framework .checkbox { margin: 5px 5px 0 0; } body .forms #invitationpage .help { display: none; } .forms #signupfooter { font-size: 11px; line-height: 14px; } #event-submit-bt, .forms #submit .submit, .forms #invitationpage #submit_button, #framework .submit, #framework #date-filter { background: #809fd3 url(/page/-/images/input-bt-bg.gif) left bottom repeat-x; border: none; font-size: 12px; font-weight: bold; color: #000; padding: 5px; } #framework .input input { margin: 10px 5px 10px 0; } #framework .input label { margin: 10px 0; } #framework .label { margin: 5px 0; } #interior #contact_importer_dialog_c { color: #333; } #interior #contact_importer_dialog_c input { font-size: 14px; margin-right: 5px; padding: 4px; margin-bottom: 10px; } #interior #contact_importer_dialog_c label { margin-right: 5px; } .forms #contact_importer_button_container #contact_importer_button { margin: 6px 0 4px 0; } .forms #invitationpage .label { text-align: left; } #framework #SKIN .odd { background: #333; } /*=EVENTS*/ .forms #SKIN .basic #control_set { background: none; font-size: 18px; padding: 0; } .forms .basic #control_set h1 { color: #eee; font-size: 18px; font-weight: bold; letter-spacing: 1px; margin: 20px 0; text-transform: uppercase; } #framework #SKIN #account_actions a, .forms #SKIN p, .forms #SKIN td, .forms #SKIN th, .forms #SKIN label, .forms #SKIN div { font-size: 14px; } #framework #SKIN .main { border-color: #444; margin: 10px 0; } #framework #filters h3, #framework #count { color: #eee; } #framework #filters h3 { padding: 5px 0; } #framework #SKIN .header, #framework #SKIN #sectionheader { border: none; color: #eee; } #framework #SKIN #sectionheader { color: #eee; font-size: 18px; font-weight: bold; letter-spacing: 1px; margin: 20px 0 5px; padding: 0; text-transform: uppercase; } #venue_zip, #framework #event_search_zip, #framework .text, #framework textarea { background: none; border: 1px solid #555; color: #738fbe; font-size: 14px; padding: 4px 5px; text-shadow: 1px -1px -1px #000; } /*=MY EVENTS*/ #framework #SKIN #myevents table td { padding: 5px; } #framework #SKIN .typedesc { margin-top: 20px; } #framework #SKIN .typedesc th { font-weight: bold; } /*=EVENT DETAILS*/ #framework #SKIN .even, #framework #SKIN #detailtable { background: none; } #framework #SKIN #detailtable { border-color: #85a3d5; border-left: none; border-right: none; margin: 10px 0; } #framework #SKIN #detailtable th, #framework #SKIN #detailtable td { padding: 5px 10px; } #framework #attendees td { padding: 5px; } #framework #attendees th { padding: 10px 0; } #framework .button a { text-transform: uppercase; } #framework #SKIN .dayheader { border: none; color: #eee; margin-top: 20px; padding: 0; } #framework #SKIN .table_container, #framework #SKIN .day_attendee_count { padding: 5px 0; } /*=FIND AN EVENT*/ #framework ul#event_order { border-color: #85a3d5; } #framework ul#event_order li { background: none; } #framework ul#event_order li a { color: #85a3d5; } #framework ul#event_order li.active a { background: #85a3d5; border-color: #85a3d5; color: #000; text-shadow: none; } #framework #loginform .logintitle, #framework #signupform .signuptitle { color: #eee; padding: 5px 0; margin: 0; } #framework #loginform table, #framework #signupform table { background: none; border-color: #444; margin: 0; width: 100%; } #framework #loginform th, #framework #signupform th { padding: 5px; text-align: left; } #framework #loginform table .loginforgotlink { color: #85a3d5; text-decoration: none; } #framework #loginform td, #framework #signupform td { padding: 10px 5px; } #framework #calendar { background: none; margin-bottom: 10px; padding: 0; } #framework #calendar-nav .yui-calcontainer { padding: 10px 0; } #framework #calendar-nav .yui-calendar .calnavleft { left: -2px; } #framework #calendar-nav .yui-calendar .calnavright { right: -4px; } #framework #date #date-filter { margin-top: 5px; } #framework #calendar-nav .yui-calendar .calweekdaycell { color: #eee; } #framework .yui-calendar .calbody { color: #333; text-shadow: none; } #framework .yui-calendar .calheader { color: #eee; } #framework #event_results { margin-left: 220px; } #framework .noevents .suggestion { display: none; } /* 07 =COLORBOX ---------------------------------------------------------- */ /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:#000;} #colorbox{} #cboxContent{margin-top:32px;} #cboxLoadedContent{background:#000; } #cboxLoadingGraphic{background:url(/page/-/images/loading.gif) center center no-repeat;} #cboxLoadingOverlay{background:#000;} #cboxTitle{ background: #000; position:absolute; top:-22px; left:0; padding: 4px 10px; color:#fff; text-shadow: 1px -1px -1px #000; display: none; } #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:25px; height:25px; position:absolute; top:-25px; background:url(/page/-/images/controls.gif) 0 0 no-repeat;} #cboxPrevious{background-position:0px 0px; right:44px;} #cboxPrevious.hover{background-position:0px -25px;} #cboxNext{background-position:-25px 0px; right:22px;} #cboxNext.hover{background-position:-25px -25px;} #cboxClose{background-position:-50px 0px; right:0;} #cboxClose.hover{background-position:-50px -25px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;} .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;} /* 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;}