@IMPORT url("reset.css"); .clear { clear: both; display: block; } html { height: 100% } body { height: 100%; background: #6e6e6e; font-family: Arial,Helvetica,sans-serif; } #head-container { width: 100%; height: 83px; background: transparent url("../img/bg-head-container.gif") repeat-x; } #head-container #header { width: 940px; margin: 0px auto; padding: 22px 10px; background: transparent url("../img/bg-header.jpg") no-repeat top center; } #head-container #header h1 a { font-size: 24px; color: #fff; text-shadow: 1px 1px black; margin: 0px 0px 0px 105px; text-decoration: none; } #head-container #header #navigation { float: right; } #head-container #header #navigation li.item {list-style-type: none; float: left; margin: 8px 4px 0px; display:inline;position:relative;} #head-container #header #navigation li.item a {color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; padding: 5px 12px; background: #369; display:inline-block; } #head-container #header #navigation li.item a.sel, #head-container #header #navigation li.item:hover a { color: #666; font-size: 14px; font-weight: bold; text-decoration: none; padding: 5px 12px; background: #fff; display:inline-block; } #head-container #header #navigation li.item ul {display:none;position:absolute;left:-1px; padding-left:0px;list-style:none; } #head-container #header #navigation li.item:hover ul {display:block;margin:0px 10px 10px 1px; width:182px;font-size:12px; background:#336699; z-index:900; margin-top:0px;} #head-container #header #navigation li.item ul li.subitem { width:176px;list-style-type: none; float: left; margin: 0px; display:inline;position:relative;} #head-container #header #navigation li.item ul li.subitem:hover {width:182px;list-style-type: none; float: left; display:inline;position:relative; background-color:#FFF;} #head-container #header #navigation li.item ul li.subitem.first {border-top:none; top:0px;} #head-container #header #navigation li.item ul li.subitem a {color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; padding: 4px 12px; background: #369; display:inline-block;} #head-container #header #navigation li.item ul li.subitem:hover a { background-color:#fff; color: #666;} #head-container #header #navigation li.item:hover ul li.subitem a {background:none; } #content-container { width: 100%; background: #fff; } #content-container #content { width: 940px; margin: 0px auto; padding: 20px 10px; } #content-container #content #left-sidebar { width: 180px; margin-right: -192px; float: left; } #content-container #content #left-sidebar #logo { height: 160px; margin-top: -103px; background: transparent url("../img/header-logo.png") no-repeat top center; } #content-container #content #left-sidebar p { font-size: 12px; text-align: center; margin-top: 2px; } #content-container #content #left-sidebar .support { font-size: 14px; text-align: center; margin-top: 2px; color: #284168; font-weight: bold; margin: 25px 0px 10px; } #content-container #content #left-sidebar .join-button { width: 185px; height: 21px; display: block; margin: 2px auto; text-align: center; background: transparent url("../img/button-join.jpg") no-repeat top center; font-size: 20px; font-weight: bold; color: #4c4c4c; text-decoration: none; padding: 12px 0px; letter-spacing: -1px; } #content-container #content #left-sidebar .volunteer-button { width: 185px; height: 18px; display: block; margin: 2px auto; text-align: center; background: transparent url("../img/button-volunteer.jpg") no-repeat top center; font-size: 16px; font-weight: bold; color: #4c4c4c; text-decoration: none; padding: 14px 0px 13px; letter-spacing: -1px; } #content-container #content #left-sidebar .stop-program { width: 53px; height: 54px; display: block; margin: 2px auto; text-align: left; text-indent: -900px; background: transparent url("../img/stop-program.gif") no-repeat top center; } #content-container #content #left-sidebar .program { color: #d10a0a; font-size: 16px; font-weight: bold; } #content-container #content #middle { margin: 0px 244px 0px 197px; float: left; width: 504px; } #content-container #content #middle .welcome-banner { height: 185px; background: transparent url("../img/homepage-banner.jpg") no-repeat top left; } #content-container #content #middle .welcome-banner h2 { color: #1d4991; font-weight: bold; font-size: 31px; padding: 55px 0px 0px 40px;} #content-container #content #middle .welcome-banner h2 strong { display: block; font-size:52px; } #content-container #content #middle .gallery-banner, #content-container #content #middle .page-banner { height: 73px; background: transparent url("../img/gallery-banner.png") no-repeat top center; } #content-container #content #middle .gallery-banner h2, #content-container #content #middle .page-banner h2 { color: #1d4991; font-weight: bold; font-size: 31px; padding: 18px; text-align: center; } #content-container #content #middle .welcome-banner h2 { margin-top: 0px; } #content-container #content #middle .intro { margin: 15px 0px; font-size: 14px; } #content-container #content #middle .seasonal-info, #content-container #content #middle .gallery-container, #content-container #content #middle .page-container { margin: 15px 0px; font-size: 14px; padding: 15px; background: transparent url("../img/bg-seasonal.jpg") no-repeat top center; min-height: 220px; } #content-container #content #middle .page-container p { color: #232323; font-size: 13px; } #content-container #content #middle .page-container h1 { font-size: 20px; font-weight: bold; color: #232323; margin: 5px 0px 10px; } #content-container #content #middle .page-container h2 { font-size: 18px; font-weight: bold; color: #232323; margin: 5px 0px 10px; } #content-container #content #middle .page-container h3 { margin: 10px 0px 5px 10px; } #content-container #content #middle .page-container h3 a { color: #1D4991; } #content-container #content #middle .page-container .news-descr { margin-left: 10px; color: #232323; } #content-container #content #middle .page-container .date { color: #232323; font-style: italic; margin-bottom: 5px; } #content-container #content #middle .gallery-container { padding-top: 5px; } #content-container #content #middle .seasonal-info h3 { font-size: 20px; font-weight: bold; color: #666; margin-bottom: 10px } #content-container #content #middle .gallery-container h3 { font-size: 14px; font-weight: normal; color: #000; margin: 10px 0px; } #content-container #content #middle .gallery-container h3 a { color: #000; text-decoration: none; } #content-container #content #middle .gallery-container p { color: #373737; font-size: 13px; } #content-container #content #middle .gallery-container .photos { margin: 25px -25px 25px 0px; } #content-container #content #middle .gallery-container .photos a { float: left; margin-right: 15px; margin-bottom: 15px; border: 1px solid #000; padding: 1px; } #content-container #content #right-sidebar { width: 230px; margin-left: -244px; float: right; } #content-container #content #right-sidebar #calendar { background: #e5e5e5; padding: 14px; } #content-container #content #right-sidebar #calendar .previous { width: 22px; height: 21px; background: transparent url("../img/calendar-prev.png") no-repeat top left; display: block; float: left; text-indent: -100px; overflow: hidden; } #content-container #content #right-sidebar #calendar .next { width: 22px; height: 21px; background: transparent url("../img/calendar-next.png") no-repeat top right; display: block; float: right; text-indent: -100px; overflow: hidden; margin-left: -22px; } #content-container #content #right-sidebar #calendar h3 { font-size: 15px; font-weight: bold; float: left; padding-top: 3px; text-align: center; width: 160px; } #content-container #content #right-sidebar #calendar .days { margin: 10px -6px 0px 0px; width: 210px; } #content-container #content #right-sidebar #calendar .days div { width: 25px; height: 16px; margin: 0px 5px 5px 0px; text-align: center; font-size: 13px; float: left; padding-top: 4px; } #content-container #content #right-sidebar #calendar .days div a { color: #000; text-decoration: none; } #content-container #content #right-sidebar #calendar .days .empty { background: transparent url("../img/calendar-empty.png") no-repeat; } #content-container #content #right-sidebar #calendar .days .cold { background: transparent url("../img/calendar-cold.png") no-repeat; } #content-container #content #right-sidebar #calendar .days .hot { background: transparent url("../img/calendar-hot.png") no-repeat; } #content-container #content #right-sidebar #calendar .days .current { background: transparent url("../img/calendar-current.png") no-repeat; } #content-container #content #right-sidebar #latest-news { height: 314px; background: transparent url("../img/bg-latest-news.jpg") no-repeat top center; margin-top: 15px; padding: 15px; } #content-container #content #right-sidebar #latest-news h3 { color: #1d4991; font-size: 20px; font-weight: bold; margin-bottom: 15px; } #content-container #content #right-sidebar #latest-news p { font-size: 13px; margin: 10px 0px; } #content-container #content #right-sidebar #latest-news a { color: #1D4991; font-weight: bold; } #foot-container { width: 100%; height: 130px; background: transparent url("../img/bg-foot-container.gif") repeat-x; overflow: hidden; } #foot-container #footer { width: 940px; margin: 0px auto; padding: 30px 10px; background: transparent url("../img/bg-footer.png") no-repeat top center; } #foot-container #footer #copyright { font-size: 12px; font-weight: normal; color: #fff; text-align: right; margin-top: 45px; } #foot-container #footer #bottom-navigation { float: right; } #foot-container #footer #bottom-navigation .last { margin-right: 0px; padding-right: 0px; } #foot-container #footer #bottom-navigation li { list-style-type: none; float: left; margin: 0px 4px 0px; padding: 5px 12px; } #foot-container #footer #bottom-navigation li a { color: #fff; font-size: 12px; font-weight: bold; text-decoration: none; } #foot-container #footer #bottom-navigation li a:hover { text-decoration: underline; } /* calendar days spacers */ #content-container #content #right-sidebar #calendar .days .spacer_1 { width: 25px; float: left; display: block; } #content-container #content #right-sidebar #calendar .days .spacer_2 { width: 55px; float: left; display: block; } #content-container #content #right-sidebar #calendar .days .spacer_3 { width: 85px; float: left; display: block; } #content-container #content #right-sidebar #calendar .days .spacer_4 { width: 115px; float: left; display: block; } #content-container #content #right-sidebar #calendar .days .spacer_5 { width: 145px; float: left; display: block; } #content-container #content #right-sidebar #calendar .days .spacer_6 { width: 170px; float: left; display: block; margin-left: 5px; } /* horiz line */ .hr { border-top: 1px solid #ccc; margin: 10px 0px; }