/* ---------------------------------------------------------- Sundance Festival 2010 CSS Managed by: Blue State Digital Last Update: July 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) Red: #FF0050 Orange: #FF6435 White: #CCCCCC Blue: #008AB9 Green: #97C942 ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,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: #484848; } .base h1 { color: #484848; font: 28px/1.25em "Calvert MT", Cambria, Georgia, Serif; margin-bottom: 15px;} .base h2 { color: #484848; font-size: 22px; line-height: 1.25em; font-weight: bold; margin: 15px 0 0;} .base h3 { color: #484848; font-size: 18.5px; line-height: 1.25em; font-weight: bold; margin: 15px 0 0; text-transform: uppercase;} .base h4 { color: #484848; font-size: 13px; line-height: 1.2em; font-weight: bold; margin: 10px 0 0;} .base h2 + p { margin-top: 0em; } .base h3 + p { margin-top: 0em; } .base p { color: #484848; font-size: 12px; line-height: 1.5em; margin: 1.2em 0; } a { color: #3C70A4; } a:link {} a:visited {} a:active {} a:hover { color: #2C537A; } blockquote { color: #ccc; font-size: 1em; line-height: 1.5em; padding: 1em; background: #333; border: 1px solid #484848; margin: 1.2em 3em; } blockquote > p:first-child {margin-top: 0;} blockquote > p:last-child {margin-bottom: 0;} .base ul, .base ol { font-size: 1em; line-height: 1.5em; margin-top: 0.8em; margin-bottom: 0.4em; margin-left: 20px; } .base ul { } .base ol { } .base ul li, .base ol li { background: url(/page/-/wrapper/img/bullet.gif) 0 7px no-repeat; padding-left: 13px; margin: .3em 0; } .base li ol { } .base li ul { } .base td { vertical-align: top; } .base pre { font-family: monospace; font-size: 1.0em; } .base a { color: #484848; font-weight: bold; } .base a:hover { text-decoration: none;} .pageContent .listdate {color: #d9d9d9;} /* 03 =LAYOUT ---------------------------------------------------------- */ html { font-size: 100%; background: #fff; } /* Somehow Fixes IE */ body { height: 100%;font-size: 62.5%; font-family: Arial, Helvetica, Geneva, sans-serif; color: #000; } #container { margin: 0px auto; width: 950px; font-size: 12px; } #body { min-height: 500px; background: url(/page/-/2010/images/bg-content.png) 0 0 repeat-y; position: relative;} #content { width: 400px; height:380px; float: left; font-size: 12px; line-height: 1.7em; position: relative; color: #484848;} #left { float: left; width: 600px;} #side { width: 350px; float: right; } body.onecol #body { background-color: #d9d9d9; background-image: none;} body.onecol #content {width: 920px; padding: 15px; margin: 0;} body.festival_history #content { padding: 0; } body.onecol #side {display: none} body.onecol #container .pageContent {margin-right: 20px;} body.onecol.videos #body { background: none; } body.onecol.videos #content { padding: 15px 0;} .pageContent h5 {font-size: 1.0em; margin-bottom: 1.2em; font-weight: bold;} .pageContent h6 {font-size: 0.8em; margin-bottom: 1.2em; font-weight: bold;} .base h1 + .base p {margin-top: .5em;} /** HEADER **/ #header { height: 135px; position: relative; background: url(/page/-/2010/images/header/01.jpg) no-repeat; } #logo {position: absolute; top: 10px; left: 140px; width: 675px; height: 60px; display: block; text-indent: -9999px; overflow: hidden;} #logo a {display: block; height: 130px; width: 710px;} #logo h2 {text-indent: -100em; overflow: hidden;} #supportSundance {position: absolute; top: 25px; left: 720px; background: transparent;} #supportSundance a {display: block; width: 215px; height: 20px; text-indent: -1000em; overflow: hidden;} #quickSignup {position: absolute; width: 172px; left: 745px; top: 75px;} #quickSignup h3 { color: #ccc; font-size: 20px; text-transform: uppercase; overflow: hidden; margin-bottom: 2px; text-align: right;} #quickSignupEmail {width: 125px; margin-right: 5px; border: 1px solid #d9d9d9;} #quickSignup label { display: none; } a.donate { position: absolute; left: 858px; top: 10px; font-size: 24px; text-transform: uppercase; color: #ccc; text-decoration: none;} #nav {width: 950px; height: 35px; position: relative; border-bottom: 2px solid #fff;} #nav li {display: inline; position: absolute;} #nav li a {display: block; height: 35px; text-indent: -9999px; overflow: hidden; text-decoration: none; color: #fff;} #nav li.festival_info {left: 17px; width: 110px;} #nav li.festival_info a:hover { background-position: -17px -35px; } #nav li.box_office {left: 165px; width: 64px;} #nav li.box_office a:hover {background-position: -165px -35px;} #nav li.film_events {left: 262px; width: 115px;} #nav li.film_events a:hover {background-position: -262px -35px;} #nav li.press_industry {left: 410px; width: 147px;} #nav li.press_industry a:hover {background-position: -410px -35px;} #nav li.festival_history {left: 583px; width: 71px; display: none;} #nav li.festival_history a {background-position: -583px -35px;} #nav li.rss {left: 741px; width: 28px; } #nav li.rss a:hover {background-position: -741px -34px;} #nav li.store {left: 778px; width: 36px;} #nav li.store a:hover {background-position: -778px -34px;} #nav li.lodging {left: 821px; width: 48px;} #nav li.lodging a:hover {background-position: -821px -34px;} #nav li.search {left: 876px; width: 46px;} #nav li.search a:hover {background-position: -876px -34px;} /** RED & DEFAULT SKIN **/ body, body.red { background: #fff url(/page/-/2010/images/red/bg-body.jpg) no-repeat fixed center top; } #container, body.red #container { background: url(/page/-/2010/images/red/bg-container.jpg) repeat-y; } #header, body.red #header { background: url(/page/-/2010/images/red/header.jpg) no-repeat; } #nav, body.red #nav { background-image: url(/page/-/2010/images/red/navigation.png) } #nav li a:hover, body.red #nav li a:hover { background-image: url(/page/-/2010/images/red/navigation.png); } .base h1, body.red h1 { color: #FF0050; } /** ORANGE SKIN **/ body.orange { background: #000 url(/page/-/2010/images/orange/bg-body.jpg) no-repeat fixed center top; } body.orange #container { background: #000 url(/page/-/2010/images/orange/bg-container.jpg) repeat-y center top; } body.orange #header { background: url(/page/-/2010/images/orange/header.jpg) no-repeat; } body.orange #nav { background-image: url(/page/-/2010/images/orange/navigation.png); } body.orange #nav li a:hover { background-image: url(/page/-/2010/images/orange/navigation.png); } body.orange .base h1 { color: #FF6435; } /** GREEN SKIN **/ body.green { background: #000 url(/page/-/2010/images/green/bg-body.jpg) no-repeat fixed center top; } body.green #container { background: url(/page/-/2010/images/green/bg-container.jpg) repeat-y; } body.green #header { background: url(/page/-/2010/images/green/header.jpg) no-repeat; } body.green #nav { background-image: url(/page/-/2010/images/green/navigation.png); } body.green #nav li a:hover { background-image: url(/page/-/2010/images/green/navigation.png); } body.green .base h1 { color: #484848; } /** WHITE SKIN **/ body.white { background: #000 url(/page/-/2010/images/white/bg-body.jpg) no-repeat fixed center top; } body.white #container { background: url(/page/-/2010/images/white/bg-container.jpg) repeat-y; } body.white #header { background: url(/page/-/2010/images/white/header.jpg) no-repeat; } body.white #nav { background-image: url(/page/-/2010/images/white/navigation.png); } body.white #nav li a:hover { background-image: url(/page/-/2010/images/white/navigation.png); } body.white .base h1 { color: #484848; } /** BLUE SKIN **/ body.blue { background: #000 url(/page/-/2010/images/blue/bg-body.jpg) no-repeat fixed top center; } body.blue #container { background: url(/page/-/2010/images/blue/bg-container.jpg) repeat-y; } body.blue #header { background: url(/page/-/2010/images/blue/header.jpg) no-repeat; } body.blue #nav { background: #000 url(/page/-/2010/images/blue/navigation.png) no-repeat; } body.blue #nav li a:hover { background-image: url(/page/-/2010/images/blue/navigation.png); } body.blue .base h1 { color: #008AB9; } #promos{ width: 305px; color: #fff; background: #4c98b5; opacity: .75; float: right; margin-bottom: 15px; font-size: 32px; line-height: 1em;text-transform: uppercase; padding: 12px 10px 8px; cursor: pointer;} #promos a { text-decoration: none; } #sideButtons {position: relative; height: 195px; margin-bottom: 15px; float: right; width: 100%;} body.home #sideButtons { float: none; } #sideButtons .sideButton {position: absolute; width: 180px; height: 180px; background: url(/page/-/wrapper/img/sidebutton-blank.png);} body.home .sideButton { border: 1px solid #999; } #sideButtons #sideButtonA {top: 0; left: -10px;} #sideButtons #sideButtonB {top: 15px; left: 190px;} body.articles #sideButtons {position: relative; height: 450px; margin-top: 10px; } body.articles #sideButtons #sideButtonA {top: 48px; left: -20px; z-index: 1000;} body.articles #sideButtons #sideButtonB {top: 15px; left: 150px; z-index: 999;} /** SEARCH **/ #side-search { background: #484848; padding: 15px; margin: 15px 0;} input#keywords {width: 260px; padding: 2px 5px; margin-right: 5px;} /* FOOTER ----------------------------------------------- */ #footer p { font-size: 12px; text-transform: uppercase; font-family: Cambria, Georgia, serif; margin-bottom: .3em;} #footer img {margin-right: 20px; vertical-align: top;} #footer.news { width: 93%; margin-top: 25px; position: absolute; bottom: 0;} #footer img {margin-right: 35px; vertical-align: top; } #footer img.last { margin-right: 0; } #footer.pages img { margin-right: 6px; } #footerLinks { background: #484848; padding: 8px 20px; color: #d9d9d9; font-size: 12px;} #footerLinks a {color: #d9d9d9;} #footerLinks .copyright {margin-right: 20px;} #footerLinks .links a {margin-right: 8px;} #footerSponsors {padding: 20px; color: #d9d9d9;} #footerSponsors h4 { font-size: 13px; margin-bottom: 10px;} #footerSponsors ul li { display: inline; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ body.home #body { background: none; } body.home #content { margin: 0; } /** JUMBOTRON **/ #jumbotronContainer { position: relative;} #homeJumbotron { height: 360px; width: 517px; border: 1px solid #999; } #jumbotronShow { height: 430px; width: 517px; background: #d9d9d9; overflow: hidden; } #jumbotronShow .hovered { cursor: pointer; } .jumbotronOverlay { display: none; position: absolute; width: 550px; height: 430px; } .jumbotronOverlay a { display: none; width: 517px; height: 430px; } .jumbotronImage { width: 517px;} #jumbotronNav, #jumbotronPager { position: absolute; top: 360px; z-index: 100; height: 21px;} #jumbotronNav { background: url(/page/-/2010/images/jumbotron-bottom.png) no-repeat bottom left; width: 110px; padding-left: 10px; left: 1px; } #jumbotronNav ul { display: inline; } #jumbotronNav li { display: inline; float: left; } #jumbotronNav a { width: 20px; display: block; color: #d9d9d9; text-decoration: none; text-align: center; margin: 0px 2px; } #jumbotronNav a:hover, #jumbotronPager a.activeSlide { background: #97C942; color: #323738; } #jumbotronPager { background: #484848; width: 395px; left: 121px; padding: 0; text-align: right; line-height: 21px; overflow: hidden; } #jumbotronPager a { width: 20px; color: #d9d9d9; text-decoration: none; text-align: center; padding: 4px 6px; margin: 0px 2px; } .jumbotronText { padding: 25px 15px 25px 15px; } .jumbotronText p { font: 12px/1.3em "Lucida Grande", "Lucida Sans Unicode", Verdana, Geneva, Helvetica, Arial, sans-serif; color: #333; } /** TOP STORY BLOCKS **/ #homeTopStory {position: relative; width: 606px; height: 258px; background: url(/page/-/wrapper/img/bg-topstory.png) -3px 0 no-repeat; float: left;} #homeTopStory .ui-tabs-nav {position: absolute; top: 225px; width: 600px; text-align: left; margin-left: 10px;} #homeTopStory .ui-tabs-nav li {display:inline;} #homeTopStory .ui-tabs-nav a {color: #fff; font-size: 16px; text-decoration: none; padding: 1px 3px; margin-right: 3px;} #homeTopStory .ui-tabs-nav a:hover {} #homeTopStory .ui-tabs-nav li.ui-tabs-selected a {color: #3D372D; background: #fff;} #homeTopStory .ui-tabs-hide {display: none;} #homeTopStory .ui-tabs-panel {width: 600px;} /** FEATURE SIDE **/ .featureSide {position: relative;} .featureSide .featureOverlay {position: absolute; width: 600px; height: 220px; top: 0; left: 0; z-index: 100;} .featureSide .featureOverlay a {display: block; width: 600px; height: 220px; background: url(/page/-/wrapper/img/spacer.gif)} .featureSide .featureLeft {width: 270px; float: left; margin: 10px 0 0 0;} .featureSide .featureRight {float: right;} .featureSide .featureTitle {font-size: 13px; color: #fff; margin-bottom: 1.2em; background: #000; text-align: center; padding: 3px 10px; font-weight: normal; text-transform: uppercase;} .featureSide .featureText {font-size: 11px; line-height: 20px; color: #fff; margin-left: 15px; margin-right: 15px; padding: 15px 10px 10px 10px; text-align: justify; background: url(/page/-/wrapper/img/feature-divider.png) repeat-x;} .featureSide .featureMore {text-align: center; margin: -5px 15px; background: url(/page/-/wrapper/img/feature-divider.png) repeat-x 0 13px;} #pullquote { width: 550px; background: #484848; margin-top: 15px; color: #d9d9d9; position: relative; left: 15px;} #pullquote.hovered { cursor: pointer;} #pullquote .text { float: left; font: 15px/1.5em "Lucida Grande", Section, Helvetica, sans-serif; text-transform: uppercase; width: 400px; margin: 15px 0 15px 15px; display: inline;} #pullquote img { float: right; width: 100px; height: 100px; position: relative; margin: 20px 0; border: 2px solid #999999; } #pullquote p.byline { text-align: right; font-size: .75em;} #storyPreview { clear: both; margin-top: 15px; font: 10px/1.5em Arial, Helvetica, Geneva, sans-serif; position: relative; left: 15px;} #storyPreview .preview { background: #ff6435; width: 230px; padding: 15px; color: #000; float: left; cursor: pointer; } #storyPreview .preview.left { background: #ff0050; margin-right: 30px;} #storyPreview .preview h3 { margin: 10px 0 5px; text-transform: uppercase; font: bold 1.4em/1.25em Arial, Helvetica, Geneva, sans-serif; } #storyPreview .preview .byline, #storyPreview .preview .dateline, #storyPreview .preview .datelocation { display: block; } #storyPreview .preview p { margin-top: 10px; } #storyPreview .preview p a { color: #000; font-weight: bold;} #storyPreviewTextBox { width: 520px; background: #484848; margin-top: 15px; color: #d9d9d9; padding: 15px; font: 12px/1.5em Arial, sans-serif; letter-spacing: 1px; position: relative; left: 15px;} #storyPreviewTextBox a { font: bold 1em Lucida Grande, Arial, sans-serf; letter-spacing: 0; color: #FF6435; text-transform: uppercase; } #storyPreviewTextBox a:hover { text-decoration: none; } #storyPreviewTextBox a em { font-weight: bold; } #storyPreviewTextBox .row1 { border-bottom: 1px dotted #d9d9d9; padding-bottom: 10px; } #storyPreviewTextBox .row2 { margin-top: 10px; } #storyPreviewTextBox .column1 { float: left; padding-right: 10px; } #storyPreviewTextBox .column1 em { font-weight: bold; } #storyPreviewTextBox .column2 { float: left; padding: 6px 10px 0 25px; } #storyPreviewTextBox .column2 a { text-decoration: none; font: 1em Lucida Grande, Arial, sans-serf; color: #d9d9d9; } /** TOP NEWS **/ #news.archive #body {background: none; } #news.archive #content { width: 950px; margin: 0; background: none;} #news.archive #side {display: none} #news.article #body { background: none; } #news.article #content { background: #d9d9d9; width: 600px; margin: 0; } #news.article #side {width: 350px; float: right;} /** ARTICLES SECTION **/ #info-tabs { margin-bottom: 15px; } #info-tabs ul#nav-tabs { float: left; margin-left: 18px; width: 525px; display: inline;} #info-tabs ul#nav-tabs li { float: left; text-indent: -9999px; overflow: hidden; } #info-tabs ul#nav-tabs li a { display: block; height: 30px; margin-right: 5px;} #info-tabs #info-box { float: right; color: #d9d9d9; margin: 0; padding: 3px 10px; text-align: right; display: block; background: url(/page/-/2010/images/bg-subnav-infotab.png) no-repeat 0 -3px; font: 13px/1.45em "Lucida Grande", "Lucida Sans Unicode", Verdana, Geneva, Helvetica, Arial; } #nav-tabs li.top-news a { background: url(/page/-/2010/images/subnavigation.png) no-repeat 0 -4px; width: 95px;} #nav-tabs li.all-articles a { background: url(/page/-/2010/images/subnavigation.png) no-repeat -100px -4px; width: 100px;} #nav-tabs li.watch-videos a { background: url(/page/-/2010/images/subnavigation.png) no-repeat -204px -4px; width: 110px;} #nav-tabs li.film-guide a { background: url(/page/-/2010/images/subnavigation.png) no-repeat -319px -4px; width: 90px;} #nav-tabs li.donate a { background: url(/page/-/2010/images/subnavigation.png) no-repeat -413px -4px; width: 90px; } #nav-tabs li.top-news a:hover { background: url(/page/-/2010/images/subnavigation.png) no-repeat 0 0px; width: 95px;} #nav-tabs li.all-articles a:hover { background: url(/page/-/2010/images/subnavigation.png) no-repeat -100px 0px; width: 100px;} #nav-tabs li.watch-videos a:hover { background: url(/page/-/2010/images/subnavigation.png) no-repeat -204px 0px; width: 110px;} #nav-tabs li.film-guide a:hover { background: url(/page/-/2010/images/subnavigation.png) no-repeat -319px 0px; width: 90px;} #nav-tabs li.donate a:hover { background: url(/page/-/2010/images/subnavigation.png) no-repeat -413px 0px; width: 90px; } body.home #nav-tabs li.top-news a, body.home #nav-tabs li.top-news a:hover { background: url(/page/-/2010/images/subnavigation.png) no-repeat 0 -38px;} body.archive #nav-tabs li.all-articles a, body.archive #nav-tabs li.all-articles a:hover { background: url(/page/-/2010/images/subnavigation.png) no-repeat -100px -38px;} /* 05 =SUBPAGES ---------------------------------------------------------- */ /* used on sponsors page */ .sponsors td {text-align: center;} .sponsors td img {padding-right: 10px; vertical-align: middle;} /* blockquote */ .storyQuote {border: 3px double #C2B576; margin: 5px 20px; padding: 5px 20px; background: #3D372D; color: #fff;} /* articles */ #news.article .pageContent { margin: 20px; } body#news.article #leadPhoto { height: 280px; color: #fff; font-size: 12px; z-index: 9999;overflow: hidden; width: 602px; position: relative;} body#news.article #leadPhoto a { color: #fff; font-weight: bold; text-decoration: none;} body#news.article #leadPhoto a:hover { text-decoration: underline; } body#news.article #leadPhoto img { width: 600px; padding: 0; margin: 0;} body#news.article #leadPhoto #caption-box { position: absolute; bottom: 3px; display: block; width: 580px; background: url(/page/-/phase3-wrapper/img/leadphoto-caption.png); padding: 8px 10px;} body#news.article #leadPhoto .caption { float: left;} body#news.article #leadPhoto .photocredit { font-size: 10px; color: #fff; float: right;} body#news.article .pageContent h4 { font-weight: normal; font-style: italic; margin-bottom: 15px;} body#news.article .pageContent p.byline { font-weight: bold;} body#news.article .pageContent #pullQuote { width: 150px; float: right; padding: 15px; margin: 0 10px 10px; background: #ccc; font-size: 15px; line-height: 1.5em; font-style: italic; color: #333;} body#news.article .pageContent #pullQuote .quotes { font-size: 1.5em;} body#news.article .pageContent img.thumbnail { float: left; width: 75px; height: 75px; padding: 0px 10px 10px 0; } body#news.article .pageContent h2.title-tags, body#bodyNewsArticle .pageContent h2.tags { float: left; margin: 12px 5px; font-size: 1.4em;} body#news.article .pageContent h2.tags { font-size: 17px; line-height: 1em; font-weight: bold; text-transform: uppercase; margin: 6px 0; } p.tags {font-size: 12px; padding-top:10px;} p.tags img {padding-top: 0 !important; margin-top: 0;} body.articles #rightColumn #top-stories { width: 307px; background-color: #3d372d; color: #eee; display: block; padding: 15px; margin-top: 10px; font-size: 1.3em; } body.articles #rightColumn #top-stories h2 { background: url(/page/-/phase3-wrapper/img/title-topposts.png) no-repeat; text-indent: -9999px; width: 105px; height: 15px; margin-bottom: 15px; } #news.archive #mostRecent h1 { font-size: 24px; text-transform: uppercase; color: #d9d9d9; margin-bottom: 10px;} #news.archive #mostRecent { width: 750px; margin: 0 auto; background: #484848; padding: 15px; line-height: 1.25em;} #news.archive #mostRecent .entry { width: 120px; float: left; color: #d9d9d9; margin: 0 5px; padding: 10px;} #news.archive #mostRecent .entry.hovered { cursor: pointer; background-color: #323738; } #news.archive #mostRecent h3 { font-size: 13px; font-weight: bold; margin: 10px 0; } #news.archive #mostRecent h3 em { font-weight: bold; } #news.archive #mostRecent img { width: 100px; height: 100px; text-align: center; padding: 10px; background-color: #fff; border: 1px solid #999; } #news.archive #mostRecent a { text-decoration: none; font-weight: bold; font-style: italic; color: #FF0050;} #news.archive #archive { width: 65%; margin: 25px 25px 25px 50px; color: #333;background: #ccc; padding: 15px; float: left; display: inline;} #news.archive #archive .entry { padding: 10px; border-top: 1px solid #3d372d; font-size: 11px; line-height: 1.25;} #news.archive #archive .entry.first { padding-top: 5px; border-top: 0;} #news.archive #archive .entry.hovered { cursor: pointer; background-color: #484848; color: #d9d9d9;} #news.archive #archive .entry img { width: 50px; height: 50px; float: left; margin: 4px 10px 0 0; } #news.archive #archive .entry h4 { font-size: 14px; font-weight: bold; color: #333; } #news.archive #archive .entry h4 a { color: #323738; text-decoration: none; } #news.archive #archive .entry.hovered h4 a { color: #d9d9d9;} #news.archive #archive .entry h4 em { font-weight: bold; } #news.archive #archive .entry span.dateline { display: block; margin-bottom: 5px; } #news.archive #archive .entry a { text-decoration: none; color: #FF0050;} #news.archive #promoTiles { float: left; width: 180px; margin-top: 25px;} #news.archive #promoTiles img { float: left; margin-bottom: 25px;} #viral { width: 460px; margin: 30px auto 20px;} #viral li {margin-right: 50px; width: 120px; height: 50px; text-indent: -999em; overflow: hidden; float: left; padding: 0;} #viral li a {display: block; width: 120px; height: 50px;} #viral li#viralShare {background: url(/page/-/2010/images/viral-share.png) no-repeat; } #viral li#viralRss {background: url(/page/-/2010/images/viral-rss.png) no-repeat;} #viral li#viralEmail {background: url(/page/-/2010/images/viral-email.png) no-repeat; margin: 0;} /* SIDE ----------------------------------------------- */ #sideNav ul {padding: 20px 0; background: url(/page/-/2010/images/bg-sidenav.gif) repeat-y 100%; margin-bottom: 15px;} #sideNav li {height: 24px; line-height: 24px; margin: -4px 0; padding-left: 20px; font-size: 11px;} /* line-height = arrow image height. negative margin to tighten things up. height property for IE */ /* turn on to force a right margin for each li element #sideNav li a {margin-left: 70px; margin-right: 90px; display: block;} */ #sideNav li.nav_active {background: url(/page/-/2010/images/bg-sidenav-arrow.png) no-repeat; position: relative;} #sideNav li.nav_active span.nav_here {position: absolute; right: 2px; bottom: 12px;} #sideNav li.nav_active a {color: #fff;} /* in case nav top and nav active are one on the same, nav_top needs to overwrite the arrow */ #sideNav li.nav_top {padding-left: 0; text-transform: uppercase; font: 20px cambria, georgia, serif; background: none; margin-bottom: 5px; color: #FF0050; text-align: left;} #sideNav li.nav_top a { color: #FF0050; } #sideNav li.nav_top .nav_here {display: none;} #sideNav li.nav_section {padding-left: 50px; text-transform: uppercase; color: #d9d9d9; font-weight: bold;} /* padding should equal the margin above */ #sideNav li.nav_section a {margin-left: 0px;} #sideNav li a {color: #ccc; text-decoration: none; margin-left: 50px;} /* li must extend all the way to the left so the arrow can overlap the content, push the to the right */ #sideNav li a:hover {text-decoration: underline;} #sidebar-brightcove { float: right; margin-bottom: 15px;} #top-stories { width: 270px; background-color: #484848; color: #eee; display: block; padding: 15px; margin: 15px 0; font-size: 13px; float: right;} #top-stories h2 { font-size: 18px; text-transform: uppercase; margin-bottom: 15px; } #top-stories li { padding: 8px 5px; border-top: 1px dotted #777; text-indent: -15px; } #top-stories li.hovered { background: #333; cursor: pointer;} #top-stories li.first { border: none; } #top-stories li img { width: 35px; height: 35px; float: left; margin-right: 35px; border: 1px solid #444; } #top-stories li a { color: #d9d9d9; text-decoration: none; } #twitter { width: 350px; height: auto; font: 1.15em/1.25em Arial, sans-serif; color: #1a1818; position: relative; z-index: 1000; margin: 15px 0; float: right; } body.home #twitter { float: none; } #twitter .text { float: right; width: 170px; padding: 0 0 10px 0; background: #fff url(/page/-/phase3-wrapper/img/twitter-bg-text.jpg) no-repeat 0 100%; } #twitter .text p { margin-left: 10px; margin-right: 10px; overflow: hidden; margin-top: -10px} #twitter .text .text-top { background: url(/page/-/phase3-wrapper/img/twitter-bg-text.jpg) no-repeat 0 0; height: 15px; } #twitter img { float: left; } #twitter .text .dateline { font: .8em/1.25em Arial, sans-serif; color: #00a0d4; margin-top: 5px;} #sidebar-filmplayer { display: block; width: 337px; height: 375px; margin: 0 0 10px 0; background-color: #000; } #inthenews { background: #484848; padding: 10px 15px; width: 293px; float: right; margin: 0 0 15px 0;} body.home #inthenews { width: auto; float: none; margin: 15px 0 0 0;} body#news.article #inthenews { width: 270px; } #inthenews h3 { margin-bottom: 10px; font-size: 20px; color: #d9d9d9; text-transform: uppercase;} #inthenews ul { width: 210px; float: left; color: #d9d9d9; font: 11px/1.375em Arial, sans-serif; } body#news.article #inthenews ul { width: 180px; } #inthenews li { margin: .75em 0; text-indent: -1em; border-bottom: 1px dotted #666; padding: 0 0 .75em 1em; } #inthenews li a { color: #fff; text-decoration: none; } #inthenews li a:hover { text-decoration: underline; } #inthenews li:before { content: "\00BB \0020"; } #inthenews img { float: right; } #scratchpad { background: #97C942; font-size: 12px; line-height: 1.5em; padding: 15px; color: #333; width: 480px; margin: 0 auto; border: 5px solid #484848;} body.home #scratchpad { margin-bottom:15px; border: 5px solid #ccc;background: #484848; color: #d9d9d9;} /* 06 =FRAMEWORK ---------------------------------------------------------- */ input, textarea, select {vertical-align: middle; font-family: "lucida grande", verdana, lucida, arial, helvetica, sans-serif;} input.text, textarea {font-size: 12px; background: #d9d9d9; border: 1px solid #484848; color: #484848; padding: 2px; letter-spacing: .5px;} input.submit {background: #ff0050; padding: 3px 8px; color: #fff; font-weight: normal; border: none; text-align: center; text-transform: uppercase; letter-spacing: 1px;} input.submit:hover {background: #97C942; cursor: pointer;} input.buttonImage {cursor: pointer; border: none; vertical-align: middle; padding: 0;} select {font-size: 12px; background: #fff; text-align: left;} /* signup */ #bodyBSD #signup {width: 400px; margin-left: 0px;} #bodyBSD #signup td {padding-top: 4px;} #bodyBSD #signup label {font-weight: normal; text-transform: uppercase;} #bodyBSD #signup .input_email {width: 377px;} #bodyBSD #signup .input_firstname {width: 178px;} #bodyBSD #signup .input_lastname {width: 178px;} #bodyBSD #signup .input_addr1 {width: 377px;} #bodyBSD #signup .input_addr2 {width: 377px;} #bodyBSD #signup .input_city {width: 178px;} #bodyBSD #signup .select_state_cd {width: 80px; margin-right: 5px;} #bodyBSD #signup .input_zip {width: 85px; margin-right: 8px;} #bodyBSD #signup .select_country {width: 186px; margin-right: 5px;} #bodyBSD #signup .input_phone {width: 178px; margin-right: 8px;} #bodyBSD #signup input.submit {margin-top: 10px;} #bodyBSD #signup input.checkbox {margin-right: 4px; vertical-align: middle;} #bodyBSD #signup input.radiobutton {margin-right: 4px; vertical-align: middle;} #bodyBSD #signup textarea {width: 377px;} #bodyBSD #contribution label {text-transform: uppercase; font-weight: normal;} #bodyBSD #contribution .amounts input { margin-right: 5px; } #bodyBSD #contribution input.cc_type_cd { margin-right: 5px; } /* 07 =UTILITY ---------------------------------------------------------- */ body#tinymce {font-size: 11px; background: #fff; padding: 10px;} span.error, #signup span.error, span.signuperror { color: #FF0050; } .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: #FF0050; } 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; }