/*active links in the newslists*/ ul.newsList li a.active { color: inherit; } ul.newsList li a.active:hover { color: #E08E44; } /* - - - - - - - - - - - - - - - - - - - - - - - - - - - Pixel to Em Helper: 8px = 0.50em 20px = 1.25em 9px = 0.56em 21px = 1.31em 10px = 0.63em 22px = 1.38em 11px = 0.69em 23px = 1.44em 12px = 0.75em 24px = 1.50em 13px = 0.81em 25px = 1.56em 14px = 0.88em 26px = 1.63em 15px = 0.94em 28px = 1.75em 16px = 1em 30px = 1.88em 17px = 1.06em 32px = 2.00em 18px = 1.13em 36px = 2.25em 19px = 1.19em 40px = 2.50em - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /**************** Global *****************/ * {padding: 0; margin: 0;} body {background: #0a3f64 url("_imgs/bg/bodyBg.gif") center center repeat-y; font-size: 100%; line-height: 1.125em; font-family: arial, verdana, sans-serif;} /**************** Bones *****************/ #container {width: 980px; margin: 0 auto !important; background: #fff;} #header { position: relative; width: 980px; background: url("_imgs/bg/headerBg.jpg") 0 0 repeat-y; padding: 1px 0 0 0; z-index:8;} #header.noNav { padding-bottom: 1px; } #header #logo {height: 47px; margin: 11px 12px; width: 222px; text-indent: -9999px; overflow: hidden; background: transparent url("_imgs/elements/logo.gif") 0 0 no-repeat;} .es #header #logo { background-image: url("_imgs/elements/logo_es.gif"); } #header #logo a { height: 47px; width: 222px; display: block; } #main { margin: 26px 10px 0 10px; padding: 4px 0 10px 0; background: #fff url("_imgs/elements/shadowV.gif") 182px 0 repeat-y; z-index:0; min-height:600px; overflow: auto;} #main-our-work { font-size: .81em; margin: 0; padding: 40px 65px; background: #fff url("_imgs/elements/shadowH.gif") 0 0 repeat-x; } .psa #main-our-work { padding: 40px 30px; width: 920px; overflow: hidden; } body.w-nav #main-our-work { background-image: none; } body.donation #main-our-work { padding: 40px 20px; } #leftCol {width: 170px; float: left; } #rightCol { position: relative; width: 750px; margin: 0 0 0 205px; } #footer { position: relative; clear: both; margin: 0; background: #6fb0cc; border-top: 1px solid #2586B1; color: #fff; padding: 10px 0 10px 0; width: 100%; overflow: hidden;} #footer a { color: #fff; text-decoration: none; } #footer a:hover { text-decoration: underline; } #fullView { border-bottom: 0px solid #ddd; padding-bottom: 0px; margin-bottom: 0px; overflow: hidden; } /**************** Menus *****************/ /** Main Nav **/ #m-nav { z-index: 9999; padding: 0 0 6px 0; background: #fff url("_imgs/elements/shadowH.gif") bottom left repeat-x; width: 100%; } /* padding is to achieve over:hidden; without doing it since it does not display the dropdowns */ #m-nav ul { height: 32px; background: #2487b2 url("_imgs/bg/mnavBg.png"); border-top: 1px solid #fff; border-bottom: 1px solid #fff; list-style: none; float: left; display: inline; margin: 0; } /* Primary */ #m-nav ul#primary { width: 629px; text-align: center; padding-left: 3px; } #m-nav ul#primary li a { display: block; color: #fff; height: 32px; overflow: hidden; text-indent: -9999px; background: url("_imgs/elements/mnav.png");} #m-nav ul#primary li:hover > a, #m-nav ul#primary li.hovering > a, #m-nav ul#primary li > a.here { background-color: #fff; color: #E56700; } #m-nav ul#primary li { position: relative; float: left; display: inline; height: 32px; margin: 0 2px 0 3px; } /* background image positioning (these will need to be recoded for damn IE6 */ /* Might need to move down b/c of reordering */ #m-nav ul#primary li#aboutUs a { background-position: 0 0; width: 87px; } #m-nav ul#primary li#ourWork a { background-position: -87px 0; width: 88px; } #m-nav ul#primary li#supportOceana a { background-position: -175px 0; width: 130px; } #m-nav ul#primary li#blog a { background-position: -305px 0; width: 59px; } #m-nav ul#primary li#livingBlue a { background-position: -364px 0; width: 96px; } #m-nav ul#primary li#newsMedia a { background-position: -460px 0; width: 121px; } #m-nav ul#primary li#aboutUs ul li a, #m-nav ul#primary li#ourWork ul li a, #m-nav ul#primary li#supportOceana ul li a, #m-nav ul#primary li#blog ul li a, #m-nav ul#primary li#livingBlue ul li a, #m-nav ul#primary li#newsMedia ul li a { width: auto; } /* use body to give :hover state the precendce */ body #m-nav ul#primary li#aboutUs:hover a, #m-nav ul#primary li#aboutUs.hovering a { background-position: 0 -64px; } #m-nav ul#primary li#aboutUs a.here { background-position: 0 -32px; } body #m-nav ul#primary li#ourWork:hover a, #m-nav ul#primary li#ourWork.hovering a { background-position: -87px -64px; } #m-nav ul#primary li#ourWork a.here { background-position: -87px -32px; } body #m-nav ul#primary li#supportOceana:hover a, #m-nav ul#primary li#supportOceana.hovering a { background-position: -175px -64px; } #m-nav ul#primary li#supportOceana a.here { background-position: -175px -32px; } body #m-nav ul#primary li#blog:hover a, #m-nav ul#primary li#blog.hovering a { background-position: -305px -64px; } #m-nav ul#primary li#blog a.here { background-position: -305px -32px; } body #m-nav ul#primary li#livingBlue:hover a, #m-nav ul#primary li#livingBlue.hovering a { background-position: -364px -64px; } #m-nav ul#primary li#livingBlue a.here { background-position: -364px -32px; } body #m-nav ul#primary li#newsMedia:hover a, #m-nav ul#primary li#newsMedia.hovering a { background-position: -460px -64px; } #m-nav ul#primary li#newsMedia a.here { background-position: -460px -32px; } /* Drop down */ #m-nav ul#primary li ul { z-index: 9999; font-size: .75em; text-align: left; display: none; position: absolute; top: 32px; left: -2px; height: auto; background: #fff; border: 2px solid #2586b1; border-top: 0; float: none; } #m-nav ul#primary li ul li { float: none; display: block; height: auto; background: #fff; border-bottom: 1px solid #ddd; } #m-nav ul#primary li ul li a { text-decoration: none; font-weight: bold; padding: .5em 0; color: #195580; height: auto; overflow: visible; text-indent: 0; background: #fff; } #m-nav ul#primary li ul li a span { font-weight: normal; display: block; color: #333; font-size: .94em; line-height: 1.3em; } #m-nav ul#primary li ul li a:hover span { color: #111; } /* Combo drop down functionality */ #m-nav ul#primary li.hovering ul, #m-nav ul#extended li.hovering ul { display: block; width: auto; } #m-nav ul#primary li.hovering, #m-nav ul#extended li.hovering { height: auto; } #m-nav ul#primary li ul li.last, #m-nav ul#extended li ul li.last { border: 0; } /* Different menu/column types */ #m-nav ul#primary li ul.standard { width: 200px; padding: 6px 6px 0 6px; } #m-nav ul#primary li ul.descriptive { width: 280px; padding: 6px 6px 0 6px; } #m-nav ul#primary li ul.image2col li.imageInset, #m-nav ul#primary li ul.image1col li.imageInset { width: 232px; margin: 0 8px 0 0; padding: 0 7px 0 0; border-right: 1px solid #ddd; border-bottom: 0;} #m-nav ul#primary li ul li.imageInset a img { border: 0; } #m-nav ul#primary li ul.image2col { width: 698px; padding: 7px; } #m-nav ul#primary li ul.image2col li { width: 217px; float: left; display: inline; margin: 0 6px 0 0; } #m-nav ul#primary li ul.image1col { width: 438px; padding: 8px; } #m-nav ul#primary li ul.image1col li { width: 182px; float: left; display: inline; margin: 0 8px 0 0; } /** promo images for menu, basically a rehash of the explore promo on homepage */ #m-nav ul#primary li ul li.imageInset a { position: relative; display: block; height: 216px; padding: 0;} #m-nav ul#primary li#livingBlue ul li.imageInset a { position: relative; display: block; height: 246px; padding: 0;} #m-nav ul#primary li ul li.imageInset a img { border: 0; } #m-nav ul#primary li ul li.imageInset a div { color: #fff; display: block; width: 232px; position:absolute; left: 0; bottom: 0; padding: 5px 0; background: transparent url("_imgs/bg/exploreBg.png") top left repeat-x; } #m-nav ul#primary li ul li.imageInset a:hover div { color: #e0e0e0; background-position: bottom left; } #m-nav ul#primary li ul li.imageInset a div span { padding: 0 5px 0 10px; display: block; background: transparent url("_imgs/elements/arrowRight.gif") -1px center no-repeat; font-size:12px; color: #fff;} /* Extended */ #m-nav ul#extended { width: 348px; height: 32px; } #m-nav ul#extended li { float: left; display: inline; width: 87px; text-align: center; position: relative;} #m-nav ul#extended li a { background: #e08e44 url("_imgs/elements/mnav.png"); height: 32px; width: 87px; display: block; overflow: hidden; text-indent: -9999px; } /* background image positioning */ #m-nav ul#extended li#explore a { background-position: -581px 0; background-repeat: no-repeat; } #m-nav ul#extended li#join a { background-position: -668px 0; } #m-nav ul#extended li#act a { background-position: -755px 0; } #m-nav ul#extended li#donate a { background-position: -842px 0; } #m-nav ul#extended li#join a:hover, #m-nav ul#extended li#join a.here { background-position: -668px -32px; } #m-nav ul#extended li#act a:hover, #m-nav ul#extended li#act a.here { background-position: -755px -32px; } #m-nav ul#extended li#donate a:hover, #m-nav ul#extended li#donate a.here { background-position: -842px -32px; } /* Drop down */ #m-nav ul#extended ul { padding: 0; z-index: 9999; font-size: .75em; text-align: left; display: none; position: absolute; top: 32px; left: 1px; height: auto; border:0; float: none; background-image: none;} #m-nav ul#extended ul { width: 347px !important; background: #2c939a;} #m-nav ul#extended ul li, #m-nav ul#extended ul li a { width: auto; background: #2c939a; } #m-nav ul#extended li ul li { float: none; display: block; height: auto; background: #2c939a; clear: both; border-bottom: 1px solid #56a9ae;} #m-nav ul#extended li ul li a { font-size: 12px; height:auto; font-weight: 100; text-align: left; display: block; width: 335px; padding: 6px; text-decoration: none; color: #fff; overflow:hidden; text-indent: 0; background: #2c939a; } #m-nav ul#extended li ul li a:hover {} #m-nav ul#extended li ul li a:hover strong { color: #E56700; } #m-nav ul#extended li ul li a img { float: left; display: inline; margin: 0 8px 0 0; } #m-nav ul#extended li ul li a span { font-size: 16px; display: block; font-weight: 100; margin: .5em 0;} /* handle explore button on drop down */ body #m-nav ul#extended li#explore:hover a, #m-nav ul#extended li#explore.hovering a, #m-nav ul#extended li#explore a.here { background-position: -581px -32px; } /** Footer Nav **/ #f-nav { overflow: auto; margin: 0 0 0 20px; width: 480px; float: left; } #f-nav ul { margin: 0; float: left; list-style: none; width: 120px;} #f-nav ul li { padding: 0; font-size: .7em; line-height: 1.5em; } /** Logo Buttons -- Footer **/ #f-buttons ul { list-style: none; float: left; height: 70px; width: 212px; margin: 1px 20px 0 0;} #f-buttons ul li a img { border: 0; } #f-buttons ul li { line-height: 1em; padding: 0 10px 3px 0; margin: 0; display: inline; } #f-buttons ul li#charityNavigator { float: right; padding: 0; } img.caption{border:none !important; padding:0 !important; margin:0 !important;text-decoration:none !important;} .image-caption-container {padding:auto !important; margin:0 !important;text-decoration:none !important; width:auto !important;} .image-caption {font-size:11px; color:#666666; font-weight:normal !important; line-height:14px; text-decoration:none !important; margin-left:10px;} .image-caption a {text-decoration:none !important;} div#explorePhotoCaption {font-size:11px; color:#444; font-weight:normal; line-height:15px; margin: 7px 0 0 0;} div#explorePhotoCaption strong { display: block; text-transform: uppercase; letter-spacing: .05em;} /**************** Pages *****************/ p.intro { font-size: 1.1em; line-height: 1.25em; font-weight: bold; color: #195580; margin: 0 0 1.125em 0; } p.small { font-size: 80%; line-height: 1.2em; } h2 { color: #E56700; font-size: 1.7em; font-weight: normal; line-height: 26px; margin-bottom: 15px;} h3 { font-size: 1em; font-weight: bold; color: #195580; margin-top: 1.5em; } #main-our-work { font-size: .81em; } #main-our-work p, #main-our-work h3, #main-our-work h4 { margin: 0 0 1em 0; } #main-our-work .ak-intro h3 { margin-top: 2em; } ul { margin: 0 0 1em 1em; } ol.outline { list-style-type: decimal; } ol.outline ol { list-style-type: lower-latin; } ol.outline ol ol { list-style-type: lower-roman; } ol.outline li { margin-left: 1.5em; margin-bottom: 1em;} ol.outline ol li ol li { margin-bottom: 0; } a { color: #2487B2; text-decoration: underline; } a:hover { color: #E08E44; text-decoration: none; } a#campaignOverview { display: block; position: absolute; float:right; top: -10px; clear:right; right: 0; color: #E56700; text-decoration: none; } a#campaignOverview:hover { text-decoration: underline; } p#f-copyright { font-size: .63em; color: #195580; text-align: right; position: absolute; bottom: 65px; right: 15px;} /** images **/ img.float-right, #main-our-work p.float-right { float: right; margin:0 0 1em 2.5em;} /** content **/ div.ak-intro { clear: both; width: 100%; overflow: hidden; margin: 0 0 1em 0; } div.ak-action { clear: both; width: 100%; overflow: hidden; margin: 1em 0 0 0; position: relative; } body.donation div.ak-action { float: left; clear: left; width: 700px;} body.donation div.ak-sidebar { width: 220px; margin: 2em 0 0 720px; } body.psa div.ak-sidebar { width: auto; margin-top: 15px; } /**************** Forms *****************/ /** GENERAL ELEMENTS **/ html body form input.bigOrange { background: #d97313 url("_imgs/bg/donateBg.gif") repeat-x; font-weight: bold; color: #fff; font-size: 18px; padding: 12px 50px; border: 1px solid #fff;} html body form input.bigOrange:hover { background-image: none; cursor: pointer; } .ak-action form .submit input.disabled { background: #999; color: #ccc; border: 1px solid #ccc; } /** ERROR HANDLING **/ ul#ak-errors { margin: 0; display: none; } ul#ak-errors.contains { display: block; border: 1px solid; color: #d51e2d; background: #f7d2d5; padding: 10px; margin: 0 0 1em 0;} ul#ak-errors.contains li { margin-left: 20px; } .ak-uInfo form.actionForm div.formRow input.ak-error, .ak-uInfo form.actionForm div.formRow textarea.ak-error, .ak-uInfo form.actionForm div.formRow select.ak-error { border-color: #d51e2d !important; background: #f7d2d5 !important; } /** ACTION FORM **/ .ak-uInfo { float: left; width: 290px; padding: 40px 55px; overflow: hidden; background: #34678c; } .ak-uInfo form.actionForm, form.actionForm .ak-uInfo { width: 290px; margin: 0 auto; color: #fff; } .ak-uInfo form.actionForm input, .ak-uInfo form.actionForm select, .ak-uInfo form.actionForm textarea, form.actionForm .ak-uInfo input, form.actionForm .ak-uInfo select, form.actionForm .ak-uInfo textarea { font-family: arial, helvetica, sans-serif; font-size: 13px; color: #333;} .ak-uInfo form.actionForm div.formRow, form.actionForm .ak-uInfo div.formRow { margin-bottom: 1em; } .ak-uInfo form.actionForm div.formRow label, form.actionForm .ak-uInfo div.formRow label { display: block; font-weight: bold;} .ak-uInfo form.actionForm div.formRow.text input, .ak-uInfo form.actionForm div.formRow.text-zip input, form.actionForm .ak-uInfo div.formRow.text input, form.actionForm .ak-uInfo div.formRow.text-zip input { width: 280px; border: 1px solid #eee; background: #fff; padding: 4px;} .ak-uInfo form.actionForm div.formRow.text-zip input, form.actionForm .ak-uInfo div.formRow.text-zip input { width: 150px; } .ak-uInfo form.actionForm div.formRow.select select, form.actionForm .ak-uInfo div.formRow.select select { width: 290px; } .ak-uInfo form.actionForm div.formRow.textarea textarea, form.actionForm .ak-uInfo div.formRow.textarea textarea { width: 280px; height: 150px; border: 1px solid #eee; background: #fff; padding: 4px; } .ak-uInfo form.actionForm div.formRow.submit, form.actionForm .ak-uInfo div.formRow.submit { text-align: center; } .ak-uInfo form.actionForm div.formRow.submit input, form.actionForm .ak-uInfo div.formRow.submit input { background: #d97313 url("_imgs/bg/donateBg.gif") repeat-x; font-weight: bold; color: #fff; font-size: 18px; padding: 12px 50px; border: 1px solid #fff; margin-top: 1em;} .ak-uInfo form.actionForm div.formRow.submit input:hover, form.actionForm .ak-uInfo div.formRow.submit input:hover { background-image: none; } /** ACTION STATEMENT **/ .ak-statement { margin: 0 0 0 420px; padding: 20px; width: 390px; background: #eee; } /** TAF **/ form.taf-form { width: 600px; padding: 40px 55px; overflow: hidden; background: #34678c; color: #fff; } form.taf-form div.taf-left, form.taf-form div.taf-right { width: 280px; float: left; } form.taf-form div.taf-right { margin-left: 40px; } form.taf-form label { font-weight: bold; margin-bottom: .5em; display: block; } form.taf-form #id_taf_emails, form.taf-form #id_taf_note { width: 270px; padding: 5px; } form.taf-form div.taf-message { background: #ddd; padding: 10px 6px; margin: 1em 0 2em 0; color: #222; } form.taf-form div.taf-message label { display: inline; } form.taf-form div.taf-message hr { background: #999; margin: 1em 0;} form.taf-form input.submit { background: #d97313 url("_imgs/bg/donateBg.gif") repeat-x; font-weight: bold; color: #fff; font-size: 18px; padding: 12px 50px; border: 1px solid #fff; margin-bottom: 1em;} form.taf-form input.submit:hover { background-image: none; } form.taf-form a { color: #ddd; } form.taf-form a:hover { color: #E08E44; text-decoration: none; } /** LETTER **/ #ak-letter.ak-statement { float: left; margin: 0 0 0 20px; color: #111; } .ak-action.letter-mod .ak-uInfo { overflow: visible; } .ak-statement #ak-letter-comment { width: 368px; padding: 10px; height: 250px;} /** CALL **/ div.ak-surveyQuestions { margin-top: 1em; } div.ak-surveyQuestions textarea { width: 270px; padding: 10px; height: 10d0px; } /** SURVEY **/ form#akSurvey div.formRow.submit, form.actionForm .ak-uInfo div.formRow.submit { text-align: center; } form#akSurvey div.formRow.submit input:hover, form.actionForm .ak-uInfo div.formRow.submit input:hover { background-image: none; } div.ak-action.survey form#akSurvey { width: 450px; overflow: hidden; margin: 0 auto; background: #34678c; color: #fff; padding: 35px 45px; } form#akSurvey div.formRow.text input, form#akSurvey div.formRow.text-address input, form#akSurvey div.formRow.text-zip input, form#akSurvey div.formRow.text-cvv2 input { border: 1px solid #eee; background: #fff; padding: 4px; width: 290px; } form#akSurvey div.formRow { margin-bottom: 1em; } form#akSurvey div.formRow.select select { width: 290px; } form#akSurvey div.formRow.text-zip input { width: 150px; } form#akSurvey div.formRow label { display: block; font-weight: bold; } form#akSurvey div.ak-surveyQuestions div.formRow.text input { width: 440px; margin: .5em 0; } form#akSurvey div.ak-surveyQuestions div.formRow.checkbox label { font-weight: normal; display: inline; } form#akSurvey a { color: #fff; } #f-signup input, #search input { position: absolute; top: 2px; left: 0; margin: 0; border: 1px solid #fff; height: 18px; line-height: 1em; width: 191px; padding: 3px 4px 1px 4px; font-size: 12px; color: #999; } #f-signup { position: relative; float: left; clear: right;} #f-signup input.submitButton, #search input.submitButton { height: 22px; width: auto; position: absolute; top: 2px; left: 200px; padding: 0; margin: 0; float: left; } form#akSurvey div.formRow.radio label { display: inline; font-weight: 100; } form#akSurvey div.formRow.radio label.header { display: block; font-weight: bold; margin-top: 2em;} form#akSurvey div.formRow.radio input { width: auto; margin-top: 1em;} /* PRIMARY JOIN */ div.ak-action.join div.ak-uInfo { width: 740px; } .join form.actionForm div.formRow.two-per { float: left; margin-right: 15px; } .join form.actionForm div.formRow.two-per.last { margin-right: 0; } .join form.actionForm div.formRow.two-per.select select { width: 174px; padding: 4px;} .join form.actionForm div.formRow.two-per.text input { width: 172px; } .join form.actionForm div.formRow.two-per.text-zip input { width: 82px; } .join form.actionForm div.formRow.clear { clear: left; } /* PRIMARY DONATE */ /* General form, text */ form#donate { width: 650px; overflow: hidden; margin: 0; background: #34678c; color: #fff; padding: 35px 25px; } form#donate { margin-bottom: 35px; } form#donate div#col1, form#donate div#col2 { width: 300px; float: left; } form#donate div#col2 { height: 100%; margin-left: 20px; padding-left: 30px; background: url("_imgs/elements/shadowV_blue.gif") repeat-y scroll 0 0 transparent; } form#donate div#cols { overflow: hidden; width: 100%; background: url("_imgs/elements/shadowV_blue.gif") repeat-y scroll 320px 0 transparent; } form#donate label { margin-bottom: .25em; } form#donate div.formRow label { display: block; font-weight: bold; } form#donate div.formRow.text input, form#donate div.formRow.text-address input, form#donate div.formRow.text-zip input, form#donate div.formRow.text-cvv2 input { border: 1px solid #eee; background: #fff; padding: 4px; width: 290px; margin-bottom: 1em; } form#donate div.formRow.text-zip input { width: 150px; } form#donate div.formRow.text-cvv2 input { width: 80px; } form#donate div.formRow.text-address input#address1 { margin-bottom: .5em; } form#donate div.formRow.select select { width: 292px; padding: 4px; margin-bottom: 1em;} body form#donate div.formRow input.disabled { background: #aaa; border-color: #aaa; } body form#donate div.formRow input[readonly] { background: #ddd; border-color: #ddd; } form#donate div.formRow.checkbox label { font-weight: normal; display: inline; } form#donate div.formRow.checkbox { margin-bottom: .75em; } form#donate div.formRow.checkbox input { margin-right: .5em; } form#donate div.formRow.two-per { float: left; margin-right: 15px; } form#donate div.formRow.two-per.last { margin-right: 0; } form#donate div.formRow.two-per.select select { width: 182px; } form#donate div.formRow.two-per.text input { width: 172px; } form#donate div.formRow.two-per.text-zip input { width: 92px; } form#donate div.formRow.clear { clear: left; } form#donate div.formRow.multi div { float: left; margin-right: 15px; } form#donate div.formRow.table-amount table { margin-top: 1em; } form#donate div.formRow.table-amount table, form#donate div.formRow.table-amount td { border: 0; } form#donate div.formRow.table-amount td { width: 80px; height:22px; } form#donate div.formRow.table-amount table.two-per td { width: 120px; } form#donate div.formRow.table-amount td.other { width: 140px; } form#donate div.formRow.table-amount label { display: inline; font-weight: bold; } form#donate div.formRow.table-amount input { border: 1px solid #eee; padding: 4px; } form#donate div.formRow.table-amount td.or { text-transform: lowercase; width: auto !important; padding: 0 4px; } form#donate div.formRow.table-amount td.one-time { width: auto !important; } form#donate div.formRow.table-amount td.per-month { width: 190px; } form#donate div#col2.dev fieldset { margin-bottom: 1.5em; } form#donate div#col2.dev div.formRow.table-amount table td label { font-weight: normal; } form#donate fieldset h3.legend { color: #fff; font-weight: normal; font-size: auto; } form#donate fieldset h3.legend.big { font-size: 15px; margin-bottom: .75em;} form#donate div#col2.dev .js { display: none; visibility: hidden; } form#donate fieldset.promo { background: #5d85a3; width: 286px; padding: 7px; } form#donate fieldset#recurring label { font-weight: bold; } form#donate div.centered p.fineprint { font-size: .88em; width: 86%; line-height: 1.2em; margin: 1em 7%; } form#donate a { color: #fff; } /* Events modification for products */ form#donate.products.events #product_list table th { text-decoration: italic; text-align: left; } form#donate.products.events #product_list table td { text-align: left; font-size: 90%; } form#donate.products.events #product_list table td input.ak_product_inputs { border: 1px solid #eee; background: #fff; padding: 4px; } form #ak-errors { border: 1px solid #8c3e34; background: #9d5b52; margin-bottom: 1em; padding: 1em; } form #ak-errors li { margin-left: 1em; } html body form div input.ak-error, html body form div textarea.ak-error { border: 1px solid #8c3e34; background-color: #e8d8d6; margin-bottom: 1em; } div#ak-confirmation { border: 1px solid #548d45; background: #76a46a; margin-bottom: 1em; padding: 1em; } /* In honor of */ form#donate div#inhonorof div.formRow input.last { margin-bottom: 0; } /* Other form elements */ form#donate fieldset { border: 0; margin: 0; padding: 0; width: 100%; overflow: hidden; } form#donate hr, form hr.light-blue, form.taf-form hr { background: #2586b1; border: 0; height: 1px; margin: 2em 0; clear: both; } form#donate div.centered { clear: both; padding: 2em 0 0 0; } form#donate div.centered p { margin: 0; } form#donate label em { font-weight: normal; font-size:.88em; } /* Alternative layout form */ .custom-layout form#donate { width: 300px; padding: 35px 50px; } .custom-layout form#donate div#col2 { margin-left: 0; padding-left: 0; background: none; } body.donation div.ak-action.custom-layout { clear: none; width: 400px; } body.donation div.ak-intro.custom-layout { clear: none; width: 500px; float: left; margin-right: 40px; } body.donation div.ak-sidebar.custom-layout { width: 360px; margin-left: 560px; } /* General form, text */ form#signup a { color: #fff; } .salsa span.required { color:#CC0000; font-size:12px; font-weight:normal; line-height:10px; } /* Monthly giving lightbox */ div#form-int { width: 510px; background: #ccc; padding: 20px; overflow: hidden; } div#form-int h3 { font-size: 16px; color: #00447c; border-bottom: 1px solid #e8e8e8; padding: 0 0 5px 0; margin: 0 0 15px 0; } div#form-int p { font-size: 12px; margin-bottom: 1em; } div#form-int .button { width: 220px; display: block; float: left; margin: 15px 0 0 0; padding: 15px 10px; color: #fff; font-size: 14px; text-align: center; text-decoration: none; } div#form-int .button strong { font-size: 16px; margin-bottom: .6em; display: block; } div#form-int .button.one-time { margin-right: 26px; background: #6cb33e; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4a8c1f), to(#6cb33e)); background: -webkit-linear-gradient(top, #6cb33e, #4a8c1f); background: -moz-linear-gradient(top, #6cb33e, #4a8c1f); background: -ms-linear-gradient(top, #6cb33e, #4a8c1f); background: -o-linear-gradient(top, #6cb33e, #4a8c1f); border: 1px solid #3b9104; } div#form-int .button.one-time:hover { background: #4a8c1f; } div#form-int .button.monthly { background: #f47b20; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c55400), to(#f47b20)); background: -webkit-linear-gradient(top, #f47b20, #c55400); background: -moz-linear-gradient(top, #f47b20, #c55400); background: -ms-linear-gradient(top, #f47b20, #c55400); background: -o-linear-gradient(top, #f47b20, #c55400); border: 1px solid #9f4400; } div#form-int .button.monthly:hover { background: #c55400; } div#form-int img { border: 1px solid #a4a4a4; float: right; width: 107px; margin: 0 0 8px 8px; } /**************** PSA PAGES *****************/ div.ak-psa-content { float: left; width: 620px; } div.ak-psa-uInfo { float: left; width: 280px; margin-left: 20px; } div.ak-psa-form {background: #34678c; padding: 10px; color: #fff; } div.ak-psa-uInfo h3 { color: #fff; } div.ak-psa-uInfo .ak-psa-statement blockquote { border-left: none; padding: 0; margin: 0; font-size: .85em; line-height: 1.3em; } div.psa-video-viewer .video, div.psa-video-viewer .video-multi { width: 620px; overflow: hidden; border-top: 1px solid #ddd; margin: 1em 0 0 0; padding: 1em 0 0 0; } div.psa-video-viewer .video .description, div.psa-video-viewer .video-multi .description { float: right; width: 210px; padding: 1em 0 0 10px; } div.psa-video-viewer .video .embed, div.psa-video-viewer .video-multi .embed { float: left; width: 400px; } div.psa-video-viewer .video-multi .video-multi-thumbs { width: 100%; overflow: hidden; } div.psa-video-viewer .video-multi .video-multi-thumbs ul { list-style: none; margin: 1em 0 0 0; padding: 0; } div.psa-video-viewer .video-multi .video-multi-thumbs ul li { float: left; margin-right: 10px; padding-bottom: 15px; width: 138px; } div.psa-video-viewer .video-multi .video-multi-thumbs ul li a img { border: 4px solid; margin-bottom: .25em; } div.psa-video-viewer .video-multi .video-multi-thumbs ul li a { text-decoration: none; } /* form */ .ak-psa-uInfo form.actionForm input { font-family: arial, helvetica, sans-serif; font-size: 12px; color: #333;} .ak-psa-uInfo form.actionForm div.formRow { margin-left: 10px; margin-bottom: 1em; } .ak-psa-uInfo form.actionForm div.formRow label { display: block; font-weight: bold;} .ak-psa-uInfo form.actionForm div.formRow.text input, .ak-psa-uInfo form.actionForm div.formRow.text-zip input { width: 200px; border: 1px solid #eee; background: #fff; padding: 4px;} .ak-psa-uInfo form.actionForm div.formRow.text-zip input { width: 150px; } .ak-psa-uInfo form.actionForm div.formRow.submit { text-align: center; } .ak-psa-uInfo form.actionForm div.formRow.submit input { background: #d97313 url("_imgs/bg/donateBg.gif") repeat-x; font-weight: bold; color: #fff; font-size: 18px; padding: 12px 50px; border: 1px solid #fff; margin-top: 1em;} .ak-psa-uInfo form.actionForm div.formRow.submit input:hover { background-image: none; } #shareButtons { border-top: 15px solid #fff; width:280px;height:60px;background:#34678C url(http://na.oceana.org/sites/all/themes/o_nao/_imgs/bg/shareButtonsBg.png) repeat-x;color:#fff;} #shareButtons a {margin-top:22px;margin-left:38px;display:inline;float:left;} /**************** Extras *****************/ hr.shadow { background: #eee url("_imgs/elements/shadowH.gif") repeat-x; border: 0; padding: 0 0 6px 0; margin: 1em 0; clear: both; } /* hr { background: #ccc; border: 0; margin: 1em 0; height: 1px;} */ #type_blog hr { margin: 1.5em 0; } hr.thin-grey { background: #ccc; height: 1px; margin: 1em 0; border: 0; padding: 0; } body.ak hr.thin-grey { margin: 1em 0 2em 0; } .caps, abbr { border: 0; font-size: 0.88em; letter-spacing: .04em; } #promo { background: transparent url("_imgs/elements/shadowH.gif") bottom left repeat-x; padding-bottom: 6px; } #promo div { background: #33aab2 url("_imgs/bg/promoBg.gif") repeat-x; color: #fff; padding: 15px 10px; font-size: .75em;} #rightCol #promo div { font-size: .88em; margin-top: 1.5em; } #type_explore #promo div { background: #2487b3 url("_imgs/bg/promoBg-explore.gif") no-repeat; } #promo a { color: #fff; text-decoration: none;} #promo strong { display: block; font-size: 1.63em; line-height: 1.125em; border-bottom: 1px dashed #67bfc5; padding: 0 0 .4em 0; margin: 0 0 .4em 0;} #rightCol #promo strong { font-size: 2em; } .centered { text-align: center; } blockquote { margin-left: 1em; margin-right: 1em; padding-left: 1em; border-left: 1px solid #ccc; } a.audio { background: url("/sites/all/themes/o_nao/_imgs/elements/audioIcon.png") no-repeat right 4px; padding-right: 13px;} span.no-bold { font-weight: normal !important; } .hidden { display: none !important; } #slNav .block-menu_block h2, #tlNav .block-menu h2 { margin-bottom: 0 !important; line-height: 1.2em; } body.js form.ak-form, #ak-errors, #ak-confirmation, #ak-error-info, .ak-errors, .ak-confirmation, .ak-error-info { display: none }