/* ---------------------------------------------------------- Truth Fights Back 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: #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 { padding: 0; margin-top: 0; margin-left: 0; margin-bottom: 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: #333333; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; } .base h1 { color: #4c7e29; margin-bottom: 10px; font: 1.75em/1.2em "Helvetica", Arial, Geneva, sans-serif; } .base h2 { font: bold 1.3em/1.2em "Helvetica", Arial, Geneva, sans-serif; color: #4c7e29; margin-bottom: 10px; } .base h3 { font: bold 1.1em/1.2em "Helvetica", Arial, Geneva, sans-serif; color: #4c7e29; margin-bottom: 10px; } .base h4 { } .base p { margin-bottom: 10px; } a { text-decoration: none; color: #4c7e29; } a:hover { text-decoration: underline; } blockquote { } .base ul, ol { } .base ul { } .base ol { } .base ul li, .base ol li { } .base li ol { } .base li ul { } .caption { font-size: .9em; font-style: italic; color: #fff; margin-top: 5px; } .entry { margin-bottom: 20px; } /* 03 =LAYOUT ---------------------------------------------------------- */ html { background: #000 url(/page/-/tfb/img/bg.jpg) no-repeat center top; } #wrapper { width: 960px; margin: 0 auto; } #content { float: left; width: 950px; background: #fff url(/page/-/tfb/img/bg_content.jpg) repeat-y; border-right: 5px solid #112c07; border-left: 5px solid #112c07; } #main-content { width: 700px; float: left; padding: 0; margin: 0; display: inline; } #main { width: 660px; float: left; padding-top: 10px; padding-bottom: 30px; padding-left: 20px; } #header { float: left; width: 960px; } #header .logo a { background: url(/page/-/tfb/img/logo.png) no-repeat; display: inline-block; width: 440px; height: 82px; text-indent: -9999px; overflow: hidden; float: left; margin: 10px 20px 20px; } #header .quick-signup { float: right; width: 298px; border-left: 2px solid #1d1d1d; padding-left: 10px; height: 80px; margin-top: 15px; } #header .quick-signup h4 { color: #fff; font-size: 1.1em; font-weight: bold; margin-bottom: 5px; } #header .quick-signup input.text { padding: 4px; display: inline; background: #abb0a7; border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-bottom: 5px; color: #5e5e5e; font: .95em "Arial", Helvetica, Geneva, sans-serif; } #header .quick-signup input#quick-email { width: 175px; } #header .quick-signup input#custom-70 { margin-right: 5px; width: 180px; } #header .quick-signup input.zip { width: 78px; } #header .quick-signup input.buttonImage { position: absolute; } #header #site-nav { float: left; width: 960px; background: url(/page/-/tfb/img/nav.png) no-repeat; height: 50px; } #header ul.site-nav li { float: left; display: inline-block; height: 50px; width: auto; } #header ul.site-nav li a { height: 50px; display: block; text-indent: -9999px; margin-right: 1px; overflow: hidden; } ul.site-nav li.home a{ width: 58px; margin-left: 5px; } ul.site-nav li.home a:hover { background: url(/page/-/tfb/img/nav.png) -5px -50px; } ul.site-nav li.distortions a{ width: 133px; } ul.site-nav li.distortions a:hover { background: url(/page/-/tfb/img/nav.png) -64px -50px; } ul.site-nav li.report a{ width: 158px; } ul.site-nav li.report a:hover { background: url(/page/-/tfb/img/nav.png) -198px -50px; } ul.site-nav li.blog a{ width: 142px; } ul.site-nav li.blog a:hover { background: url(/page/-/tfb/img/nav.png) -357px -50px; } ul.site-nav li.resources a{ width: 93px; } ul.site-nav li.resources a:hover { background: url(/page/-/tfb/img/nav.png) -500px -50px; } ul.site-nav li.about a{ width: 64px; } ul.site-nav li.about a:hover { background: url(/page/-/tfb/img/nav.png) -594px -50px; } ul.site-nav li.twitter a{ width: 92px; } ul.site-nav li.twitter a:hover { background: url(/page/-/tfb/img/nav.png) -659px -50px; } ul.site-nav li.facebook a{ width: 92px; padding-right: 1px; } ul.site-nav li.facebook a:hover { background: url(/page/-/tfb/img/nav.png) -752px -50px; } ul.site-nav li.donate a{ width: 112px; } ul.site-nav li.donate a:hover { background: url(/page/-/tfb/img/nav.png) -846px -50px; } #sidebar { float: right; width: 250px; } .side-top { float: left; width: 230px; width: 230px; padding: 10px; background: url(/page/-/tfb/img/bg_sidebar.jpg) no-repeat; } #sidebar .primary-actions { padding: 5px; } #footer { float: left; background: #3a4a2c; border-right: 5px solid #112c07; border-left: 5px solid #112c07; padding: 40px; width: 870px; text-align: center; } #footer p{ color: #fff; font-family: "Arial", Helvetica, Geneva, sans-serif; margin-bottom: 15px; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home #main { padding: 0; width: 700px; float: left; } #home #main .home-content { padding-left: 10px; padding-right: 10px; width: 680px; float: left; } .side-top h2 { text-transform: uppercase; font: bold 1em "Arial", Helvetica, Geneva, sans-serif; text-align: center; margin-bottom: 5px; } h2.report { display: block; background: url(/page/-/tfb/img/h2_report.png) no-repeat; text-indent: -9999px; width: 220px; height: 39px; } #sidebar .sidebar-form { height: 250px; } #sidebar form#distortion input.text, #sidebar form#distortion textarea { padding: 4px; display: inline; border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-bottom: 5px; } #sidebar form#distortion label { text-transform: uppercase; color: #666666; font: bold .8em "Arial", Helvetica, Geneva, sans-serif; } #sidebar form#distortion textarea { margin-bottom: 5px; width: 212px; } #sidebar form#distortion input#distortion-email { float: left; width: 125px; margin-right: 5px; display: inline; } #sidebar form#distortion label.distortion-email { float: left; width: 132px; margin-right: 6px; display: inline; } #sidebar form#distortion input#distortion-zip { float: left; width: 74px; } #sidebar form#distortion label.distortion-zip { float: left; width: 62px; } #sidebar form#distortion label.distortion-description { float: left; width: 225px; } #sidebar form#distortion input.submit-distortion { float: right; margin-right: 4px; display: inline; } #sidebar h2.side-blog { display: block; background: url(/page/-/tfb/img/h2_blog.png) no-repeat; text-indent: -9999px; width: 163px; height: 18px; margin-right: auto; margin-left: auto; margin-bottom: 10px; } #sidebar .entry h4 { font: bold 1em/1.2em "Arial", Helvetica, Geneva, sans-serif; margin-bottom: 0; color: #000; } #sidebar .blog { font: 1em/1.4em "Arial", Helvetica, Geneva, sans-serif; margin-bottom: 5px; padding-bottom: 20px; padding: 5px; } #sidebar .blog a { color: #000; font-weight: bold; font-size: .9em; } #sidebar .blog .entry { border-bottom: 1px solid #888b86; padding-bottom: 10px; margin-bottom: 10px } #sidebar .blog p.blog-info { color: #000; font-weight: bold; font-size: .75em; } #homepage-feature { float: left; width: 660px; background: url(/page/-/tfb/img/bg-hero.jpg) repeat-x; height: 230px; overflow: hidden; padding: 20px; z-index: -100; } #home #homepage-feature .entry { margin-bottom: 0; overflow: hidden; background: url(/page/-/tfb/img/bg-hero.jpg) repeat-x 0 -21px; width: 660px; height: 205px; } #homepage-feature .feature-text { float: left; width: 390px; height: 205px; margin-right: 10px; display: inline; } #homepage-feature h1 { color: #4c7e29; margin-bottom: 10px; font: bold 1.65em/1.2em "Helvetica", Arial, Geneva, sans-serif; } #homepage-feature h3 { text-transform: uppercase; color: #929292; margin-bottom: 10px; font-family: "Helvetica", Arial, Geneva, sans-serif; line-height: 1.2em; font-weight: bold; display } #homepage-feature .feature-text p { color: #333; font-size: 1em; line-height: 1.2em; height: 60px; float: left; margin-bottom: 15px; } #homepage-feature .feature-text .hero-actions img { float: left; display: inline; margin-right: 15px; } #homepage-feature .feature-image { float: left; width: 248px; height: 149px; margin-top: 25px; background: url(/page/-/tfb/img/bg_hero-photo.jpg) no-repeat; padding: 5px; display: inline; } #homepage-feature a { overflow: hidden; } #homepage-feature a.read { background: url(/page/-/tfb/img/btn_hero_read.png) no-repeat; display: inline-block; width: 76px; height: 23px; text-indent: -9999px; float: left; margin-right: 5px; } #homepage-feature a.read:hover { background: url(/page/-/tfb/img/btn_hero_read.png) 0 -23px; } #homepage-feature a.email { background: url(/page/-/tfb/img/btn_hero_email.png) no-repeat; display: inline-block; width: 76px; height: 23px; text-indent: -9999px; float: left; margin-right: 5px; } #homepage-feature a.email:hover { background: url(/page/-/tfb/img/btn_hero_email.png) 0 -23px; } #homepage-feature a.tweet { background: url(/page/-/tfb/img/btn_hero_tweet.png) no-repeat; display: inline-block; width: 76px; height: 23px; text-indent: -9999px; float: left; margin-right: 5px; } #homepage-feature a.retweet:hover { background: url(/page/-/tfb/img/btn_hero_tweet.png) 0 -23px; } #homepage-feature a.discuss { background: url(/page/-/tfb/img/btn_hero_discuss.png) no-repeat; display: inline-block; width: 76px; height: 23px; text-indent: -9999px; float: left; margin-right: 5px; } #homepage-feature a.discuss:hover { background: url(/page/-/tfb/img/btn_hero_discuss.png) 0 -23px; } #pager { background: url(/page/-/tfb/img/bg_pager.jpg) no-repeat; width: 225px; height: 17px; float: left; padding: 10px 30px 5px; color: #fff; z-index: 1000; text-align: center; display: inline; margin-left: 225px; margin-top: 10px; } #pager a { color: #fff; font: 1em "Helvetica", Arial, Geneva, sans-serif; padding: 3px 6px 3px 7px; position: relative; margin-right: 5px; display: inline; overflow: hidden; } #pager a:hover { text-decoration: none; } #pager a.activeSlide { background: #2f3f20; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #main .home-box { float: left; width: 208px; padding: 9px; overflow: hidden; } #main .home-box h3 { color: #929292; text-decoration: none; text-transform: uppercase; font: bold .75em "Helvetica", Arial, Geneva, sans-serif; margin-bottom: 5px; } #main .home-box h2 a { font: 1em "Helvetica", Arial, Geneva, sans-serif; color: #4c7e29; margin-bottom: 10px; text-decoration: none; } #main .home-box .sub-image { border: 1px solid #d8cdb4; padding: 4px; width: 198px; overflow: hidden; height: 123px; margin-bottom: 10px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ .section-title { width: 680px; float: left; background-color: #dddfdc; color: #4c7e29; margin-left: -20px; margin-top: -10px; margin-bottom: 15px; padding: 15px 20px 15px 0; } .section-title h1 { margin-left: 20px; display: inline; float: left;} #distortions .entry { border-bottom: 1px solid #d8cdb4; padding-bottom: 15px; } #distortions .distortion-image { border: 1px solid #d8cdb4; padding: 4px; width: 150px; overflow: hidden; height: 90px; float: left; margin-right: 10px; } #distortions .distortion-text { float: right; width: 475px; } #distortions h2 { margin-bottom: 5px; } #distortions .distortion-actions a { overflow: hidden; } #distortions .distortion-actions a.read { background: url(/page/-/tfb/img/btn_hero_read.png) no-repeat; display: inline-block; width: 76px; height: 23px; text-indent: -9999px; float: left; margin-right: 5px; } #distortions .distortion-actions a.read:hover { background: url(/page/-/tfb/img/btn_hero_read.png) 0 -23px; } #distortions .distortion-actions a.email { background: url(/page/-/tfb/img/btn_hero_email.png) no-repeat; display: inline-block; width: 76px; height: 23px; text-indent: -9999px; float: left; margin-right: 5px; } #distortions .distortion-actions a.email:hover { background: url(/page/-/tfb/img/btn_hero_email.png) 0 -23px; } #distortions .distortion-actions a.tweet { background: url(/page/-/tfb/img/btn_hero_tweet.png) no-repeat; display: inline-block; width: 76px; height: 23px; text-indent: -9999px; float: left; margin-right: 5px; } #distortions .distortion-actions a.retweet:hover { background: url(/page/-/tfb/img/btn_hero_tweet.png) 0 -23px; } #distortions .distortion-actions a.discuss { background: url(/page/-/tfb/img/btn_hero_discuss.png) no-repeat; display: inline-block; width: 76px; height: 23px; text-indent: -9999px; float: left; margin-right: 5px; } #distortions .distortion-actions a.discuss:hover { background: url(/page/-/tfb/img/btn_hero_discuss.png) 0 -23px; } #distortions.distortion-entry .distortion-actions { width: 190px; height: 78px; margin-bottom: 10px; margin-top: 5px; float: left; text-align: center; padding-left: 5px; } #distortions.distortion-entry .distortion-actions a.email { background: url(/page/-/tfb/img/btn_large_email.png) no-repeat; display: inline-block; width: 190px; height: 23px; text-indent: -9999px; float: left; margin-right: 0; margin-bottom: 5px; } #distortions.distortion-entry .distortion-actions a.discuss { background: url(/page/-/tfb/img/btn_large_discuss.png) no-repeat; display: inline-block; width: 190px; height: 23px; text-indent: -9999px; float: left; margin-right: 0; margin-bottom: 5px; } #distortions.distortion-entry .distortion-actions a.retweet { background: url(/page/-/tfb/img/btn_large_tweet.png) no-repeat; display: inline-block; width: 190px; height: 23px; text-indent: -9999px; float: left; margin-bottom: 5px; margin-right: 0; } #distortions.distortion-entry .left-side a.more-distortions { float: right; margin-right: 8px; margin-top: 30px; } #distortions.distortion-entry .left-side { margin-bottom: 5px; width: 200px; float: left; padding: 5px 5px 5px 0; } #distortions.distortion-entry .distortion-image { border: none; padding: 4px; width: 190px; overflow: hidden; height: 115px; float: left; } #distortions.distortion-entry .distortion-content { float: right; width: 444px; border-left: 1px solid #d8cdb4; padding-left: 10px; } #distortions .distortion-content #disqus_thread { margin-top: 35px; } #distortions .distortion-content #disqus_thread .dsq-dc-logo { display: none; } #blog p.blog-info { color: #929292; text-decoration: none; text-transform: uppercase; font: bold .8em "Helvetica", Arial, Geneva, sans-serif; margin-bottom: 0; } #blog h2 { margin-bottom: 5px } #blog.blog-entry p.blog-info { margin-bottom: 5px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ .full-width #content { background: #fff; } .full-width #main { width: 910px; float: left; padding: 10px 20px 30px; } .full-width #contribution td.contribheader{ float: left; margin-bottom: 10px; width: 100%; font-weight: normal; } .full-width form#contribution input { margin-right: 5px; } .full-width form#contribution input#processbutton { margin-top: 10px; } .full-width form#contribution label { font-weight: normal; } .full-width form#contribution .contribcolumn input { padding: 3px; margin-top: 5px; margin-bottom: 5px; } .full-width form#contribution .contribcolumn input#addr1 { margin-bottom: 0; margin-top: 0px; } .full-width form#contribution .contribcolumn input#email, .full-width form#contribution .contribcolumn input#phone, .full-width form#contribution .contribcolumn input#firstname, .full-width form#contribution .contribcolumn input#lastname, .full-width form#contribution .contribcolumn input#cc_number { margin-top: 0; } .full-width form#contribution .contribcolumn #country, .full-width form#contribution .contribcolumn #state_cd { margin-top: 5px; margin-bottom: 10px; } .full-width form#contribution label.fieldlabel { } #signup input, #signup textarea { padding: 4px;border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-bottom: 10px;float: left; } #signup .label { margin-top: 10px; margin-bottom: 5px; } #invitationpage #contact_importer_button { float: left; } #invitationpage input#from_email, #invitationpage input#from_firstname, #invitationpage input#from_lastname, #invitationpage textarea { padding: 4px;border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-bottom: 10px; width: 305px; } /* 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;}