/* ---------------------------------------------------------- **k2kUSA** CSS Managed by: Blue State Digital Last Update: January 2010 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) Orange - #e74a20 ---------------------------------------------------------- */ /* 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; margin: 5px 0; } 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, html { background-color: #e8e8e8; background-image: url(/page/-/images/header/layout-bg.jpg) repeat-x; font-family: Helvetica, Arial, sans-serif; } .base h1 { font-size: 1.38em; font-weight: bold; color: #231f20; margin: 5px 0 15px 0; } .base h2 { margin: 20px 0 15px 0; floatont-size: 1.38em; font-weight: bold; color: #231f20; } .base h3 { text-align: center; margin: 15px 0 5px 0; } .base h4 { font-weight: bold; font-size: 0.9em; color: #666; } .base p { color: #231f20; line-height: 1.39em; margin-bottom: 10px; font-size: 0.88em; } a { font-weight: bold; color: #ee4d23; text-decoration: none; } a:hover { color: #231f20; } blockquote { color: #636466; font-style: italic; background-color: #f3f3f3; width: 220px; padding: 20px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; font-size: 0.88em;} ul li { list-style-type: disc; } .base ul, ol { line-height: 1.39em; margin-bottom: 10px; font-size: 0.88em; } .base ul { list-style-type: disc; } .base ol { list-style-type: decimal; } .base ul li, { list-style-type: disc; list-style: disc; margin: 10px 0; } .base ol li { list-style-type: decimal; margin: 10px 0; } .base li ol, .base li ul { margin-left: 10px; font-size: 0.9em; } /* 03 =LAYOUT ---------------------------------------------------------- */ /* Header */ #logo { margin: 0 80px 10px 120px; } #goal, #logo, #header-callout { display: block; float: left;} #goal { margin-top: 20px; } #header-callout { margin-top: 20px; width: 280px; float: right; } #stc-logo-header { display: block; margin-top: 0px; } #goal p { font-size: 0.63em; color: #616264; } #header-callout p { display: inline; color: #e54a1f; padding-bottom: 5px; position: relative; bottom: 10px; width: 200px; float: left;} p#valentines-promo { width: 300px; margin-top: 10px;} #facebook-header { position: relative; left: 20px;margin-bottom: 10; margin-top: 25px; } #facebook-header a img { position: relative; top: -17px; left: -18px; } #stc-logo-header p { color: #333; float: left; padding-top: 10px; padding-left: 5px; font-size: 0.63em; color: #616264; width: 140px; margin-top: -5px;} #stc-logo-header img { float: left; position: relative; top: 5px; width: 135px;} #header-callout #callout-img { display: block; margin-bottom: 5px; } #wrap { width: 940px; margin: 0 auto; padding: 10px 20px 20px 20px; background: #e9e9e9 url(/page/-/images/header/header-bg.jpg) repeat-x; } #navigation { background-color: #fff; display: block; height: 55px; text-align: center; clear: both; box-shadow: 0px 0px 20px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.2); margin-bottom: 0; position: relative; z-index: 2; } #navigation ul { margin: 0 auto; width: 710px;} #navigation ul li { display: inline-table; font-size: 1.0em; margin: 20px .71em; font-weight: bold; float: left; } #navigation ul li a { color: #000; display: block; padding-bottom: 2px; text-decoration: none; border-bottom: 2px solid #fff; } #navigation ul li a em { font-weight: normal; color: #666666; } #navigation ul li a:hover { border-bottom: 2px solid #e74a20; } #interior-content { background-color: #f3f3f3; } #home #join-email { display: block; margin-top: 250px; margin-bottom: 100px;} #pages #join-email { display: block; margin-top: 0px; margin-bottom: 20px;} #text-area { width: 565px; border-right: 1px solid #e5e5e5; float: left; padding: 20px 20px 21px 30px; background-color: #fff; margin-right: 20px; display: block; box-shadow: 5px 0px 10px rgba(0,0,0,0.05); -moz-box-shadow: 5px 0px 10px rgba(0,0,0,0.05); -webkit-box-shadow: 5px 0px 10px rgba(0,0,0,0.05); margin-top: -8px; } #blog #text-area { padding-bottom: 160px; } .full-width #text-area { width: 890px; } #fairness-map { width: 277px; display: block; float: left; margin: 0; } #fairness-map img { width: 90%; margin-left: 5%;} #fairness-map p { margin-bottom: 0; } #promotion div.module a img { } #scholastic-logo-header img { margin-left: 50px; } #fairness-map { margin-left: 10px; } #fairness-map p, #word-cloud p { color: #fff; position: relative; top: -30px; font-weight: bold; font-size: 0.8em; text-align: center;} fb:fan..FB_fan.FB_ElementReady { display: none; } /* Blog */ #content div.blog-content-col { margin-left: 120px; } #recent-blog-entries div.module.clearfix div.entry p.date { font-size: 0.73em; color: #999; color: rgba(0,0,0,0.5); font-weight: normal; margin-bottom: 0px; } #blog p.date { font-size: 0.73em; color: #999; color: rgba(0,0,0,0.5); font-weight: normal; width: 430px; margin-bottom: 0px; } #blog h2 { margin-top: 5px; } #blog .pic { margin-top: 0px; } #blog .entry { margin-bottom: 25px; } /* Sidebar */ #sidebar { width: 290px; float: left; padding-bottom: 20px; display: block; min-height: 900px;} #sidebar h2 { text-align: center; } #promotion div.module p { font: bold 0.8em/1.2em helvetica, arial, sans-serif; color: #e74a20; margin-top:5px;} #recent-blog-entries .entry img { display: inline; float: left; margin-right: 10px; width: 45px; } #recent-blog-entries .entry { display: block; margin-bottom: 10px; float: left; } #recent-blog-entries .entry p { width: 200px; display: inline-table; color: #e74a20; font-weight: bold; font-size: 0.8em; margin-bottom: 0; } #recent-blog-entries div.module.clearfix div.entry p.date span { color: #666; } #recent-blog-entries div.module.clearfix div.entry .margin { margin-bottom: 0; margin-top: 6px; float: left; width: 190px; display: inline; } #recent-blog-entries .pic { float: left; width: 45px; display: inline; } p.margin.date { margin-left: 55px; } #social-network .module ul { margin-bottom: 0; margin: 0 auto; width: 270px;} input[type=text] { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #d5d5d5; padding: 5px 3px 5px 5px; color: #666; margin: 5px 0; font-size: 0.8em; } input[type=text]:hover, input:focus { border: 1px solid #bbbbbb; outline: 0 none; color: #666; } input[type=submit] { background-color: #e74a20; color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-weight: bold; padding: 5px 20px; font-size: 0.8em; text-align: center; margin: 10px 0; } input[type=submit] a:hover { background-color: #616264; color: #fff; } #sidebar fieldset { overflow: hidden; position: relative; } #sidebar #join-email input[type=submit]{ float: right; } #sidebar #join-email form { font-size: 0.8em; } #sidebar #join-email form input[type=text] { font-size: 0.8em; color: #666; float: left; width: 161px; margin: 0;} #sidebar #join-email p { font-size: 0.78em; font-weight: bold; width: 250px; display: block; float: left; margin-top: 10px; } #sidebar #join-email p em a { color: #e54a1f; } #sidebar #join-email p em { font-size: 0.8em; display: block; color: #333; text-decoration: none; font-style: normal; font-weight: normal;} #sidebar #join-email form input[type=text]:hover { color: #333; } #sidebar #join-email form input[type=text]:active { color: #666; } #sidebar #join-email form input[name=zip] { width: 69px; margin-left: 10px; } #sidebar #join-email div.module fieldset label { display: inline; float: left; } #sidebar input[type=radio] { position: absolute; left: -999em; } #sidebar input[type=radio] + label { display: inline; height: 23px; width: 22px; background: url(/page/-/images/side-bar/input-checkbox.jpg) top left no-repeat; background-position: 0 -23px; margin: 10px 0 0px 0;} #sidebar input[type=radio]:checked + label { background-position: 0 0px; } #sidebar input[type=radio]:hover + label { background-position: 0 -46px; } #sidebar input[type=radio]:active + label { background-position: 0 -92px; } #sidebar input[type=radio]:checked:hover + label { background-position: 0 -68px; } #sidebar input[type=radio]:checked:active + label { background-position: 0 -114px; } #sidebar #signup-radio { float: right; } #sidebar div.check { width: 60px; float: left; } #sidebar #join-email p.checkP { font-size: 0.7em; color: #666; display: inline; margin-bottom: 15px; } #sidebar #join-email .module .check p { margin: 3px 0 10px 0; text-align: left; width: 25px; margin: 20px 0 0 5px} #sidebar #join-email div.module.labelize.clearfix form fieldset div.check label { display: block; height: 23px; width: 22px; } #recent-blog-entries .entry img { display: inline; float: left; margin-right: 10px; } #social-network li { font-size: 0.7em; display: inline; padding-bottom: 10px; color: #333; text-decoration: none; margin-right: 0px; list-style-type: none; list-style: none; } #social-network li a span { color: #666; font-weight: normal; margin: 0 8px 0 4px; position: relative; bottom: 12px; } #footer p { color: #333; font-size: 0.63em; margin-top: 20px; } #footer p a { color: #000; font-size: 1.4em;} #footer img { float: left; margin-right: 15px; } /* Counsil Rotator */ div#galleryc.stepcarousel { width: 550px; height: 400px; display: block; background-color: #e54a1f; background: url(/page/-/images/council/council-bg.gif) repeat-x bottom; border: 0; } #council-rotator #galleryc div.belt div.panel { width: 160px; margin: 5px 10px; padding: 0; background-color: #e97556; background-color: rgba(255,255,255, 0.3); padding:5px; height: 400px; color: #fff; } #council-rotator #galleryc div.belt div.panel:hover { background-color: #da6d50; background-color: rgba(255,255,255, 0.25); } #council-rotator #galleryc div.belt div.panel img { width: 160px; } #council-rotator #council-scroll-text { margin: 0 auto; text-align: center; float: left; font-size: 1.3em; color: #fff; margin-left: 90px; } #council-rotator #galleryc div.belt div.panel p { line-height: 1.25em; font-size: 0.8em; } #council-rotator { margin-bottom: 20px; } #council-rotator #back { float: left; } #council-rotator #next { float: right; } div#council-nav { background-color: #ac3719; padding: 15px; width: 520px;} #galleryc div.belt div.panel p a { color: #fff; } /* Map */ #promotion div.module a img { width: 100%; } #map_canvas div div div div.gmnoprint .gmnoprint { width: 300px; font-size: 0.8em; color: #000; height: 100px;} #map_canvas div div div div.gmnoprint { width: 100%; } #map-top p { width: 250px; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home-wrap { width: 600px; float: left; margin-right: 30px; } #home #text-area { background-color: #fff; padding-top: 0px; padding-left: 20px; margin-top: 0px;} /* Quiz */ #quiz { height: 320px; display: block; background-color: #e54a1f; background: url(/page/-/images/quiz/quiz-bg.gif) repeat-x; padding: 20px; width: 900px; overflow: hidden; } #quiz-page #text-area { padding: 0; width: 940px;} #quiz-container { margin-left: 200px; } /* Navigation */ #true a, #false a, #true2 a, #false2 a, #true3 a, #false3 a { display: block; width: 35px; height: 30px; background: url(/page/-/images/quiz/true-false.gif) no-repeat left top; color: #fff; text-decoration: none; font-size: 1.1em; padding: 8px 3px 8px 8px; float: left; text-align: center; margin: 5px 0 0 22px; } #false a.t-f-selected, #true a.t-f-selected, #false2 a.t-f-selected, #true2 a.t-f-selected, #false3 a.t-f-selected, #true3 a.t-f-selected { background: url(/page/-/images/quiz/true-false-selected.gif) no-repeat left top; } #false a.t-f-selected, #false2 a.t-f-selected, #false3 a.t-f-selected { margin-left: 90px; } #question #nextArrow a, #nextArrow2 a, #question #nextArrow3 a { background: url(/page/-/images/quiz/next-arrow.gif) no-repeat left top; margin-left: 500px; height:40px; color: #e74a20; padding: 33px 0 0 20px; width: 140px;text-decoration: none; color: #e74a20; display: block; position: absolute; top: 350px;} #quiz-nav { width: 700px; margin-top:-45px; margin-left: 240px; list-style-type: decimal; font-size: 0.85em;} #quiz-nav li { display: inline; text-align: center; list-style-type: decimal; list-style: decimal; } #quiz-nav li span { text-align: center; width: 91px; top: -10px; background: url(/page/-/images/quiz/quiz-nav.gif) no-repeat; color: #e54a1f; font-size: 0.9em; list-style-type: decimal; padding: 15px 0px 5px 0px; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin: 0px; float: none; } #tab05 p, #tab06 p, #tab07 p, #tab08 p { color: #fff; display: block;} .quiz-arrow ul { margin-top: -50px;margin-left: 350px; } /* Tabs */ #steps { width: 660px; height: 270px;float: left; } #remote-tab-1 h1 em { font-size: 0.7em; } ul.tabs-nav { position: relative; top: 292px; } .tabs-container { position: relative; top: -55px; height: 250px; background-color: transparent; color: #fff; } #tabs ul li { width: 120px; display: inline-table; margin-top: 130px; } ul.tabset .tab { padding: 30px 10px 10px 15px; height: 50px; width: 140px; display: block;} ul.tabs-nav li { height: 30px; } #tab05 h1, #tab06 h1, #tab07 h1, #tab08 h1, #tab09 h1 { font-size: 2.94em; text-align: left; color: #fff; margin-bottom: 0; display: block; } #tab05 h1 em, #tab06 h1 em, #tab07 h1 em, #tab08 h1 em, #tab09 h1 em { font-size: 0.7em; } /* Social Media Tab */ #tab09 h3 { text-align: left; } #tab09 p { color: #fff; } /* Books Tab */ div#tab08.tab, div#tab09.tab { margin-left: 200px; } #so-far { position: relative; top: -235px; left: 100px; z-index: 1; } #step-5-thanks { position: relative; z-index: 2; top: -30px;} #fundraising-graphic { position: absolute; top: 10px; left: 400px; } #fundraising-graphic-overlay img { position: absolute; top: 10px; left: 400px; } /* Questions */ #question #q1, #question2 #q2, #question3 #q3 { display: block; width: 162px; height: 136px; padding: 70px 10px 0 40px; text-align: center; font-size: 0.71em; background: url(/page/-/images/quiz/q1.jpg) no-repeat left top; margin-top: -45px;float: left; color: #333; } #question h2 { color: #333; display: block; float: left; line-height: 1.3em; font-size: 1.2em; margin-top: 0px;} #q1 p, #q2 p, #q3 p { font-weight: bold; padding: 0 5px; color: #636466; font-size: 0.9em; line-height: 1.3em;} #question h3, #question2 h3, #question3 h3 { color: #231f20; margin-top: 20px; text-align: left;} .question-area, .question-area2 { margin-left: 65px; } #q1 p.question-number, #q2 p.question-number, #q3 p.question-number { font-size: 1.4em; color: #e54a1f; margin-top: 5px; color: #e54a1f; } #q2-link, #q3-link, #q4-link, #q5-link { background: url(/page/-/images/quiz/next-arrow.gif) no-repeat left top; margin-left: 500px; height:70px; color: #e74a20; width: 150px;text-decoration: none; color: #e74a20; display: block; position: relative; left: 250px; top: 175px; z-index: 2; padding-bottom: 30px; padding-right: 30px; margin-bottom: -105px;} #q2 a. span { font-size: color #000; } #q1 p, #q2 p, #q3 p, #q4 p, #q5 p { color: #333; font-weight: bold; margin-top: -10px; margin-bottom: 10px; } #true-info, #false-info, #true-info2, #false-info2, #true-info3, #false-info3 { width: 200px; text-align: center; display: inline-table; margin-top: -30px;} #true-info h1, #false-info h1, #true-info2 h1, #false-info2 h1, #true-info3 h1, #false-info3 h1 { text-align: center; width: 100%;} /* Step 5 */ #step-5-social-media { width: 620px; height: 110px; padding: 20px 15px; background: url(http://k2kusa.bluestatedigital.com/page/-/images/quiz/step-6-media.gif) no-repeat; margin: 0 auto; } #step-5-social-media #myspacepostto { margin-left: 50px; } #step-5-social-media #facebook, #step-5-social-media #myspace, #step-5-social-media #twitter { width: 155px; float: left; margin-right: 15px; margin-left: 20px; height: 90px; display: inline; } #step-5-social-media #myspace { position: relative; left: -60px; } #step-5-social-media #facebook img, #step-5-social-media #myspace img , #step-5-social-media #twitter img { margin-left:10px; display: inline; width: 60px;} #step-5-social-media #facebook p, #step-5-social-media #myspace p , #step-5-social-media #twitter p { width: 115px; margin-left: 80px; font-size: 0.75em; color: #ef4d23; display: block; text-align: left; position: relative; top: -60px;} p.girl-bubble { width: 150px; display: block; height: 290px; float: left; background: url(/page/-/images/quiz/girl-bubble.png) no-repeat top left; margin-left: -60px; padding: 35px 130px 0 20px; color: #636466; font-size: 1.6em; text-align: center; position: absolute; top: 276px;} /*Quiz Form */ #quiz-nav li .active { background: url(/page/-/images/quiz/quiz-nav.gif) no-repeat; background-position: 0 -50px; } span#q1-nav, span#q2-nav, span#q3-nav, span#q4-nav, span#q5-nav { display: inline-table; text-align: center; width: 91px; padding: 10px 0; margin: 1px 10px; top: -10px; background: url(/page/-/images/quiz/quiz-nav.gif) no-repeat; background-position: 0 -55px;color: #e54a1f; }/*Quiz Form */ span#q2-nav { position: absolute; top: 180px; left: -340px; } #quiz-form { width: 689px; background: url(/page/-/images/quiz/quiz-form.gif) no-repeat top left; } #quiz-form input[type=text] { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; margin-right: 10px; padding: 8px; color: #666; font-size: 0.8em;} #quiz-form p { display: inline; } fieldset { display: inline; } fieldset #login { } fieldset#submit { display: block; margin-top: 60px; } #quiz-form input#zip { width: 135px; } #quiz-form input#email { width: 175px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ #content #age-gate-form { width: 62%; height: 40px; } #age-gate-form form { height: 30px; } #age-gate-form form fieldset input.button.submit { margin: 0; position: relative; top: 10px; border: 0; } #email-signup label { color: #666; margin-top: 10px; display: block; float: left; clear: both;} #email-signup input.button.submit { float: left; clear: both; display: block;} #email-signup fieldset {display: block; clear: both; } #email-signup input.text { float: left; clear: both; display: block; } #council-rotator div.entry.clearfix div.pic { float: left; display: block; margin-top: 0; } #council-rotator div.entry.clearfix div.margin { margin-left: 120px; } #council-rotator ul { margin-left: 20px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ #contribution .fieldlabel { font-weight: normal; font-weight: normal; color: #6; font-size: 0.9em; } #contribution { line-height: 1.4em; } #contribution span.radio { font-weight: normal; font-weight: normal; color: #6; font-size: 0.9em; margin-left: 10px; } /* Splash Page */ #splash #logo { float: none; width: 155px;margin: 0 auto; display: block; margin-bottom: 10px;} #splash #text-area { display: block; float: none; margin: 0 auto; width: 580px; box-shadow: 0px 0px 10px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.05); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.05); padding: 30px;} #splash #content p { color: #333; width: 280px; line-height: 1.2em; } #splash h2 { text-align: left; display: block; clear: left; } #splash #facebook-callout { margin: 30px 0; } #splash #facebook-callout img { display: inline; } #splash #facebook-callout p { margin-left: 10px; display: inline; margin-top: 10px; margin-bottom: 0; position: relative; top: -10px; } #splash #footer p { margin-left: 0px; display: inline-table; margin-top: 0px;} #splash #footer img { margin-top: 0px; } #splash img#julianne { float: right; } #splash img#savethechildren { display: block; clear: both; float } #splash #wrap { min-height: 100%; } #splash .pic { width: 260px; float: right; clear: ;} #splash .pic p { font-size: 0.63em; color: #333; text-align: left; margin-top: 6px;} #splash h1 { clear: both; text-align: center; margin-bottom: 20px;} #splash p#credit { float: none; clear: both; display: block; width: 100%; font-size: 0.63em; color: #333;} #splash #footer {position: relative; margin-top: 20px; /* negative value of footer height */ height: 50px; clear:both; margin-left: 160px; width: 600px; margin-bottom: 10px;} #splash h4 { line-height: 2.5em; } #splash #save { margin-top: 40px; } #splash #col1 { float: left; } /* 07 =UTILITY ---------------------------------------------------------- */ .pic p { font-size: 0.8em; color: #666; line-height: 1.3em; width: 100%; float: left; margin-top: 5px;} .pic { float: left; margin: 10px 15px 15px 0; height: 100%; width: 100px; clear: both;} .pic img { width: 100%; } .module { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: #fff; padding: 14px 15px;} #text-area .module, #text-area .module { background-color: #f3f3f3; width: 300px; margin: 0 auto; } #fairness-map .module { padding: 0; margin: 0; background-color: none; } #fairness-map p a, #fairness-map p a:visited { color: #fff; } #fairness-map div.module p a:hover { color: #333; } .button, .button a { background-color: #e74a20; color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-weight: bold; padding: 5px 20px; font-size: 0.8em; text-align: center; float: right; display: inline; text-decoration: none; } .button:hover, .button a:visited:hover { background-color: #616264; color: #fff; } .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;} #content table tbody tr td.left a img { margin-right: 20px; } #hero { display: block; margin-top: 10px; height: 262px; background: #ee4d23; padding: 10px; width: 584px; float: left; } #hero-cycle { display: block; height: 276px; top: 0; left: 0; width: 584px; overflow: hidden; float: left; position: relative; z-index: 1;} #hero-cycle div.entry { position: relative; top: 0; left: 0; height: 276px; } #hero img { float: left;} p.firstP { font-size: 21px; margin-bottom: 20px; } .hero-text { display: block; background: rgb(255,255,255); background: rgba(255,255,255,0.7); height: 50px; clear: both; position: relative; top: -85px; padding: 15px 20px 20px; color: #fff; margin: 0; width: 590px; z-index: 99;} .hero-text h2 { color: #333; font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; margin-top: 0;} .hero-text p { color: #333; width: 90%; } .hero-image { width: 584px; } .hero-image img { width: 100%; max-width: 100%; } #hero-pager { position: relative; z-index: 99; float: right; top: -90px; left: -10px;} #hero-pager a { background: #dc4720; background: rgba(238,77,33,0.7); padding: 5px 10px;margin: 0 3px; color: #fff; } #hero-pager a.activeSlide { color: #fff; background: #dc4720; background: rgba(238,77,33,0.9); } #hero-pager a:hover { background: #dc4720; background: rgba(238,77,33,0.9); text-decoration: none; } #action-center { display: block; float: right; width: 280px; margin-left: 0px; position: relative; z-index: 2; background: rgba(238,77,33,1); height: 206px; padding-top: 30px; } #action-center li a { padding: 10px; background: #fff; list-style-type: none; display: block; text-align: center; width: 92%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #2e2e2e;} #action-center li a:hover { background: #fff; background: rgba(255,255,255,0.8); } #action-center li { margin: 15px; display: block; }