/** Layout --------------------------**/
.clear {clear:both;}
body {background-color: #cbcbcb;} /*ideal is #cecece but this will provide better contrast for the header in an images off/css on scenario */
#wrapper {
	width: 799px;
	position: relative;
	left: 50%;top: 0;
	margin-left: -400px;
	background: transparent url("../images/wrapper-bg.gif") top left no-repeat;
	padding: 0;
	}
	
	
#masthead {
	height: 150px;
	position: relative;
	background: transparent url(../images/blueband.jpg) 150px 15px no-repeat;

	}	
#main {background: transparent url(../images/main-bg.gif) top left repeat-y;}
#navigation {width: 160px; float: left;}
#content {float: right;width: 620px;}
#main-content {float: left; width: 400px;}
#side-content {float:right; width: 170px; margin-right: 28px; padding-top:0;}
#footer {
	clear: both;
	padding:40px 0 20px; 
	background:transparent url(../images/footer-bg.jpg) bottom left no-repeat;
	text-align: center;
	}

#logo {
	width: 126px; height: 20px; 
	position: absolute; top: 0; left: 10px;
	background: transparent url(../images/rspca-logo.gif) 50% 30px no-repeat; 
	padding: 110px 0 0 20px; 
	text-align:left;}
#logo a {text-indent: -9999px; display: block; position: absolute; top:20px; left:0; width:150px; height: 90px; }	
#branch-name {position:absolute; left: 205px; top: 60px;}	
#cruelty-line {position: absolute; left: 630px; top: 40px;}
#navigation ul {margin-left: 24px; margin-top:55px;}	
/** Exceptions ----------------------------**/
#events #content h2.side {display:none;}

/** Navigation ----------------------------**/

#navigation {font-size: 1.2em; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
#navigation li {margin: 0.75em 0; border-left: 7px solid #2452A0;}
#navigation a {padding: 3px;}
#navigation a:link {color:#555;}
#navigation a:visited {color:#666;}
#navigation a:hover {color: #000;}
#navigation a:focus {outline:0; color: #000; background-color:#ccc;}
#navigation a:active {outline:0; color: #000; background-color:#ccc;} 
#home li#navhome a, #about li#navabout a,events li#navevents a, #fundraising li#navfundraising a, #volunteering li#navvolunteering a, #rehoming li#navrehoming a, #contact li#navcontact a, #links li#navlinks a, #cattery li#navcattery a
{color:#000;}
#home li#navhome, #about li#navabout,#events li#navevents, #fundraising li#navfundraising, #volunteering li#navvolunteering, #rehoming li#navrehoming, #contact li#navcontact, #links li#navlinks, #cattery li#navcattery
{ border-color:#bbb;}

/** Typography ----------------------------**/
#masthead #branch-name, #masthead #cruelty-line {color: #fff;}
#branch-name {font-size: 20px;}
#cruelty-line {font-size: 1.5em; text-align:center; line-height:1.5em;}
#footer p {line-height: 1.5em;}
#side-content dd {margin:0;}
#side-content .side {font-size: 1.6em; margin: 1em 0 0.5em; color:#888;}
#events dl {margin-top: 1.1em;}
dt.time {margin-top: 1.5em; margin-bottom:0; font-weight: normal; font-style:italic; border-bottom:1px solid #ccc;}
dd.event {font-size:1.1em; color:#555; font-weight:bold;}
.pics-copyright {font-size: 0.8em; color: #aaa;}  
.content dt {clear:left;}
.name {font-weight: bold; font-size: 110%;}
#rehoming #main-content dt {border-top: 1px solid #ccc;}

/** Pictures--------------------------**/

#main-content img {float: left; margin: 0 15px 10px 0;}
#main-content img.no-float {float: none;}
#main-content img.right {float:right;}
#rehoming #main-content dt img {clear: left;}
#side-content img {max-width:150px; max-height:179px;}

/* Google map area */
#map {width:400px; height:300px; position:relative; padding-bottom:25px;}