/* style.css mock Created by Callum Wilson on 2009-03-17. Copyright 2009 Oxygen Kiosk Pty Ltd. All rights reserved. */ /* h2 - 36px h3 - 16px h4 - 14px p - 12px */ * {margin: 0; padding: 0;} html, body {height: 100%;} body {font-size: 75%; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; color: #000; line-height: 1.5;} html>body {font-size:12px;} /* ========== */ /* = Layout = */ /* ========== */ html {background:url('../img/html-back.png') top left repeat-x #fff;} #container, #footer, #header {width:960px; margin:0 auto;} #container {margin-top:4px; background:url('../img/content-background.png') top center repeat-y; padding:0 20px; position: relative;} body#home #container, #home-page-test #container {background:url('../img/content-background-home.png') top center repeat-y; padding:0 20px;} h1#logo {width:350px; height:110px; padding-top:35px; float:left; margin-bottom:30px;} h1#logo a {display:block; width:350px; height:110px; background:url('../img/logo.png') top left no-repeat; text-indent:-9999em; float:left;} p#donations {float:right;width:210px; height:65px; float:right; clear:right; padding-top:40px; margin-top: 0} p#donations a {display:block; float:right; background:url('../img/donate.png') top left no-repeat; width:210px; height:65px; text-indent: -9999em; clear:right;} /* ================== */ /* = Top Navigation = */ /* ================== */ ul#top-menu {width:400px; float:right;background:url('../img/top-menu.png') top left repeat-x; margin:0; height:30px; padding:0; text-align: center;} /* ul#top-menu * {float:left;} */ ul#top-menu li {display:inline; margin:0; } ul#top-menu li a {/* display:block; */line-height:25px; height:25px; padding:0 9px; font-size: 0.8em; color:#fff; text-decoration: none; border-left:1px solid #1B81A2; margin-top:2px;} ul#top-menu li.first a {border-left: none;} ul#top-menu li.last a {border-right: none;} /* =================== */ /* = Main Navigation = */ /* =================== */ ul#menu {clear:both; list-style:none; margin:0; background:url('../img/menu.png') top left repeat-x #3F87A9; padding: 0;padding-top:6px; height:69px; position:relative; z-index:100;} ul#menu * {float:left;} ul#menu li {list-style:none; margin:0; display: inline;} ul#menu li a {display: block; color:#fff; height:39px; line-height:57px; padding: 0 10px; border-right:1px solid #146179; border-left: 1px solid #166F8B;padding-top:18px; } ul#menu li a span {display: block; color:#fff; height:57px; line-height:57px; text-indent:-9999em; background-image: url(../img/menu-sprite3.png); background-position: top left; background-repeat: no-repeat; height:17px} ul#menu li.active a {display: block; background:url('../img/menu-active-arrow.png') bottom center no-repeat; /* float:none; */} ul#menu li#menu-home a {border-left:0;} /* ul#menu li#menu-news a {border-right:0;} */ ul#menu li.active {background:url('../img/menu-active.png') top left repeat-x;border-left:1px solid #599C57; border-right:1px solid #488149;} ul#menu li.active a {border:none;} ul#menu li:hover {background:url('../img/menu-active.png') top left repeat-x; outline:none;} ul#menu li:hover a {border-left:1px solid #599C57; border-right:1px solid #488149;} ul#menu li.active:hover a { border:none; cursor:hand;} ul#menu li a:hover span {cursor:hand;} /* The Menu Text */ ul#menu li#menu-1 a span {background-position: 9px 0; width:74px;} /* ul#menu li#menu-1 a:hover span {background-position: 9px -19px;} */ ul#menu li#menu-3 a span {background-position: -224px 0; width:205px;} /* ul#menu li#menu-3 a:hover span {background-position: -224px -19px;} */ ul#menu li#menu-2 a span {background-position: -70px 0; width:149px;} /* ul#menu li#menu-2 a:hover span {background-position: -70px -19px; } */ ul#menu li#menu-23 a span {background-position: -435px 0; width:77px;} /* ul#menu li#menu-23 a:hover span {background-position: -435px -19px;} */ ul#menu li#menu-87 a span {background-position: -512px 0; width:77px;} ul#menu li#menu-257 a span {background-position: -591px 0; width:124px;} /* ul#menu li#menu-87 a:hover span {background-position: -512px -19px;} */ /* Side Navigation ---------------------------------------- */ ul#side-navigation {margin-top:20px; border-bottom: 1px solid #AAA6A7; border-top: 1px solid #AAA6A7} ul#side-navigation li, ul#side-navigation ul {text-transform: uppercase; color:#000; margin:0; padding:0} ul#side-navigation a, li.here span {display:block; min-height:30px; line-height:30px;} li.here span {padding-left: 10px;border:1px solid #AAA6A7; text-decoration: underline; margin-top:-1px} li.here a span {padding-left: 0;border:none; text-decoration: none;} /* first level */ ul#side-navigation li.level1 a {display:block; background:url('../img/side-menu-item-background.png') top left repeat-x #d5d5d5; border:1px solid #AAA6A7; color:#000; text-decoration: none; padding-left: 10px; margin-top:-1px;text-shadow: 0 1px 1px white} /* second level */ ul#side-navigation li.level2 a {background: transparent;} /* third level */ ul#side-navigation li.level2 ul li a, ul#side-navigation li.level2 ul li span {padding-left:30px; background:#fff } /*ul#side-navigation, ul#side-navigation li {list-style: none; } ul#side-navigation {margin-top:20px; border-right: 1px solid #AAA6A7; z-index: 1; overflow:visible;background:#efefef} ul#side-navigation li.level1 {text-transform:uppercase; position:relative; z-index:2; } ul#side-navigation li.level1 a {text-decoration:none; padding: 6px 12px; display:block; border-bottom:1px solid #ddd; color: #222;} ul#side-navigation li.here span {text-decoration:none; padding: 6px 12px 6px 5px; display:block; color: #4287FF;border:1px solid #AAA6A7; border-right:none;text-transform:uppercase; margin-left:0.5em;} ul#side-navigation li.level1 a span {padding: 0; display:inline; border:none; color: #222} ul#side-navigation li.here ul {margin: 0; padding: 0; position:relative; overflow:visible; background-color:#efefef;} ul#side-navigation li.level1 ul li.level2 {text-transform:none;} ul#side-navigation li.level1 ul li.level2 a, ul#side-navigation li.level1 ul li.here span {text-decoration:none; border: none; padding: 6px 24px; display:block; margin-left:1em; border:1px solid #AAA6A7; border-right:none; text-transform:none;} ul#side-navigation li.level1 ul li.level2 a {border:none;} /* If the item is active, colour it’s background and bump it out to the right*/ /*ul#side-navigation li.level1 ul li.here span, ul#side-navigation li.here span {position:relative;right:-1px; background:#fff;}*/ /* Give them a slightly rounded left edge */ /*ul#side-navigation li.here span, ul#side-navigation li.level1 ul li.here span { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25); box-shadow: 0px 0px 3px rgba(0,0,0,0.25); }*/ /* Remove the shadows from the spans inside */ /*ul#side-navigation li.here a span { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: transparent; }*/ /*ul#side-navigation {margin-top:20px; } ul#side-navigation li, ul#side-navigation ul {text-transform: uppercase; color:#000; margin:0; padding:0} ul#side-navigation a, li.here span {display:block; padding:5px 10px 5px 10px;} li.here span {padding-left: 10px;border:1px solid #AAA6A7; text-decoration: underline; margin-top:-1px;} li.here a span {padding-left: 0;border:none; text-decoration: none;} /* first level */ /*ul#side-navigation li.level1 a {display:block; background:url('../img/side-menu-item-background.png') top left repeat-x #d5d5d5; border:1px solid #AAA6A7; color:#000; text-decoration: none; padding-left: 10px; margin-top:-1px;text-shadow: 0 1px 1px white}*/ /* second level */ /*ul#side-navigation li.level2 a {background: transparent;}*/ /* third level */ /*ul#side-navigation li.level2 ul li a, ul#side-navigation li.level2 ul li span {padding-left:30px; background:#fff }*/ /* =============== */ /* = Search Form = */ /* =============== */ ul#menu li#menu-search {float:right; width:260px; padding-top: 12px;} ul#menu li#menu-search:hover {background:transparent;} ul#menu li#menu-search ol {float:none; width:260px;} ul#menu li#menu-search li {float:left; width:135px;} ul#menu li#menu-search li input {width:125px; color:#1F93B9;} ul#menu li#menu-search li.search-field {margin-right:10px;} ul#menu li#menu-search li.search-button {float:none;} button#ajaxSearch_submit {background:url('../img/search-button.png') top left no-repeat; width:100px; height:30px; float:left; text-indent:-9999em; border:none;} /* =========== */ /* = Content = */ /* =========== */ #content{position:relative; top:-6px; z-index:100; } /* ======== */ /* = Page = */ /* ======== */ div#page { padding:1.5em 20px 0 20px; background: #fff; width:680px; float:right; position:relative; z-index: 102;} /* Breadcrumb */ ol#breadcrumb {height:2em;} ol#breadcrumb li {float:left; margin-right: 5px; text-transform: uppercase; height:15px; line-height: 15px;} ol#breadcrumb li.here {margin-right: 0; padding-right: 15px; background:url('../img/breadcrumb-arrow-here.png') center right no-repeat;} #page ol#breadcrumb li a {color:#000; font-weight: bold; text-decoration: none; background:url('../img/breadcrumb-arrow-next.png') center right no-repeat; padding-right:15px;} #page a.B_crumb, #page a.B_homeCrumb {color:#000; font-weight: bold; text-decoration: none; background:url('../img/breadcrumb-arrow-next.png') center right no-repeat; padding-right:15px; margin-right: 5px} .B_currentCrumb {margin-right: 0; padding-right: 15px; background:url('../img/breadcrumb-arrow-here.png') center right no-repeat;} .hentry {overflow: hidden} .hentry h3 {margin-bottom:0;} .hentry p.news-item-meta {margin-top:0; font-size: 0.833333em;line-height: 1.8em;} /* ============== */ /* = Front Page = */ /* ============== */ body#home #page, #home-page-test #page {padding:0} body#home #page {float: none; width:auto;} body#home ul#menu, #home-page-test ul#menu {height:63px} .row {margin-bottom:1em;} #newsletter {float:right; width:210px; background:url(../img/newsletter-background.png) top left no-repeat; height:200px; padding:10px;} #newsletter h2, #find-out h2 {font-size: 1.4em; color:#fff; line-height: 1.4; margin-top: 0} #newsletter p {color: #fff;} #newsletter li.submit {text-align: right} #newsletter ol {margin:0;} #banner-image {float: left} .banners {width: 720px; height:220px; overflow:hidden; position: relative; float:left;} .banners ul {width: 2000px; margin:0; padding:0; list-style: none} .banners ul li {list-style: none} .banners img {float:left;} #top {position: relative;} #top .shadow {position: absolute; top:0; left:0; width:100%; height:5px; background:url('../img/banner-shadow.png') top left repeat-x;z-index: 100;} #find-out {background:url(../img/hppigs.jpg) bottom right no-repeat #000; height:220px; overflow: hidden; margin: 0 0 10px 0} .questions {width:210px; margin-left: 10px; background:url(../img/questions-bg.png) top left repeat transparent; height:175px; margin-top: 10px;padding: 10px } .questions h2 {background: url(../img/find-out.png) top left no-repeat; text-indent: -9999em; height: 19px; width:92px} .questions ul {list-style: none; margin:0; padding:0; list-style-image: none;} .questions ul li {list-style: none; list-style-image: none;font-size: 0.95em; margin-bottom:5px; text-transform: uppercase} #page .questions ul li a {display: block; height:47px; background:url(../img/find-out-button.png) top left transparent; color:#000; text-decoration: none; line-height: 49px; padding-left: 10px; text-shadow: 0 1px 1px white } .questions ul li a:hover {background:url(../img/find-out-button.png) bottom left transparent; } #friends {width:470px; float:left; height: 53px; background: url(../img/friends-background.png) top left no-repeat; margin-left:10px; margin-right: 10px; display: inline;} #friends h2 {background: url(../img/be-our-friend.png) top left no-repeat; height:16px; width:155px; text-indent: -9999em; float:left; margin:0; line-height:50px; margin-top: 17px; margin-left:10px;} #friends ul {list-style: none; margin: 0; padding: 0; margin-top:5px; margin-left: 10px; float:left} #friends ul.social-networks * {float:left;} #friends ul.social-networks li {list-style: none; display: inline; margin-right:5px} #friends ul.social-networks li a {display:block; width:42px; height:42px; background-image: url(../img/social-networks.png); background-position: 0 0; background-repeat: no-repeat; text-indent: -9999em;} #friends ul.social-networks li.social-facebook a{background-position: 0 0;} #friends ul.social-networks li.social-causes a{background-position: -100px 0;} #friends ul.social-networks li.social-digg a{background-position: -100px 0;} #friends ul.social-networks li.social-myspace a{background-position: -149px 0;} #friends ul.social-networks li.social-twitter a{background-position: -199px 0;} #friends ul.social-networks li.social-youtube a{background-position: -246px 0;} #friends ul.social-networks li.social-flickr a{background-position: -293px 0;} #rss {width:470px; float:left; height:53px; background: url(../img/rss-background.png) top left no-repeat;} #rss h2 {background:url(../img/rss.png) top left no-repeat; width: 35px; height:17px; text-indent: -9999em; float:left; margin: 16px 10px 0 10px;} #rss p {color:#fff; margin: 0; } #rss p.rss-icon a {display: block; background: url(../img/rss-icon.png) top left no-repeat; width:41px; height:41px; margin-top:5px; text-indent: -9999em} #rss p.rss-icon {width:41px;float:left; margin-right: 10px} #rss p.rss-description {margin-top:11px; font-size:0.8em; margin-right:20px;} div#news {clear:left; width:690px; padding:1em 10px; margin-left:10px; float:left; display: inline;} .news-item {width:330px; float:left; margin-right: 10px} .news-item h3, .news-item h4 {margin:0; font-size: 1.166667em; line-height: 1.285714em; margin-top: 0em; margin-bottom: 0;} #page .news-item h4 a {color: #000;} #page .news-item h4 a:hover {color: #6BC75C;} .news-item p.news-meta {font-size: 0.833333em; margin-top: 0;line-height: 1.8em;margin-bottom: 0.9em; } p.read-more a {display: block; float:right; background:url(../img/read-more.png) top left no-repeat; text-indent: -9999em;width:112px; height:28px} p.read-more a:hover {background:url(../img/read-more.png) bottom left no-repeat;} .front-ads {width:220px; float:left} /* ======== */ /* = Blog = */ /* ======== */ div.comment {padding: 1em 20px; position: relative;} div.comment div.jot-posticon, div.comment div.jot-mod {position: absolute; right:10px; top: 1em;} div.comment div.jot-posticon {top:3em} div.jot-row-alt {background: #f6f6f6} h4.comment-title {margin-bottom: 0; clear:none} p.comment-meta {margin-top: 0; font-size: 0.8em; color:#ababab} img.gravatar {float:left; margin: 0 10px 10px 0;} div.comment-content {clear:left;} form.jot-form ol {margin-top:0;} form.jot-form fieldset {border: none;} form.jot-form input[type=text] {font-size: 1em;} /* ======== */ /* = Side = */ /* ======== */ #side {float:left; width:240px; background:url(../img/side-top.png) top left repeat-x #f7f7f7; top:-6px; position: relative;z-index: 101; display:inline; } .sidebar-ads {text-align: center; margin-top: 1em; margin-bottom: 0;} /* ========== */ /* = Footer = */ /* ========== */ #footer {clear:both; color:#0093D0; margin-top:25px; padding-bottom: 10px; padding:0 20px; width:920px; padding-bottom:1em} #footer .column {float:left; width:230px; margin-right: 60px;} #footer-logo {background:url('../img/footer-logo.png') top left no-repeat; width:220px; height:50px; text-indent: -9999em;} /* footer columns */ #footer .contact-details {} #footer p, #footer li, #footer h3, #footer li a, #footer a {color:#0093D0;} #footer li, #footer ul {list-style-type: none;} /* ===================== */ /* = Image Attribution = */ /* ===================== */ div.image-wrapper {overflow: hidden; float: left;} span.image-description {float:left; clear:left} /* AddThis ---------------------------------------- */ .addthis_toolbox {margin-top:2em; clear:left;} /* =========== */ /* = Shadows = */ /* =========== */ div#container-footer {background:url('../img/container-bottom.png') center bottom no-repeat; position:absolute; width:100%; bottom:-13px; left:0; height:13px;} div#container-top {background:url('../img/shadow-top.png') center top no-repeat;position:absolute; width:100%; top:-5px; left:0; height:10px;} /* ================ */ /* = Text Shadows = */ /* ================ */ .B_crumbBox a {text-shadow: 0 1px 1px #efefef} /* ================= */ /* = CiviCRM Fixes = */ /* ================= */ form table td, form table th {border: 0; padding: 0 0 5px 0;} label span.marker {color: #FF4D41; font-size: 2em; font-weight: bold; position: absolute;top: 0; right: 0;} td.label label, td.option-label label {position: relative; display: block; padding-right: 10px;} td.label, td.option-label {text-align: right; vertical-align: top;} #amount_other {margin-left: 3px;} input.form-checkbox {margin-right: 5px;} span.description {color: #999; font-style: oblique;} #Main fieldset {border: 0; border: 1px dashed #999;} #selector {margin-bottom: 0;} form table {margin-bottom: 0;} fieldset legend {color: #000;} /*ul#civicrm-menu {position:fixed;z-index: 100; top:0; left:0; right:0;}*/ /*div#menu-container {display: block !important;}*/ ul#civicrm-menu li {list-style: none;}