/*
   style.css
   RSPCA Australia
   
   Created by Callum Wilson on 2010-08-31.
   Copyright 2010 Oxygen Kiosk. All rights reserved.
*/

/* Resets
---------------------------------------- */
* {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;}
#content{position:relative; top:-6px; z-index:100; }
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#menu-home a {border-left: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 {display: block; background:url('../img/menu-active-arrow.png') bottom center no-repeat; 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; cursor:pointer;}

			/* The Menu Text */
			ul#menu li#menu-1 a span {background-position: 9px 0; width:74px;}
			ul#menu li#menu-3 a span {background-position: -224px 0; width:205px;}
			ul#menu li#menu-2 a span {background-position: -70px 0; width:149px;}
			ul#menu li#menu-23 a span {background-position: -435px 0; width:77px;}
			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;}

/* 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; padding:5px 0;}
		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;}

/* Page Styles
---------------------------------------- */
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;}
			/* Blog */
			.hentry {overflow: hidden}
				.hentry h3 {margin-bottom:0;}
				.hentry p.news-item-meta {margin-top:0; font-size: 0.833333em;line-height: 1.8em;}

/* Home 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: 0; 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;}

/* Sidebar
---------------------------------------- */
#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;}
	
/* Special Stuff
---------------------------------------- */
/* 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
---------------------------------------- */
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;}

/* Contain Floats
---------------------------------------- */
#foo:after { /* For modern browsers */
  content    : ".";
  display    : block;
  height     : 0;
  clear      : both;
  visibility : hidden;
}

#foo { display : inline-block; } /* For IE6/7 */
#foo { display : block; } /* For IE6/7 */