/*------------------------------------------------------------------ Master Stylesheet Version: 1.0 Revised: 5/21/10 Author: Mightyspark Industries, Matthew Miller Useage: Screen -------------------------------------------------------------------*/ @import "reset.css"; @import "typography.css"; /*------------------------------------------------------------------ General Styles -------------------------------------------------------------------*/ html { height: 100.5%; } body { position: relative; background: url("../images/bg.gif") repeat-x #00819b; background-position: top center; font-family: Verdana, Helvetica, sans-serif; font-size: 100%; color: #2e2e2e; } body#editor { position: relative; background: #f5f6f1; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: #0d0d0d; padding: 5px; } .clearBoth { clear: both; } .clearRight { clear: right; } .clearLeft { clear: left; } .vSpace { margin: 20px 0 15px 0; } .lSpace { margin-left: 20px; } .testing { border: 1px solid pink; } .indent { padding: 5px 0 5px 20px;} .float_l { float: left; } .float_l { float: left; } .inline { display: inline; } /*------------------------------------------------------------------ Banner & Structure -------------------------------------------------------------------*/ #headerContainer { position: relative; top: 0px; width: 960px; height: 172px; margin: 0 auto; z-index: 3; background-color: #f5f6f1;} #headerContainerInt { position: relative; top: 0px; width: 960px; height: 130px; margin: 0 auto; z-index: 3; background-color: #f5f6f1;} #logo { position: absolute; top: 15px; left: 11px; } #bannerContainer { position: relative; top: 20px; left: 20px; width: 960px; height: 280px; } .bannerText { width: 235px; float: right;} #bannerCallout { background-color: #e2deda; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; height: 220px; width: 290px; position: absolute; top:10px; left:0; } #bannerSlidebox { background-color: #8b1472; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; height: 240px; width: 595px; position: absolute; top:0; left:300px; } #bannerPhoto { background-color: #3e4671; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 2px; width: 595px; position: relative; top:0px; left:5px; margin-top: 20px; text-align: center; } #bannerPhoto img { position: relative; top: 4px;} #bannerPhoto p { color: #fff; font-size: 11px; padding: 0 5px 2px; text-align: left; } #bannerSlider { height: 235px; overflow: hidden; } #pageContent { position: relative; top: -10px; width: 960px; margin: 0 auto; z-index: 1; background-color: #f5f6f1; -webkit-box-shadow:0 0 15px #232323; -moz-box-shadow: 0 0 15px #232323; box-shadow:0 0 15px #232323; } #pageContentInt { position: relative; top: 0px; width: 960px; margin: 0 auto ; z-index: 1; background-color: #f5f6f1; -webkit-box-shadow:0 0 15px #232323; -moz-box-shadow: 0 0 15px #232323; box-shadow:0 0 15px #232323; } #mainContent { width: 612px; padding: 15px 0; float: right; z-index: 1; min-height: 500px; margin-right: 20px;} #sidebarContent { width: 290px; padding: 0px 0 15px 0; min-height: 250px; margin: 10px 10px 0 20px;float: left; z-index: 1;} .sidebarBox { margin: 0; background-color: #edece8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; } .sidebarBoxTitle { margin: 0px 0 0 0; background-color: #eda109; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 8px 10px 4px 10px; color: #4a2a3c; position: relative; top: 6px; } .sidebarBoxTitleSub { margin: 30px 0 0 0; background-color: #dedad6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; color: #4a2a3c; position: relative; top: 6px; } .boxBorder { border: 1px solid #eda109; background-color: #f5f6f1; } .sidebarBoxTitleSubPurple { margin: 30px 0 0 0; background-color: #475786; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; color: #fff; position: relative; top: 6px; } .boxBorderPurple { border: 1px solid #475786; background-color: #f5f6f1; } .padded { padding:10px 10px 0px 10px; } .menu { position: relative; background: url("../images/menu_bg.png") top center; background-repeat: no-repeat; width: 239px; padding: 0px; min-height: 250px; } .callout { width: 284px; } .calloutBox { background-color: #dedad6; -moz-border-radius: 9px; border-radius: 9px; padding: 14px; width: 578px; margin-bottom: 20px;} .homeBox { margin: 0 15px 20px 0; background-color: #edece8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; width: 45%; float: left; } .homeBoxLeft { width: 48%; float: left; } .homeBoxRight { width: 49%; float: right; } .homeBoxLeft > div, .homeBoxRight > div { margin: 0 0px 20px 0; background-color: #edece8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; } #social_media { position: relative; top:30px; left:400px; } .mainTextTab, .mainText { width: 612px; z-index: 1; } .col3 { float: left; margin-right: 24px; width: 284px; padding: 2px 5px; border: 1px solid #c3c2be; background-color: #e2ded5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .col_last { margin-right: 0;} .col_left { float: left; margin-right: 0px; width: 48%; } .col_right { float: right; margin-right: 0px; width: 48%; } div.line { height: 2px; background-color: #e2ded5; margin: 10px 0 20px; width: 98%; outline: none; border: none; } #emailSignup { float: left; width: 600px; margin-top: 20px; } #spreadWord { float: right; width: 290px; margin-top: 20px; } #calloutButtons { position: relative; height: 75px; } #globalContainer { position: absolute; top: 2px; right:0px; width: 565px; color: #c3d2df; font-size: 11px; text-align: right; } #globalContainer p { text-align: right; color: #c3d2df; } #keywords { color: #666; } #btn_search { position: relative; top: 3px; } #testimonial { width: 830px; padding: 10px;} .greenBG { background-color: #d1e1b3; } .pinkBG { background-color: #efdcf2; } #footerContainer { position: relative; top: 0px; width: 960px; margin: 0 auto; padding: 0 0 5px 0; text-align: center; background-color: #e9e5e1; } #footerContainerSub { position: relative; top: 20px; width: 960px; margin: 0 auto; padding: 0 0 5px 0; text-align: center; } .footerContent { width: 920px; margin: 0 auto; padding: 15px 0 0 0; text-align: left; } .footerLeft { text-align: left; width:450px;} #footerContainerSub .footerRight { text-align: left; width:390px; float: right;} #footerContainerSub .footerLeft { text-align: left; width:525px;} .footerRight { text-align: right; width:450px; float: right;} #greenBar { width: 960px; background-color: #99b14e; height: 18px;} /*------------------------------------------------------------------ Primary Navigation -------------------------------------------------------------------*/ ul#primaryNav { position: absolute; top: 106px; left:0px; width: 960px; height: 66px; text-align: left; z-index: 2; margin: 0 0px; } #primaryNav > li { list-style: none; display: inline; margin: 0; padding: 0; } #primaryNav > li > a { display: block; float: left; text-indent: -9999px; height: 66px; background-image: url("../images/nav.png"); background-repeat:no-repeat; } #primaryNav li#find_help > a, #primaryNav li#find_help > a:link, #primaryNav li#find_help > a:visited { background-position:0px 0px; width:108px; } #primaryNav li#find_help > a:hover, #primaryNav li#find_help > a:focus, #primaryNav li#find_help > a:active, #primaryNav li#find_help_on > a, #primaryNav li#find_help_on > a:link, #primaryNav li#find_help_on > a:visited { background-position:0px -66px; width: 108px; } #primaryNav li#learn_more > a, #primaryNav li#learn_more > a:link, #primaryNav li#learn_more > a:visited { background-position:-108px 0px; width:132px; } #primaryNav li#learn_more > a:hover, #primaryNav li#learn_more > a:focus, #primaryNav li#learn_more > a:active, #primaryNav li#learn_more_on > a, #primaryNav li#learn_more_on > a:link, #primaryNav li#learn_more_on > a:visited { background-position:-108px -66px; width: 132px; } #primaryNav li#who_we_are > a, #primaryNav li#who_we_are > a:link, #primaryNav li#who_we_are > a:visited { background-position:-240px 0px; width:132px; } #primaryNav li#who_we_are > a:hover, #primaryNav li#who_we_are > a:focus, #primaryNav li#who_we_are > a:active, #primaryNav li#who_we_are_on > a, #primaryNav li#who_we_are_on > a:link, #primaryNav li#who_we_are_on > a:visited { background-position:-240px -66px; width: 132px; } #primaryNav li#what_we_do > a, #primaryNav li#what_we_do > a:link, #primaryNav li#what_we_do > a:visited { background-position:-372px 0px; width:129px; } #primaryNav li#what_we_do > a:hover, #primaryNav li#what_we_do > a:focus, #primaryNav li#what_we_do > a:active, #primaryNav li#what_we_do_on > a, #primaryNav li#what_we_do_on > a:link, #primaryNav li#what_we_do_on > a:visited { background-position:-372px -66px; width: 129px; } #primaryNav li#how_you_can_help > a, #primaryNav li#how_you_can_help > a:link, #primaryNav li#how_you_can_help > a:visited { background-position:-501px 0px; width:182px; } #primaryNav li#how_you_can_help > a:hover, #primaryNav li#how_you_can_help > a:focus, #primaryNav li#how_you_can_help > a:active, #primaryNav li#how_you_can_help_on > a, #primaryNav li#how_you_can_help_on > a:link, #primaryNav li#how_you_can_help_on > a:visited { background-position:-501px -66px; width: 182px; } #primaryNav li#whats_happening > a, #primaryNav li#whats_happening > a:link, #primaryNav li#whats_happening > a:visited { background-position:-683px 0px; width:176px; } #primaryNav li#whats_happening > a:hover, #primaryNav li#whats_happening > a:focus, #primaryNav li#whats_happening > a:active, #primaryNav li#whats_happening_on > a, #primaryNav li#whats_happening_on > a:link, #primaryNav li#whats_happening_on > a:visited { background-position:-683px -66px; width: 176px; } #primaryNav li#donate > a, #primaryNav li#donate > a:link, #primaryNav li#donate > a:visited { background-position:-859px 0px; width:101px; } #primaryNav li#donate > a:hover, #primaryNav li#donate > a:focus, #primaryNav li#donate > a:active, #primaryNav li#donate_on > a, #primaryNav li#donate_on > a:link, #primaryNav li#donate_on > a:visited { background-position:-859px -66px; width: 101px; } /*------------------------------------------------------------------ Secondary Navigation -------------------------------------------------------------------*/ #subNav { margin-top: 25px; border: 1px solid #c3c2be; background-color: #e2ded5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #subNav > ul { margin: 20px 0 15px 20px;} /* .secondaryNav > li > img{ float: left; position: relative; left:-14px; top:8px; } */ ul.secondaryNav { width: 260px; font: normal 13px/20px Verdana, sans-serif; position: relative; left:-12px; top:-5px; margin-bottom: 25px; } ul.secondaryNav > li { list-style-image: none; background-image: url("../images/bullet_sidebar.png"); background-position: 1px 4px; background-repeat: no-repeat; padding: 0 0 6px 8px; } ul.secondaryNav > li > a { color: #3c444f; height: 28px; text-decoration: none; padding: 0 10px; display: block; } ul.secondaryNav > li > a:hover { color: #621a4a; text-decoration: none; border-bottom: none !important; } ul.secondaryNav > li.on > a { color: #621a4a; text-decoration: none; border-bottom: none !important; text-decoration: underline; } ul.secondaryNav > ul { width: 225px; font: normal 12px/16px Verdana, sans-serif; margin: 0px 0 24px 34px; } ul.secondaryNav > ul > li { width: 225px; list-style: disc; } ul.secondaryNav > ul > li > a { color: #621a4a; height: 24px; text-decoration: none; padding: 0 0px; display: block; } ul.secondaryNav > ul > li > a:hover { color: #621a4a; text-decoration: underline; border-bottom: none !important; } ul.secondaryNav > ul > li.on > a { color: #621a4a; text-decoration: underline; border-bottom: none !important; } ul.secondaryNav li.longText { line-height:16px; padding-bottom: 15px; } ul.secondaryNav li.longText span { position:relative; top:0px; } /*------------------------------------------------------------------ Dropdown Menus -------------------------------------------------------------------*/ div.dropdown ul li a,div.dropdown ul li a:link, div.dropdown ul li a:visited { color: #e6ddde; text-decoration: none; padding: 7px 12px; display: block; border-bottom: 0px #517d90 solid; background-color: #902473; font-size: 12px; } div.dropdown ul li a:hover { color: #e6ddde; background-color: #4b063a; } div.dropdown ul ul li a,div.dropdown ul ul li a:link, div.dropdown ul ul li a:visited { color: #e6ddde; text-decoration: none; padding: 3px 12px 3px 27px; display: block; border-bottom: 0px #517d90 solid; background-color: #902473; font-size: 11px; } div.dropdown ul ul li a:hover { color: #e6ddde; background-color: #4b063a; } div.dropdown ul ul li { line-height: 14px; } li#find_help div.dropdown, li#find_help_on div.dropdown { position: absolute; top: 55px; left: 9px; width: 310px; visibility: hidden; padding: 0; margin: 0 0 0 -9px; border: 1px solid #4b063a; border-top: none; z-index: 50; } li#learn_more div.dropdown, li#learn_more_on div.dropdown { position: absolute; top: 55px; left: 117px; width: 260px; visibility: hidden; padding: 0; margin: 0 0 0 -9px; border: 1px solid #4b063a; border-top: none; z-index: 50; } li#who_we_are div.dropdown, li#who_we_are_on div.dropdown { position: absolute; top: 55px; left: 249px; width: 260px; visibility: hidden; padding: 0; margin: 0 0 0 -9px; border: 1px solid #4b063a; border-top: none; z-index: 50; } li#what_we_do div.dropdown, li#what_we_do_on div.dropdown { position: absolute; top: 55px; left: 381px; width: 300px; visibility: hidden; padding: 0; margin: 0 0 0 -9px; border: 1px solid #4b063a; border-top: none; z-index: 50; } li#how_you_can_help div.dropdown, li#how_you_can_help_on div.dropdown { position: absolute; top: 55px; left: 510px; width: 180px; visibility: hidden; padding: 0; margin: 0 0 0 -9px; border: 1px solid #4b063a; border-top: none; z-index: 50; } li#whats_happening div.dropdown, li#whats_happening_on div.dropdown { position: absolute; top: 55px; left: 692px; width: 174px; visibility: hidden; padding: 0; margin: 0 0 0 -9px; border: 1px solid #4b063a; border-top: none; z-index: 50; } li#donate div.dropdown, li#donate_on div.dropdown { position: absolute; top: 55px; left: 709px; width: 260px; visibility: hidden; padding: 0; margin: 0 0 0 -9px; border: 1px solid #4b063a; border-top: none; z-index: 50; } li#donate div.dropdown ul li a,li#donate div.dropdown ul li a:link,li#donate div.dropdown ul li a:visited { color: #782061; text-decoration: none; padding: 7px 12px; display: block; border-bottom: 0px #517d90 solid; background-color: #eb9e0a; font-size: 12px; } li#donate div.dropdown ul li a:hover { color: #782061; background-color: #d69412; } li#donate div.dropdown ul ul li a,li#donate div.dropdown ul ul li a:link,li#donate div.dropdown ul ul li a:visited { color: #782061; text-decoration: none; padding: 3px 12px 3px 27px; display: block; border-bottom: 0px #517d90 solid; background-color: #d69412; font-size: 11px; } li#donate div.dropdown ul ul li a:hover { color: #782061; background-color: #d69412; } /*------------------------------------------------------------------ Buttons -------------------------------------------------------------------*/ #signup_btn {padding: .4em 1em .4em 1em;text-decoration: none;position: relative; margin-left: 10px;} #signup_btn span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} #go_btn {padding: .2em;text-decoration: none;position: relative; margin-left: 2px; } .btn_readmore { } .btn_readmore a, .btn_readmore a:link, .btn_readmore a:visited { display:block; width: 75px; height: 12px; background-image: url(../images/btn_readmore.png); background-repeat:no-repeat; background-position:0 0; text-decoration: none; text-indent: -9999px; } .btn_readmore a:hover, .btn_readmore a:focus, .btn_readmore a:active { background-position:0 -12px; } /*------------------------------------------------------------------ Images -------------------------------------------------------------------*/ img#logo_background { position: absolute; top: 120px; left: -30px;} img.float_rt { float: right; margin: 0 0px 10px 15px; } img.float_lt { float: left; margin: 4px 10px 10px 0; } img.framed { padding: 0px; border: 2px solid #525b6a; } img.header { position: absolute; top: -20px; left: -20px; } img.bannerImage { position: relative; top: 0px; left: 0px; z-index: 1; border: 2px solid #4a2a3c; float: left; } #banner_cycle { float: left; width: 450px; z-index: -1; } /*------------------------------------------------------------------ Links -------------------------------------------------------------------*/ a, a:link, a:visited { color: #5f124b; text-decoration: underline; } a:hover, a:active, a:focus { color: #77185e; text-decoration: underline; } #footerContent a, #footerContent a:visited, #footerContent a:link { color: #330e22; text-decoration: none; } #footerContent a:hover, #footerContent a.active { color: #491b34; text-decoration: underline; } #footerQuicklinks a, #footerQuicklinks a:visited, #footerQuicklinks a:link { color: #828180; text-decoration: none; text-transform: uppercase; font: 14px/35px Georgia, Helvetica, sans-serif; margin-right: 8px; background-color: #dcd9d5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 8px; } #footerQuicklinks a:hover, #footerQuicklinks a.active { color: #330e22; text-decoration: none; background-color: #99b14e; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 8px; } #globalContainer a, #globalContainer a:visited, #globalContainer a:link { color: #686f78; text-decoration: none; text-transform: uppercase; } #globalContainer a:hover, #globalContainer a.active { color: #686f78; text-decoration: none; border-bottom: 1px #b8c5ca dotted; } .menu a, .menu a:visited, .menu a:link { color: #003251; text-decoration: none; } .menu a:hover, .menu a.active { color: #522109; text-decoration: none; } .homeBox a, .homeBox a:visited, .homeBox a:link { color: #5f124b; text-decoration: none; font-weight: bold; } .homeBox a:hover, .homeBox a.active { color: #5f124b; text-decoration: underline; } .bannerText a, .bannerText a:visited, .bannerText a:link { color: #fff; text-decoration: underline; } .bannerText a:hover, .bannerText a.active { color: #d1a4c5; text-decoration: underline; } #sidebarButton a, #sidebarButton a:visited, #sidebarButton a:link { margin-top:30px; display: block; color: #fff; text-decoration: none; text-transform: uppercase; font: 14px/35px Georgia, Helvetica, sans-serif; background-color: #99b14e; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 3px 8px; width: 274px; } #sidebarButton a:hover, #sidebarButton a.active { color: #330e22; text-decoration: none; background-color: #99b14e; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 3px 8px; } /*------------------------------------------------------------------ Forms -------------------------------------------------------------------*/ input.textbox_search { width:120px; border: 1px solid #d8d8d8; color: #9d9d9a; padding:3px; position: relative; top:-4px; } input.textbox_sm { width:180px; border: 1px solid #9d9d9a; color: #9d9d9a; padding:3px; position: relative; top:-5px; } #searchform { width: 400px; text-align: right; float: right; } input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; } input[type=submit] { width: auto; padding: 2px 12px; background: #92a545; border: 0; position: relative; top: 1px; font-size: 13px; color: #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #searchBox input[type=text]{ width: 80px; }