/* Import structure for menu -- DO NOT MODIFY */ /* If you need to style the menu, you should add those styles in this screen.css file */ @import url(lib/main-menu.css); @import url(reset.css); /* ========================================================================= */ /* Typography */ /* ========================================================================= */ body {font-size: 14px; line-height: 21px; font-family: Tahoma, Geneva, Verdana, sans-serif; color: #4A5256;} h1,h2,h3,h4 {} h1 {font-size: 26px; line-height: 26px; margin-bottom: 16px; color: #8C8272;} h2 {font-size: 22px; line-height: 26px; margin-bottom: 2px; color: #22A3D0;} h3 {font-size: 18px; line-height: 26px; margin-bottom: 2px; color: #01597C; font-weight: bold;} h4 {font-size: 16px; line-height: 26px; margin-bottom: 2px; color: #595959; font-weight: bold;} h5 {font-size: 15px; line-height: 26px; margin-bottom: 2px; color: #202020;} p {margin-bottom: 18px;} ul,ol {margin-bottom: 18px; margin-left: 2em;} ul li {list-style: disc outside;} a {text-decoration: none; color: #22A3D0;} a:hover {text-decoration: underline;} i, em {font-style: italic;} b, strong {font-weight: bold;} blockquote {margin-left: 2em; padding-left: 1em; border-left: 4px solid #DCD9D4; color: #01597C; font-size: 17px;} /* ========================================================================= */ /* Layout */ /* ========================================================================= */ html {background-color: #003D57;} body {background: #00587C url('../img/bg.png') repeat-x;} #container {width: 960px; margin: 0 auto; position: relative;} #header {} #logo {margin: 20px 0 31px 0; float: left;} #headerLinks {font-size: 22px; font-weight: bold; float: left; margin: 40px 0 0 95px;} #headerLinks li {float: left; list-style-type: none; margin-right: 30px; padding: 4px 0 5px 30px; position: relative;} #headerLinks li a {background: url('../img/icon-arrow.png') no-repeat 100% 11px; padding-right: 10px; color: #00587C;} #headerLinks li a:hover {text-decoration: none;} #headerLinks .click {background: url('../img/icon-click.png') no-repeat 0 0;} #headerLinks .call {background: url('../img/icon-call.png') no-repeat 0 0;} #headerLinks .comeIn {background: url('../img/icon-come-in.png') no-repeat 0 0;} #searchForm {float: right; width: 208px; margin-top: 40px;} #searchForm li {list-style-type: none;} #searchForm img {float: left;} #searchForm .text {border:none; border-top: 1px solid #CECEC8; border-bottom: 1px solid #cecec8; padding: 4px 0 4px 5px; height: 19px; float: left; width: 150px;} #searchForm .submit {background: url('../img/button-site-search.png') no-repeat 0 0; border: none; text-indent: -9999em; width: 29px; height: 29px; float: left; cursor: pointer;} #mainMenu {font-size: 13px; font-weight: bold; overflow: hidden; clear: both; margin: 0;} #mainMenu li {list-style-type: none; float: left; margin-right: 1px;} #mainMenu a {background: url('../img/menu.png') no-repeat top right; display: inline-block; text-decoration: none; cursor: pointer;} #mainMenu span {background: url('../img/menu-left.png') no-repeat top left; height: 30px; color: #00587C; text-decoration: none; display: inline-block; padding: 10px 12px 0 11px;} #mainMenu a.current {background: url('../img/menu-on.png') no-repeat top right;} #mainMenu a.current span {background: url('../img/menu-left-on.png') no-repeat top left; color: #FFFFFF;} #mainMenu a.current:hover span {color: #FFFFFF;} #mainMenu a:hover span {color: #1392C7;} #content {background-color: #FFFFFF; margin-top: 10px; padding: 43px 29px 43px 29px;} #content {-moz-border-radius-topleft:6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topright:6px; -webkit-border-top-right-radius: 6px;} #mainContent {float: right; width: 590px;} #mainContent img {margin-bottom: 1em;} #sidebar {float: left; width: 280px;} #sidebarNav {font-size: 16px; margin: 0 0 30px 0;} #sidebarNav ul {margin: 0;} #sidebarNav li {list-style-type: none;} #sidebarNav a {color: #8C8272; text-decoration: none; border-bottom: 1px solid #EAE8E5; list-style-type: none; padding: 5px 0 5px 20px; display: block;} #sidebarNav li li a {padding-left: 40px;} #sidebarNav li li li a {padding-left: 60px;} #sidebarNav a:hover, #sidebarNav a.current {background: url('../img/icon-menu-on.png') no-repeat 7px 8px; color: #22A3D0;} #sidebarNav li li a:hover, #sidebarNav li li a.current {background: url('../img/icon-menu-on.png') no-repeat 27px 8px;} #sidebarNav li li li a:hover, #sidebarNav li li li a.current {background: url('../img/icon-menu-on.png') no-repeat 42px 8px;} #sidebar .quote {background: url('../img/icon-quotes.png') no-repeat 0 0; font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif; font-size: 20px; line-height: 24px; color: #8C8272; padding: 8px 0 0 35px; /*overflow: hidden;*/ margin-bottom: 20px;} #sidebar .citation {font-size: 12px; text-transform: uppercase; text-align: right; display: block; margin-top: -12px;} #sidebar .feature {border: 2px dashed #D9D9D9; font-size: 15px; line-height: 20px; color: #22A3D0; padding: 8px 10px 0 20px; overflow: hidden; -moz-border-radius:20px; -webkit-border-radius: 20px; width: 246px;} #sidebar .feature h2 {color: #01597C; font-weight: bold; font-size: 20px; margin-bottom: 6px;} #sidebar .feature a {color: #22A3D0; font-weight: bold;} #footer {background-color: #003D57;} #footerContainer {width: 960px; margin: 0 auto; padding: 20px 0 0px 0; overflow: hidden;} #links {width: 550px; float: right;} #links img {float: left; margin-right: 40px;} #footer ul {overflow: hidden; font-size: 12px; color: #FFD851; margin: 0;} #footer a {color: #FFD851;} #footer li {float: left; list-style-type: none;} #footer li span {margin: 0 5px;} #footer .copyright {margin: 0; color: #FFFFFF; font-size: 11px; clear: both;} #footer #return {background: #002231 url('../img/icon-return.png') no-repeat 85px 9px; float: right; display: block; padding: 3px 20px 0 10px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-transform: uppercase; color: #E1DEDB; text-decoration: none;} #return {-moz-border-radius-topleft:4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius: 4px;} /* ========================================================================= */ /* Home Page */ /* ========================================================================= */ .home #content {box-shadow: 5px 5px 5px #333333; -moz-box-shadow: 0px 0px 40px #333333; -webkit-box-shadow: 5px 5px 5px #333333; -moz-border-radius:0; -webkit-border-radius: 0; padding: 0; overflow: hidden; line-height: 18px; margin: 0;} .home #content h2 {font-size: 24px; color: #8C8272; border-bottom: 3px solid #DCD9D4; margin: 0 0 15px 0; padding-bottom: 3px;} .home #content h2 a {font-size: 14px; color: #22A3D0; margin-left: 10px;} .home #content h3 {font-size: 14px; line-height: 16px;} .home #content .meta {font-size: 12px; color: #ABABAB; display: block; margin-bottom: 5px;} #banner {background: url('../img/bg-banner.jpg') no-repeat 0 0; height: 210px;} #banner p {color: #FFD851; font-size: 20px; font-weight: bold; width: 565px; line-height: 26px; padding: 65px 0 0 30px;} #slideshow {width: 351px; height: 247px; position: absolute; left: 609px; top: 157px;} #slideshow img {position: absolute;} #mask {background: url('../img/slideshow-frame.png') no-repeat; width: 351px; height: 247px; position: absolute; z-index: 50; left: 609px; top: 157px;} #columnOne {width: 320px; float: left; margin-right: 29px;} #columnOne ul {margin: 0;} #columnTwo {width: 280px; float: left; padding-top: 40px; margin-right: 29px;} #columnThree {width: 280px; float: left; padding-top: 40px;} .featureBox {background: url('../img/bg-feature-box.png') no-repeat 0 0; width: 295px; height: 111px; padding: 25px 10px 0 0; list-style-type: none; display: block; line-height: 1.2em; border-left: 5px solid #F1CC4B; cursor: pointer;} .featureBox:hover {border-left: 5px solid #22A3D0;} .featureBox dt {font-size: 18px; font-weight: bold; margin-bottom: 10px;} .featureBox a {color: #4A5256;} .community dl {background: url('../img/icon-community.png') no-repeat 25px 20px; padding-left: 80px;} .volunteer dl {background: url('../img/icon-volunteer.png') no-repeat 25px 20px; padding-left: 80px;} .mentoring dl {background: url('../img/icon-mentoring.png') no-repeat 25px 20px; padding-left: 80px;} .home .newsArticle {margin-bottom: 9px;} .date {background: url('../img/bg-date.png') no-repeat 0 0; float: left; width: 42px; height: 35px; padding-top: 17px; color: #8C8272; margin-bottom: 20px;} .date .month {font-size: 10px; text-transform: uppercase; display: block; text-align: center; line-height: 10px;} .date .day {font-size: 16px; display: block; text-align: center; font-weight: bold;} #columnThree h3 {float: right; width: 228px;} .feature {border: 2px dashed #80ACBE; font-size: 15px; line-height: 20px; color: #FFFFFF; padding: 8px 20px 0 20px; margin-bottom: 30px; width: 290px; overflow: hidden; -moz-border-radius:20px; -webkit-border-radius: 20px;} .feature h2 {color: #FFD851; font-weight: bold; font-size: 20px; margin-bottom: 6px;} .feature a {color: #FFFFFF; font-weight: bold;} #survey {width: 600px; float: left;} #survey h2 {float: left; background: url('../img/icon-survey-arrow.png') no-repeat 170px 5px; color: #FFFFFF; font-size: 18px; font-weight: bold; width: 149px; text-align: right; padding-right: 65px;} #survey p {float: left; width: 150px; color: #FFD851; font-size: 18px;} #surveyResults {float: left; margin: 10px 0 0 224px;} #bottomRow {margin-top: 30px;} /* ========================================================================= */ /* Home Page Embedded Form */ /* ========================================================================= */ iframe {border: none;} .sTitle div {background-color: #ddd;} /* ========================================================================= */ /* Contact */ /* ========================================================================= */ #googleMap {border: 1px solid #14557F;} /* ========================================================================= */ /* Search Results */ /* ========================================================================= */ #searchResults {margin: 0; clear:both;} #searchResultsForm {width: 208px; margin-bottom: 15px; overflow: hidden;} #searchResultsForm li {list-style-type: none;} #searchResultsForm img {float: left;} #searchResultsForm .text {border:none; border-top: 1px solid #CECEC8; border-bottom: 1px solid #cecec8; padding: 4px 0 4px 5px; height: 19px; float: left; width: 150px;} #searchResultsForm .submit {background: url('../img/button-site-search.png') no-repeat 0 0; border: none; text-indent: -9999em; width: 29px; height: 29px; float: left; cursor: pointer;} /* ========================================================================= */ /* News Pages */ /* ========================================================================= */ .newsArticle {margin-bottom: 36px;} #newsNavigation ul {margin: 0 0 30px 0;} #newsNavigation li {list-style-type: none;} #newsNavigation a {color: #8C8272; text-decoration: none; border-bottom: 1px solid #EAE8E5; list-style-type: none; padding: 5px 0 5px 20px; display: block;} #newsNavigation a:hover {background: url('../img/icon-menu-on.png') no-repeat 7px 8px; color: #22A3D0;} #newsNavigation h2 a {padding: 0; color: #22A3D0; border: none;} #newsNavigation h2 a:hover {padding: 0; color: #22A3D0; text-decoration: underline; background-image: none;} #newsNavigation span {display: block;} /* ========================================================================= */ /* Events Pages */ /* ========================================================================= */ #eventDetails {margin-left: 0;} #eventDetails span {width: 100px; font-weight: bold; display: inline-block;} #eventDetails li {list-style-type: none;} #moreEvents {margin: 0; overflow: hidden;} #moreEvents li {list-style-type: none;} /* ========================================================================= */ /* Forms */ /* ========================================================================= */ form li {list-style-type: none;} form ul {margin: 0;} form .button {border: none; border-radius: 6px; -moz-border-radius:6px; -webkit-border-radius: 6px; background-color: #20A0CE; color: #FFFFFF; font-size: 13px; padding: 3px 12px; cursor: pointer;} form .button:hover {color: #CCCCCC;} #formContainer {float: left; margin: 0; font-size: 18px; color: #FFFFFF; width: 380px; height: 100px;} /* ========================================================================= */ /* JavaScript */ /* ========================================================================= */ .rollover {font-size: 15px; color: #22A3D0; font-weight: normal; position: absolute; top: 30px;} .click .rollover {right: 0px; width: 300px; text-align: right;} .call .rollover {left: 0px; width: 100px;} .comeIn .rollover {font-size: 12px; left: 9px; top: 34px; width: 200px; line-height: 1.2em; color: #00587C;} #headerLinks .rollover a {background: none; color: #22A3D0;} /* ========================================================================= */ /* Tables */ /* ========================================================================= */ table {width: 100%; margin-top: 10px;} th {color: #999999; font-weight: bold; padding: 5px 8px 5px 8px; text-transform: uppercase; border-bottom: 1px solid #DDDDDD;} td {border-bottom:1px solid #EAE8E5; padding: 6px 8px; line-height: 16px;} table a {font-weight: bold; font-size: 14px;} /* ========================================================================= */ /* Quicklists */ /* ========================================================================= */ #agency {margin: 0;} #agency li {list-style-type: none; clear: both; margin-bottom: 0.5em;} #agency span {width: 120px; display: inline-block; font-weight: bold; /*float: left;*/ /*text-align: right;*/ float: left;} #agency div {float: right; width: 470px; padding-bottom: 0.5em;} /* ========================================================================= */ /* Miscellaneous */ /* ========================================================================= */ .hidden {display: none;} .clear {clear: both;} .alignRight {float: right;} .right {margin: 0 0 5px 10px;} .left {margin: 0 10px 5px 0;} .middle {margin-left: auto; margin-right: auto;} .lightbox {overflow: hidden;} .lightbox img {float: left;} /* ========================================================================= */ /* Single Column Template */ /* ========================================================================= */ #single-col #mainContent {float: none; width: 900px;} #single-col iframe {height: 500px; width: 100%;}