/* ---------------------------------------------------------- Trouble the Water CSS Managed by: Blue State Digital Last Update: August 2008 TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - STRUCTURE 04 - HOMEPAGE ELEMENTS 05 - SUBPAGE ELEMENTS 06 - UTILITY ---------------------------------------------------------- */ /* @group 01 - GLOBAL BROWSER RESET */ @import "http://trouble.bluestatedigital.com/includes/reset"; /* @end */ /* @group 02 - COMMON STYLE */ body { background: #000 url(/page/-/images/background.jpg) no-repeat scroll 50% 0; font: 62.5% Arial, sans-serif; color: #ba9a74; } h1 { font-size: 2.3em; color: #935414; margin-bottom: 30px; } h2 { font: 1.5em Georgia, serif; color: #fff; font-weight: bold; margin: 30px 0 15px;} a { color: #fff;} p { font: 1.3em/1.5em Arial, sans-serif; margin: 1.5em 0;} #page ul {margin: 25px 10px 25px 50px; list-style-type: disc; font-size: 1.3em;} #page li { font: .9em/1.2em Arial, sans-serif; margin-bottom: .5em; padding-left: 23px;} /* @end */ /* @group 03 - STRUCTURE */ #container { width: 960px; height: auto; margin: 0 auto; } #header #masthead { width: 475px; float: left; } #header #accolades { width: 483px; float: left; padding: 10px 0;} #content { float: left; width: 642px; margin: 0 10px 0 0;} #sidebar { float: left; width: 301px; font: 1.4em Georgia, serif; color: #fff;} #navigation { background: url(/page/-/images/img-navigation-trans.png) no-repeat; width: 642px; height: 41px; margin-top: 12px; } #navigation li { float: left; } #navigation li a { display: block; height: 42px; text-indent: -9999px;} #navigation li#home a { width: 87px;} #navigation li#thestory a { width: 108px;} #navigation li#reviewsandnews a { width: 165px;} #navigation li#takeaction a { width: 125px;} #navigation li#partners a { width: 105px;} #sidebar h2 { display: none; } #sidebar #quicksignup { background: url(/page/-/images/bg-sidebar.png) no-repeat; width: 267px; height: 91px; padding: 45px 15px 0 19px; } #sidebar #quicksignup #joinlist { padding-top: 10px; width: 260px;} #sidebar #quicksignup input { vertical-align: middle; margin: 0 5px 7px 0; } #sidebar #quicksignup .email, #sidebar #quicksignup .zip { height: 10px; padding: 3px; border: 1px solid #4e2a0f; color: #502e11; background-color: #a86; } #sidebar #quicksignup .email { width: 215px;} #sidebar #quicksignup .zip { width: 75px;} #sidebar #actioncenter { background: url(/page/-/images/bg-sidebar.png) no-repeat 0 -135px; width: 301px; height: 188px; padding-top: 40px; } #sidebar #actioncenter li { width: 282px; height: 46px; margin: 0 auto; text-indent: -8888px;} #sidebar #actioncenter .learn{ background: url(/page/-/images/button-sidebar-learn-trans.png) no-repeat; } #sidebar #actioncenter .spreadtheword{ background: url(/page/-/images/button-sidebar-spread-trans.png) no-repeat;} #sidebar #actioncenter .shareyourstory{ background: url(/page/-/images/button-sidebar-share-trans.png) no-repeat;} #sidebar #actioncenter .screening{ background: url(/page/-/images/button-sidebar-find-trans.png) no-repeat;} #sidebar #actioncenter .organization{ background: url(/page/-/images/button-sidebar-take-trans.png) no-repeat;} #sidebar #actioncenter li a { width: 282px; height: 46px; display: block;} #sidebar #poster { background: url(/page/-/images/bg-sidebar.png) no-repeat 0 -370px; height: 405px; padding: 7px 0; text-align: center; } #sidebar #poster .link { display: block; text-decoration: none; margin-top: 5px;} #sidebar #socialnetworks { background: url(/page/-/images/bg-sidebar-trans.png) no-repeat 0 -747px; height: 66px; } #sidebar #socialnetworks ul { width: 272px; height: 42px; margin: 0 auto; padding-top: 15px;} #sidebar #socialnetworks li { float: left; text-indent: -9999px; height: 42px;} #sidebar #socialnetworks .facebook { background-image: url(/page/-/images/button-socnet-facebook-trans.png); width: 94px; } #sidebar #socialnetworks .youtube { background-image: url(/page/-/images/button-socnet-youtube-trans.png); width: 84px; } #sidebar #socialnetworks .myspace { background-image: url(/page/-/images/button-socnet-myspace-trans.png); width: 94px; } #sidebar #socialnetworks li a { width: 94px; height: 42px; display: block;} #sidebar #socialnetworks li a .youtube { width: 84px;} #footer a { color: #fff; text-decoration: none;} #footer p { font-size: 1.2em; margin: 5px 0;text-align: right;} #footer .nav { width: 505px; float: left; margin: 25px 10px 0 0;} #footer .copyright { text-align: right; } #footer .credits { width: 420px; float: left;} #footer h3 { height: 85px; float: left; text-indent: -9999px;} #footer h3.elsewhere { background: url(/page/-/images/img-elsewherefilms-trans.png) no-repeat; width: 181px; } #footer h3.louverture { background: url(/page/-/images/img-louverture-trans.png) no-repeat; width: 81px; } #footer h3.zeitgeist { background: url(/page/-/images/img-zeitgeist-trans.png) no-repeat; width: 155px; } /* @end */ /* @group 04 - HOMEPAGE ELEMENTS */ #masthead a.title { display: block; background: url(/page/-/images/img-masthead-trans.png) no-repeat; width: 475px; height: 92px; text-indent: -9999px; } #masthead .subtitle { display: block; background: url(/page/-/images/img-subtitle-trans.png) no-repeat; width: 475px; height: 25px; text-indent: -9999px; } #accolades h3 { height: 104px; text-indent: -9999px; float: left; } #accolades .sundance { background: url(/page/-/images/img-sundance-trans.png) no-repeat 0 11px; width: 195px;} #accolades .fullframe { background: url(/page/-/images/img-fullframe-trans.png) no-repeat; width: 140px;} #accolades .silverdocs { background: url(/page/-/images/img-silverdocs-trans.png) no-repeat; width: 145px;} #feature { background: url(/page/-/images/bg-feature-homepage.jpg) no-repeat; margin: 15px 0 0 3px; height: 509px; } #featuredquote { text-align: center;} #trailer { width: 518px; margin: 0 auto; text-align: center;} .trailer { margin: 5px 0; border: 10px solid #1b0902; } #trailer img { float: left; padding-top: 5px; padding-bottom: 15px;} #trailer .byline { font-size: 1.2em; text-align: center;} #feature-bottom #blog, #feature-bottom #partners-blurb { margin: 10px 0; padding: 20px 20px 20px;} #feature-bottom h2.title { margin-top: 0; } #feature-bottom h2.title a { display: block; text-indent: -9999px;} #feature-bottom #blog { background: url(/page/-/images/bg-blog-homepage.jpg) no-repeat; width: 269px; height: 378px; float: left; margin-right: 17px; overflow: hidden; } #open { width: 633px; height: 64px;} #open .date{ font-size: 1.6em; line-height: 28px;text-align: center;} #open .release{font-size:1.2em;text-align: center;} #feature-bottom #blog, #feature-bottom #partners-blurb { margin: 10px 0; padding: 20px 20px 20px;} #feature-bottom h2.title { margin-top: 0; } #feature-bottom h2.title a { display: block; text-indent: -9999px;} #feature-bottom #blog { background: url(/page/-/images/bg-blog-homepage.jpg) no-repeat; width: 269px; height: 378px; float: left; margin-right: 17px; overflow: hidden; } #feature-bottom #partners-blurb { background: url(/page/-/images/bg-partners-homepage.jpg) no-repeat; width: 274px; height: 378px; float: left; padding-top: 20px; } /* @end */ /* @group 05 - SUBPAGE ELEMENTS */ #page { background: url(/page/-/images/bg-content-interior.jpg) repeat-y; width: 582px; margin: 15px 0 0 3px; padding: 30px; } #blog .entry { margin-bottom: 30px;} #blog .entry h2 { margin: 5px 0; } #blog .entry h2 a { text-decoration: none;} #blog .entry h2 a:hover { text-decoration: underline;} #feature-bottom #blog .entry p { margin: 0; font: 1.2em/1.5em Arial, sans-serif;} #blog .entry .bookmarks { float: right; } #blog .entry .comments { border-top: 1px solid #666;} #blog .entry .comments p { margin: 5px 0;} #blog .entry .dateline {font: 1.2em/1.5em Arial, sans-serif; font-weight: bold; color: #935414; text-transform: uppercase;} #blog .entry h2.title { font-size: 2em; margin-bottom: 25px;} #blog .entry .comments { border-top: 1px solid #666; margin-top: 5px;} #blog .entry .comments p { margin: 5px 0;} #blog .entry .comments a { font-weight: bold; text-decoration: none; } #blog #comments { margin-bottom: 50px;} #blog #comments h2 { margin-bottom: 10px;} #blog #comments .comment { border-bottom: 1px solid #a7a7a7; padding: 20px 10px; margin: 0 10px; } #blog #comments .commentInfo { margin-bottom: 10px;} #blog #comments .commentName { font-size: 1.4em; font-weight: bold;} #blog #comments .commentInfo .commentDate { color: #666; font-weight: normal; } #blog #comments .comment p { margin: 0;} #blog #comment_form fieldset { width: 350px; margin: 0 auto; } #blog #comment_form .text, .interior #blog #comment_form .textarea { border: 1px solid #999; padding: 2px 4px; font: 10.5px Verdana, Arial, sans-serif; color: #666; } #blog #comment_form .text { width: 250px; height: 15px; } #blog #comment_form .textarea { width: 257px;} #blog #comment_form label { display: inline-block; vertical-align: top; width: 80px; } .reviews { margin-bottom: 35px;} .reviews h2 { margin-bottom: 5px; } .reviews h2 a { text-decoration: none;} .reviews h2 a:hover { text-decoration: underline;} a.more { display: block; font: 1.75em Georgia, sans-serif; margin-bottom: 50px;} form#invitationpage { font-size: 1.2em;} body #contact_importer_button { margin: 6px 0 4px ; } table#signup {font-size: 1.2em; margin:auto} #signup .text { height: 15px; border: 1px solid #999; padding: 2px 4px; margin-bottom: 15px; font: 10.5px Verdana, Arial, sans-serif; color: #666; } #signup label { font: 1.2em Arial, sans-serif;} #signup .input_email, #signup .input_addr1, #signup .input_addr2 { width: 325px;} #signup .input_firstname { width: 130px;} #signup .input_lastname { width: 150px;} #signup .input_addr1 { margin-bottom: 5px;} #signup .input_city { width: 90px;} #signup .select_state_cd { width: 75px;} #signup .input_zip { width: 50px;} #signup .textarea { width: 330px; font: 1.05em Verdana, Arial, sans-serif; color: #666; padding: 2px;} #signup .submit { margin-top: 10px;} #interiornav {font: 1.3em/1.5em Arial, sans-serif; margin: 1.5em 0; text-decoration: none; } #interiornav a {font: 1em/1.5em Arial, sans-serif; margin: 1.5em 0; text-decoration: none; } /* @end */ /* @group 06 - UTILITY */ .floatl { float: left;} .floatr { float: right;} strong { font-weight: bold;} em { font-style: italic;} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:block;} .nobottommargin { margin-bottom: 0; } /* @end */