/* ------------------------------------------------- CSS v2.0 Oceana: Be An Ocean Hero Created By: Poccuo Contact: info@poccuo.com ------------------------------------------------- */ /* ------------------------------------------------- */ /* -------------------GLOBAL STYLES----------------- */ /* ------------------------------------------------- */ body { background-color: #00243D; background-image: url(_images/global/background.gif); background-repeat: repeat-x; color: #FFF;} a { color: #FFF;} a:hover { color: #FFF; text-decoration: none; } a:visited { color: #FFF;} #text a { color: #00aef0; } /* ------------------------------------------------- */ /* -----------------------FOUNDATION---------------- */ /* ------------------------------------------------- */ #wrapper { overflow: hidden; height: 1%; margin: 0 auto 20px auto; width: 960px; } #header { overflow: hidden; height: 1%; } #header #logo { float: left; margin-top: 20px;} #content { overflow: hidden; height: 1%; width: 960px; background-color: #FFF; } #footer { overflow: hidden; height: 1%; width: 960px; border-top: 1px #004A80 solid; margin: 40px 0 0 0;} #headline { overflow: hidden; height: 1%; width: 904px; padding: 25px 20px 15px 20px; margin: 8px; background-color: #db4500; background-image: url(_images/global/headline_background.gif); background-repeat: repeat-x; } #headline h1 { font-size: 20px; line-height: 26px; color: #FFF; } #headline h1 p { margin: 0; } #body { overflow: hidden; height: 1%; width: 916px; margin: 8px; padding: 14px; background-color: #40B0D3; min-height: 200px;} #text { overflow: hidden; height: 1%; width: 864px; margin: 8px; padding: 40px; background-color: #FFF; min-height: 200px; color: #004A80; font-size: 14px; line-height: 1.3em;} #text h1 { font-size: 28px; color: #E56700; border-bottom: 1px #53B7E8 solid; margin: 0 0 1em 0; padding: 0; padding-bottom: 30px; font-weight: bold; } #text h2 { font-size: 21px; color: #00A7B2; margin: 0 0 .5em 0; padding: 0; } #text h3 { font-size: 16px; color: #00A7B2; margin: 0 0 .5em 0; padding: 0; } #text ul, #text ol { margin: 0 0 1em 1em; padding: 0;} #text ul li, #text ol li { margin: 0; padding: 0 0 .5em 0;} /* ------------------------------------------------- */ /* -----------------------MENU---------------------- */ /* ------------------------------------------------- */ ul.header_menu { clear: both; overflow: hidden; height: 50px; width: 960px; margin: 0 0 25px 0; padding: 0; background-image: url(_images/global/menu_sprite.gif); } ul.header_menu li { display: inline; float: left; text-indent: -10000px;} #s-oh-make-the-pledge ul.header_menu { background-position: 0 0;} #sv-oh-vote ul.header_menu { background-position: 0 -50px; } #state_thr ul.header_menu { background-position: 0 -100px; } ul#share_menu { width: 76px; height: 43px; float: right; margin: 0 -17px 0 0; padding: 0 0 0 87px; background-image: url(_images/global/share/share_01.png); background-repeat: no-repeat;} ul#share_menu li { margin: 0; padding: 0; display: inline; float: left; } ul#share_menu li#facebook a { display: block; width: 30px; height: 43px; text-indent: -10000px; background-image: url(_images/global/share/share_02.png); } ul#share_menu li#twitter a { display: block; width: 30px; height: 43px; text-indent: -10000px; background-image: url(_images/global/share/share_03.png); } ul#share_menu li#email a { display: block; width: 28px; height: 43px; text-indent: -10000px; background-image: url(_images/global/share/share_04.png); } ul#share_menu li#share a { display: block; width: 40px; height: 43px; text-indent: -10000px; background-image: url(_images/global/share/share_05.png); } /* ------------------------------------------------- */ /* ----------------------CONTENT-------------------- */ /* ------------------------------------------------- */ /*//////////// MAKE THE PLEDGE /////////////////*/ #s-oh-make-the-pledge #body #form_wrapper { width: 480px; float: left;} #s-oh-make-the-pledge #body #form_wrapper fieldset { border: none; margin: 10px 0 0 0; padding: 0; border: 1px #40B0D3 solid; } #s-oh-make-the-pledge #body #form_wrapper legend { font-size: 18px; font-family: Arial; font-size: 24px; color: #FFFFFF; margin: 0; padding: 0; width: 480px; text-align: center; font-weight: normal;} #s-oh-make-the-pledge #body #form_wrapper img { vertical-align: middle; margin: 0 5px 0 0;} #s-oh-make-the-pledge #body #form ul { width: 280px; margin: 30px 0 0 100px; padding: 0;} #s-oh-make-the-pledge #body #form ul li { width: 280px; margin: 0; padding: 0; list-style-type: none; font-family: arial; text-transform: uppercase; font-size: 11px; color: #FFF;} #s-oh-make-the-pledge #body #form ul li.one_per { width: 260px; clear: both; margin: 0 0 10px 0; text-align: left; } #s-oh-make-the-pledge #body #form ul li.one_per label { width: 260px; display: block; padding: 0 0 1px 0;} #s-oh-make-the-pledge #body #form ul li.one_per input { width: 260px; margin: 0 0 8px 0; border: 3px #FFF solid; background-color: #FFF; padding: 3px; font-family: Arial, sans-serif; font-size: 14px;} #s-oh-make-the-pledge #body #form ul li.two_per_first { width: 140px; display: block; float: left; text-align: left; } #s-oh-make-the-pledge #body #form ul li.two_per_last { width: 140px; display: block; float: left; text-align: left; } #s-oh-make-the-pledge #body #form ul li.two_per_first input, #s-oh-make-the-pledge #body #form ul li.two_per_last input { width: 119px; margin: 0 0 16px 0; border: 3px #FFF solid; background-color: #FFF; padding: 4px; font-family: Arial, sans-serif; font-size: 14px; } #s-oh-make-the-pledge #body #form ul li.two_per_first label, #s-oh-make-the-pledge #body #form ul li.two_per_last label { width: 119px; display: block; padding: 0 0 1px 0;} #s-oh-make-the-pledge #body #form ul li#submit_wrapper input#submit { text-align: center; width: 270px; height: 45px; margin: 10px 0 20px 0; background-color: #00A7B2; color: #FFF; border: 1px #FFF solid; font-family: Arial, sans-serif; font-weight: bold; font-size: 22px;} #s-oh-make-the-pledge #body #form ul li#submit_wrapper input#submit:hover { background-color: #4E991F; cursor: pointer;} #s-oh-make-the-pledge #body #form ul li input:focus { background-color: #FBFFC7;} #s-oh-make-the-pledge #body form#form ul li label.error { display: hidden; font-size: 0em; border: none; color: #F15A24; background-color: #40B0D3; } #s-oh-make-the-pledge #body form#form ul li input.error { border: 3px #F15A24 solid; background-color: #FFF; color: #F15A24; } #s-oh-make-the-pledge #body #video { background-color: #CCC; width: 425px; height: 344px; float: right; } /*//////////// VOTE FOR HEROES /////////////////*/ #sv-oh-vote #body { position: relative; } #sv-oh-vote #body h2 { font-size: 20px; color: #FFF; margin: 10px 0; } #sv-oh-vote #body h2 .instructions { font-size: 12px; } #sv-oh-vote #body #left_form { width: 440px; height: 340px; float: left; margin: 0 20px 0 12px; } #sv-oh-vote #body #right_form { width: 440px; height: 340px; float: left; } #sv-oh-vote #body #left_form .button, #sv-oh-vote #body #right_form .button { overflow: hidden; position: relative; height: 140px; width: 140px; margin: 0 5px 5px 0; float: left; } #sv-oh-vote #body #left_form .button.last, #sv-oh-vote #body #right_form .button.last { margin: 0 0 5px 0; } /*#sv-oh-vote #body #left_form .button input, #sv-oh-vote #body #right_form .button input { height: 140px; width: 140px; }*/ #sv-oh-vote #body #left_form .button .folded_corner { height: 140px; width: 140px; position: absolute; top: 0px; left: 0px; background-image: url(_images/be_a_hero/button_border_left.gif); display: none; } #sv-oh-vote #body #left_form .button:hover .folded_corner { display: block !important; } #sv-oh-vote #body #right_form .button .folded_corner { height: 140px; width: 140px; position: absolute; top: 0px; left: 0px; background-image: url(_images/be_a_hero/button_border_right.gif); display: none; } #sv-oh-vote #body #right_form .button:hover .folded_corner { display: block !important; } #sv-oh-vote #body #left_form .button.active .folded_corner { height: 140px; width: 140px; position: absolute; top: 0px; left: 0px; background-image: url(_images/be_a_hero/button_fold.gif); display: block !important; } #sv-oh-vote #body #right_form .button.active .folded_corner { height: 140px; width: 140px; position: absolute; top: 0px; left: 0px; background-image: url(_images/be_a_hero/button_fold.gif); display: block !important; } #sv-oh-vote #body #left_form .button.active:hover .folded_corner { display: block; background-position: -140px; } #sv-oh-vote #body #right_form .button.active:hover .folded_corner { display: block; background-position: -280px; } #sv-oh-vote #body .popup { z-index: 300; overflow: hidden; width: 312px; height: 258px; padding: 20px;} #sv-oh-vote #body .popup h3 { font-size: 19px; line-height: 24px; color: #E56700; width: 300px; margin: 0 0 5px 0; padding: 0; } #sv-oh-vote #body .popup p.click_me { font-size: 12px; line-height: 16px; color: #4E991F; width: 300px; margin: 0 0 12px 0; padding: 0; } #sv-oh-vote #body .popup p { font-size: 13px; line-height: 17px; color: #0096C4; width: 300px; margin: 0 0 13px 0; padding: 0; } #sv-oh-vote #body #left_form .popup { background-image: url(_images/be_a_hero/popup_bkgd_left.png); background-repeat: no-repeat; margin: 0 !important; margin: -10px 0 0 140px; } #sv-oh-vote #body #right_form .popup { background-image: url(_images/be_a_hero/popup_bkgd_right.png); background-repeat: no-repeat; margin: 0 !important; margin: 0 0 0 -355px; padding-left: 35px; width: 300px;} #sv-oh-vote #body #left_form .popup.top.left_a { position: absolute; top: 50px !important; top: 70px; left: 166px !important; left: 40px; } #sv-oh-vote #body #left_form .popup.top.left_b { position: absolute; top: 50px !important; top: 70px; left: 311px !important; left: 185px; } #sv-oh-vote #body #left_form .popup.top.left_c { position: absolute; top: 50px !important; top: 70px; left: 456px !important; left: 330px; } #sv-oh-vote #body #left_form .popup.bottom.left_d { position: absolute; top: 114px !important; top: 215px; left: 166px !important; left: 40px; } #sv-oh-vote #body #left_form .popup.bottom.left_e { position: absolute; top: 114px !important; top: 215px; left: 311px !important; left: 185px; } #sv-oh-vote #body #left_form .popup.bottom.left_f { position: absolute; top: 114px !important; top: 215px; left: 456px !important; left: 330px; } #sv-oh-vote #body #right_form .popup.top.right_a { position: absolute; top: 50px !important; top: 70px; left: 133px !important; left: 500px; } #sv-oh-vote #body #right_form .popup.top.right_b { position: absolute; top: 50px !important; top: 70px; left: 278px !important; left: 645px; } #sv-oh-vote #body #right_form .popup.top.right_c { position: absolute; top: 50px !important; top: 70px; left: 423px !important; left: 790px; } #sv-oh-vote #body #right_form .popup.bottom.right_d { position: absolute; top: 114px !important; top: 215px; left: 133px !important; left: 500px; } #sv-oh-vote #body #right_form .popup.bottom.right_e { position: absolute; top: 114px !important; top: 215px; left: 278px !important; left: 645px; } #sv-oh-vote #body #right_form .popup.bottom.right_f { position: absolute; top: 114px !important; top: 215px; left: 423px !important; left: 790px; } #sv-oh-vote #body #form input#submit { text-align: center; width: 280px; height: 45px; margin: 30px 0 20px 315px; background-color: #00A7B2; color: #FFF; border: 1px #FFF solid; font-family: Arial, sans-serif; font-weight: bold; font-size: 22px; } #sv-oh-vote #body #form input#submit:hover { background-color: #4E991F; cursor: pointer; } #sv-oh-vote #body #form #unknown_user, #sv-oh-vote #body #form #known_user { width: 320px; padding: 30px 20px 10px 20px; clear: both; margin: 20px 0 0 280px; font-size: 14px;} #sv-oh-vote #body #form #unknown_user h3, #sv-oh-vote #body #form #known_user h3 { color: #fff; text-align: left; font-style: normal;} #sv-oh-vote #body #form #known_user h3 { font-size: 1.2em; } #sv-oh-vote #body #form #known_user { text-align: center; font-style: italic; font-size: 1.5em} #sv-oh-vote #body #form #known_user span { background-color: #7ac8e0; padding: 0 2px; } #sv-oh-vote #body #form #unknown_user label.error { display: none !important; font-size: 12px; padding: 2px; width: 150px; display: block; } #sv-oh-vote #body #form #unknown_user input.error { border-color: #8A1F11; background-color: #FBE3E4; } #sv-oh-vote #body #form #unknown_user table { margin: 0 auto; width: 300px; border: 0; } #sv-oh-vote #body #form #unknown_user table td { } #sv-oh-vote #body #form #unknown_user table td.label { text-align: right; } #sv-oh-vote #body #form li { list-style: none; } #sv-oh-vote #body #form #unknown_user input { border: 1px solid #fff; padding: 4px; font-size: 12px; color: #111; } /*//////////// BE A HERO /////////////////*/ #s-oh-make-the-pledge #body { padding-bottom: 50px;} #s-oh-make-the-pledge #body #col_a { overflow: hidden; height: 1%; width: 300px; float: left; margin: 10px 0 0 10px;} #s-oh-make-the-pledge #body #col_b { overflow: hidden; height: 1%; width: 300px; float: left; margin: 10px 0 0 0;} #s-oh-make-the-pledge #body #col_c { overflow: hidden; height: 1%; width: 290px; float: left; margin: 10px 10px 0 0;} #s-oh-make-the-pledge #body h2 { font-size: 20px; color: #FFF; margin: 15px 0; padding: 0 0 0 10px;} #s-oh-make-the-pledge #body ul { margin: 0 0 0 25px; font-size: 14px; width: 250px;} #s-oh-make-the-pledge #body ul li { margin-bottom: 10px; } /* ------------------------------------------------- */ /* ----------------------FOOTER--------------------- */ /* ------------------------------------------------- */ #footer_links { float: right; width: 28 0px; margin: 20px 0;} #footer_links ul { float: right; margin: 0 0 10px 0; padding: 0;} #footer_links ul li { display: inline; float: right; } #footer_links ul li a { font-size: 11px; text-decoration: none; font-family: Arial; color: #00B0E7; margin: 0 0 0 10px;} #footer_links ul li a:hover { text-decoration: underline;} #sponsor_logos { margin-top: 10px; width: 590px; float: left;} #sponsor_logos ul { margin: 0; padding: 0; } #sponsor_logos ul li { margin: 0 5px 0 0; padding: 0; display: inline;} #copyright { font-size: 10px; font-family: Arial; color: #004A80; float: right;} /* ------------------------------------------------- */ /* ---------------------SPECIALS-------------------- */ /* ------------------------------------------------- */ .hidden { display: none; } a.addthis_button_email span.at300bs { display: none; } a.addthis_button { }