/* ---------------------------------------------------------- **Raising Malawi** CSS Managed by: Blue State Digital Last Update: September 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 { 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; } 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 ---------------------------------------------------------- */ html { background: #2c0e00 url(/page/-/img/bg2.jpg) center top no-repeat; } body { color: #30292b; min-height: 900px; font: 13px/1.4em helvetica, arial, sans-serif; } h2, h3 { font-family: georgia, serif; line-height: 1; letter-spacing: 1px; text-transform: uppercase; text-align: center; } h2 a, h3 a { text-decoration: none; } h2 a:hover, h3 a:hover { text-decoration: underline; } h2, h2 a { font-size: 16px; color: #42120b; } h3, h3 a { font-size: 12px; color: #32270a; } form, fieldset { margin: 0; padding: 0; border: 0; } legend, label { position: absolute; visibility: hidden; left: -9999px; } input, textarea { margin: 0; padding: 5px; border: 0; outline: 0; } input:focus, textarea:focus { color: #000; } a { outline-color: #fff; } a img { border: 0; display: block; } object, embed { margin: 0 0 15px; padding: 0; display: block; } #main input { border: 1px solid #999; } #main textarea { border: 1px solid #999; } #main label { position: relative; visibility: visible; left: 0; padding: 5px 0; display: inline; } #main .label { margin: 5px 0; } .base h1 { } .base h2 { } .base h3 { } .base h4 { } a { } a:hover { } blockquote { margin: 0 40px; } .base ul, ol { } .base ul { } .base ol { } .base ul li, .base ol li { } .base li ol { } .base li ul { } #header { position: ; background: url(/page/-/img/header-madonna.png) left top no-repeat; z-index: 1000; width: 980px; height: 180px; } #header h2 { margin-left: -15px; width: 218px; height: 184px; background: url(/page/-/img/header-logo.png) left top no-repeat; position: absolute; z-index: 10; } #header h2 a { display: block; width: 218px; height: 184px; text-indent: -9999px; } #header .main-header { float: left; width: 980px; height: 145px; } #newsletter { float: right; display:; margin-top: 13px; } #newsletter h3 { color: #0b5a7f; text-transform: uppercase; font-family: helvetica, arial, sans-serif; font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 10px; letter-spacing: 0; } #newsletter #email { width: 241px; color: #bcbbbb; font-size: 14px; } #newsletter #email:focus { color: #000; } #newsletter #submit { border: 0; padding: 0; background: #cc2b11; color: #fff; text-transform: uppercase; font-weight: normal; font-size: 12px; letter-spacing: 1px; } #newsletter #submit:hover { cursor: pointer; } #newsletter fieldset { float: left; } .ph {margin: 0 auto; width: 768px; } #nav { float: left; width: 780px; height: 37px; background: url(/page/-/img/nav.gif); z-index: ; padding: 0 0 0 200px; } ul#navigation { height: 36px; } ul#navigation li { float: left; } ul#navigation li a { height: 36px; display: block; text-indent: -9999px; overflow: hidden; color: #fff; float: left; padding-right: 20px;} #nav li#nav-why a.top { width: 128px; } #nav li#nav-progress a.top { width: 135px; } #nav li#nav-blog a.top { width: 65px; } #nav li#nav-about a.top { width: 115px; } #nav li#nav-action a.top { width: 127px; } #nav li#nav-donate a.top { width: 90px; background: url(/page/-/img/nav.gif) no-repeat -874px -36px; padding-right: 0; } #nav li#nav-why a.top:hover { background: url(/page/-/img/nav.gif) no-repeat -200px -36px; } #nav li#nav-progress a.top:hover { background: url(/page/-/img/nav.gif) no-repeat -348px -36px; } #nav li#nav-blog a.top:hover { background: url(/page/-/img/nav.gif) no-repeat -503px -36px; } #nav li#nav-about a.top:hover { background: url(/page/-/img/nav.gif) no-repeat -588px -36px; } #nav li#nav-action a.top:hover { background: url(/page/-/img/nav.gif) no-repeat -723px -36px; } #nav li#nav-donate a.top:hover { background: url(/page/-/img/nav.gif) no-repeat -874px 0; } #content { background: #fff; padding-top: 3px; padding-bottom: 20px;} #footer { clear: both; background: #96392a; font-size: 13px; } #footer, #footer a { color: #fff; } #footer a:hover { text-decoration: none; } #footer img { margin: 20px; display: block; } #footer .text { padding: 40px 0 0; height: 80px; } #footer p { line-height: 1.6; } /* 03 =LAYOUT ---------------------------------------------------------- */ .page { width: 980px; margin: 0 auto; } .col-1, .col-2, .col-3 { width: 320px; float: left; } .col-1 { padding-left: 8px; } .col-2 { padding-left: 18px; width: 292px; } .col-3 { padding-left: 0; width: 300px; float: right; padding-right: 20px; } .last { margin-left: 0; margin-right: 0; } #main { width: 580px; float: left; background: url(/page/-/img/malawi__content_bg.jpg) repeat-x; margin-left: 20px; padding: 20px; display: inline; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ .access { position: absolute; visibility: hidden; left: -9999px; } .lead { position: relative; margin-bottom: 15px; } .slideshow { float: left; background: #000; position: relative; z-index: 0; } .slide { position: relative; } .slide img { display: block; } .slide h2 { position: relative; left: 18px; z-index: 1; font-family: Tahoma, "Lucida Grande", helvetica, arial, sans-serif; text-align: left; line-height: 1.45; width: 485px; top: 8px; } .slide h2, .slide h2 a { color: #fff; font-size: 21px; } .slide h2 a { font-weight: bold; } #l-controls { position: absolute; top: 245px; left: 510px; z-index: 10; } #l-controls img { display: inline; } #l-nav a { color: #c13a00; text-decoration: none; font-size: 21px; padding: 0 5px; } #l-nav a.activeSlide { color: #fff; } .slide .slide-info { position: absolute; top: 214px; left: 0; opacity: .90; width: 651px; height: 85px; background-color: #560c0b; } .variation #l-controls { display: none; } .variation #l-controls img { display: none; } .variation #l-nav a { display: none; } .variation #l-nav a.activeSlide { display: none; } .actions { background: #116b93; margin-left: 651px; height: 299px; position: relative; z-index: 10; } .actions, .actions a { color: #fff; display: block; position: relative; } .actions .action { background: url(/page/-/img/actions-shade.png) center top no-repeat; width: 100%; height: 70px; } .actions .action h3 { padding: 10px 0; position: relative; } .actions .action h3 a { font-size: 24px; } .actions .action h3 a img { position: absolute; top: -2px; left: 20px; position: relative; } .actions .action p { text-align: center; } .actions .donate { padding-top: 15px; } .actions .donate h3 { padding-top: 0; } .actions .donate p { position: relative; top: -38px; } .actions .donate p a { text-decoration: none; } .videos { padding: 8px; margin-bottom: 10px; } .videos h2 { margin: 8px 0 16px; } .videos h3 { margin: 12px 0; text-align: left; } .videos .thumb { float: left; margin-right: 4px; } .videos .thumb a { display: block; } .videos .thumb img { display: block; } .videos .last { margin-right: 0; } #home .col-1 { height: 680px; } .facts { background: url(/page/-/img/facts-bg.jpg) left top no-repeat; width: 321px; height: 328px; position: absolute;background-color: none;} .facts h2 { color: #e9e3d3; letter-spacing: 1px; text-transform: uppercase; text-align: center; font-size: 18px; width: 320px; height: 40px; padding-top: 10px; } .statement { background: none; text-align: center;} .facts p.fact { color: #491911; font-size: 24px; font-weight: bold; text-align: center; line-height: 26px; padding: 60px 30px 20px; width: 260px; height: 150px; background: none;} .facts p.take a { position: relative; left: 58px bottom: 35px; font-family: georgia, serif; text-transform: uppercase; letter-spacing: 1px; font-size: 18px; font-weight: normal; z-index: 2; color: #dfd0c1; background: #42120b; text-decoration: none; padding: 9px 37px; margin-right: auto; } .facts p.take a:hover { text-decoration: underline; } .facts #f-prev, .facts #f-next { position: absolute; top: 185px; display: block; width: 25px; height: 25px; z-index: 10; } .facts #f-prev { left: 0; } .facts #f-next { right: 0; } .blog h2 { background: url(/page/-/img/blog-logo.gif) left center no-repeat; padding: 13px 13px 13px 50px; text-align: left; } .blog h2 a { color: #42120b; } .blog .entry { padding: 15px 0; border-bottom: 1px solid #e2deda; } .blog h3 { text-align: left; text-transform: none; line-height: 1.2; } .blog h3 a { font-weight: bold; font-size: 16px; } .blog h3 a:hover { text-decoration: underline; } .blog h3, .blog .byline { font-family: "Trebuchet MS", Trebuchet, serif; } .blog .byline { text-transform: uppercase; font-size: 11px; } .blog p { line-height: 1.5; } .blog a { color: #0090bd; } .blog a:hover { text-decoration: none; } .blog .byline a { font-style: italic; text-transform: none; } .promo { margin-bottom: 15px; } .social { background: #e2deda url(/page/-/img/social-bg.jpg) left top no-repeat; width: 301px; height: 125px; margin-top: 15px; margin-bottom: 15px; } .social h2 { padding: 15px 0 10px; } .social ul { margin: 0 0 0 25px; } .social li { margin: 0 10px 0 0; font-size: 11px; float: left; text-align: center; } .social li img { margin-bottom: 5px; } .social li a { display: block; text-decoration: none; } .social li a:hover { text-decoration: underline; } .social, .social li a { color: #806b5e; } .share { margin: 15px 0; } .share p { margin: 5px 0; } .share textarea { border: 1px solid #999; color: #999; overflow: hidden; width: 284px; height: 42px; padding: 2px 3px; font-size: 12px; } .share textarea:focus { color: #000; } .player object{ z-index: 0; } /* 05 =SUBPAGES ---------------------------------------------------------- */ #main h1, #main h2, #main h3, #main h4, #main p, #main ul, #main ol { font-weight: normal; text-align: left; padding: 0; text-transform: none; letter-spacing: 0; margin-right: 0; margin-left: 0; margin-bottom: 10px; } #main h1, #main h2, #main h3, #main h4 { font-family: georgia, serif; } #main h1 { font-size: 30px; margin-bottom: 15px; line-height: 30px; } #main h2 { font-size: 24px; } #main h3 { font-size: 20px; } #main h4 { font-size: 24px; } #main ol, #main ul { padding-left: 20px; } #main ol li { list-style: decimal; } #main ul li { list-style: ; margin-bottom: 5px; list-style-position: outside; list-style-type: circle; } #main a { color: #96392a; } #contribution table td.contribheader { margin: 0 0 5px; padding: 15px 0 5px; } #contribution label.fieldlabel { padding: 5px 0; line-height: 2; } #contribution input { margin: 0 5px 5px 0; } #contribution span.radio { margin-right: 5px; } td#submit { padding-top: 20px; } input#processbutton { margin-top: 20px; } table#action-center td { padding-bottom: 10px; } table#action-center td.left { padding-right: 10px; } #pages.Partners table td h2 { margin-top: 0; } #pages.Partners table td{ float: left;width: 300px; margin-bottom: 20px; } #blog .entry { float: left; width: 430px; margin-bottom: 20px; } #blog h2 { margin-top: 0; } #blog p.byline { margin-top: 0 } #blog .thumb { padding-top: 9px;} #blog .thumb img { width: 134px; } #impact #content { padding: 0 20px 20px; width: 940px; } #impact-intro { padding: 20px; color: #666; } a.latest { color: #806B5E; background: #EFE5DB; text-decoration: none; font-family: Georgia, "Times New Roman", "Times", serif; font-size: 14px; padding: 5px; text-align: center; display: block; } a.latest:hover { color: #42120B; } #impact-intro-text { float: left; width: 580px; } #impact-intro h1 { font-size: 26px; color: #a3210c; font-family: "Trebuchet MS", Trebuchet, sans-serif; text-transform: uppercase; padding: 10px 0; } a#impact-donate { display: block; float: right; width: 284px; background: url(/page/-/img/impact_donate.png) no-repeat center; height: 60px; text-indent: -9999em; overflow: hidden; margin-top: 40px; } #impact-feature { background: #034a6b url(/page/-/img/impact_feature.png) no-repeat center; width: 900px; overflow: hidden; padding: 20px; color: #fff; } #impact-feature h2 { color: #fff; font-size: 23px; text-transform: none; padding: 20px 0 10px; text-align: left } #impact-feature p { font-size: 14px; line-height: 22px; margin: 10px 0; } #impact-feature a.latest { color: #fff; background: none; } #impact-feature a.latest:hover { color: #ccc; } #impact-feature #impact-feature-visual { float: left; width: 600px; } #impact-feature #impact-feature-text { width: 280px; padding: 0 0 0 20px; float: right; background: url(/page/-/img/impact_h2.png) no-repeat center top; } #impact-projects { padding: 20px 0; } #impact-projects h3 { font-size: 15px; letter-spacing: 0; color: #fff; font-family: "Trebuchet MS", Trebuchet, sans-serif; background: #A6240F url(/page/-/img/impact_h3.png) no-repeat center; padding: 10px; } #impact-projects .impact-projects-image { padding: 10px 0; } #impact-projects .impact-projects-image img { width: 280px; height: 150px; } #impact-projects h4 { color: #0090BD; font-size: 16px; font-family: "Trebuchet MS", Trebuchet, sans-serif; } #impact-projects p { font-size: 14px; line-height: 20px; margin: 10px 0; } #impact-projects .impact-projects-column { background: #FBF5EE; width: 280px; margin: 0 20px 0 0; float: left; padding: 10px; overflow: hidden; } #impact-projects #impact-projects-electric { margin: 0; } a.impact-button { display: block; width: 460px; height: 60px; background: url(/page/-/img/impact_button.png) no-repeat center; text-align: center; line-height: 60px; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 18px; color: #A6240F; text-decoration: none; font-weight: bold; text-transform: uppercase; } a.impact-button:hover { color: #806B5E; } a#impact-numbers { float: left; } a#impact-partners { float: right; } .partners tr { border-bottom: 1px solid #ccc; } .partners td { padding: 15px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ .invite-buttons { margin: 0 auto; width: 416px} #bsd.full-width #main { width: 900px; } img.signup-banner { margin-bottom: 15px; } input#contact_importer_button { float: left; } body.full-width #main .donate-top .floatr { padding-bottom: 0; height: 300px; } .tweetbook { width: 450px; margin: auto; margin-bottom: 15px; overflow: hidden; } .tweetbook a { float: right; margin-right: 15px; } .bsd-contribForm-oneCol .bsd-contribForm-aboveContent { float: left; width: 400px; height: 800px; margin-right: 40px; } /* this style allows you to position the form description to the left of the contribution form (note, you may have to adjust width and height depending on site layout and form options). */ .bsd-contribForm-oneCol .bsd-contribForm-belowContent { float: left; width: 100%; } /* this style makes sure the below form text spans the entire page. */ .bsd-contribForm-oneCol form#contribution { width: 460px; float: right; } /* 07 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 15px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 15px;} .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;} /*** SUPERFISH STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; /* left offset of submenus need to match (see below) */ } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu li li { float: none; } .sf-menu a { display: block;/* position: relative;*/ } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li ul { background: #d2c7bc; padding: 0; margin-top: 6px; border-bottom: 1px solid #c4b6a9; border-right: 1px solid #c4b6a9; } ul#navigation.sf-menu li li { margin: 0; font-size: 14px; line-height: 16px; text-transform: uppercase; border-top: 1px solid #c4b6a9; padding-bottom: 5px; padding-top: 5px; padding: 0; } ul#navigation.sf-menu li li a { color: #42120b; text-indent: 0px; text-decoration: none; height: auto; padding-left: 5px; padding-right: 5px; padding: 10px; width: 138px; } ul#navigation.sf-menu li li.one { border-top: none; } ul#navigation.sf-menu li li a:hover { color: #cb5025; text-decoration: none; background: none;} .sf-menu a, .sf-menu a:visited { color: #000; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { outline: 0; } ul#navigation.sf-menu li.sfHover { height: 35px; } ul#navigation.sf-menu li.why-us.sfHover { background: url(/page/-/images/wrapper/nav.gif) -95px -35px; } ul#navigation.sf-menu li.the-bid.sfHover { background: url(/page/-/images/wrapper/nav.gif) -219px -35px; } ul#navigation.sf-menu li.take-action.sfHover { background: url(/page/-/images/wrapper/nav.gif) -344px -35px; } ul#navigation.sf-menu li.the-blog.sfHover { background: url(/page/-/images/wrapper/nav.gif) -521px -35px; } ul#navigation.sf-menu li.swag.sfHover { background: url(/page/-/images/wrapper/nav.gif) -661px -35px; } ul#navigation.sf-menu li.espanol.sfHover { background: url(/page/-/images/wrapper/nav.gif) -806px -35px;} ul#navigation.sf-menu li.sfHover li { height: auto; } /*** shadows for all but IE6 ***/ .sf-shadow ul { background: url(/page/-/img/shadow.png) no-repeat bottom right; padding: 0 8px 9px 0; } .sf-shadow ul.sf-shadow-off { background: transparent; } ul#navigation.sf-menu li ul { display: none; }