/*
*
*  Reading Samaritans global style css
*  Refer to comments for instructions on editing
*  Please make backups before editing
*
*/

/* START SETUP ------------------------------------------------------------------ */

/* resets for the page */
* {
	margin:0;
	padding:0;
	outline:0;
	border:0;
}

/* body tag includes a white circular background image at the top of the page */
body {
	background:#ebebeb url(images/bg1.png) scroll no-repeat center top;
	font-family: Arial,Verdana,sans-serif;
	color:#a0a0a0;
	font-size:11px;
	line-height:1.35;
}
/* END SETUP -------------------------------------------------------------------- */



/* MASTHEAD - Holds the logo ---------------------------------------------------- */

/* align the contents of the #masthead to the center - used with margin:0 auto; in the child to center content */
#masthead {
	text-align:center;
}

/* set as the site width, then aligned text left to make logo positioned correctly */
#masthead #header {
	border-bottom:1px solid #EBEBEB;
	height:86px;
	margin:0 auto;
	text-align:left;
	width:975px;
}

/* the actual logo itself is an <a> with a background image, specified here */
#masthead .topitem {
	position:relative;
	top:26px;
	display:block;
	text-indent:-9999px;
}
#masthead #logo {
	margin-left:20px;
	background: transparent url(images/logo.png) scroll no-repeat 0 0;
	height:41px;
	width:291px;
	float:left;
}
#masthead #info {
	float:right;
	margin-right:20px;
	background: transparent url(images/readingsams.png) scroll no-repeat 0 0;
	height:36px;
	width:159px;
}
/* END MASTHEAD ----------------------------------------------------------------- */



/* MAIN AREA -------------------------------------------------------------------- */

/* Container helps to position the main site area */
#container {
	margin:0 auto;
	width:975px;
}

/* Wrapper sits within the #container and helps to position the main site area */
#wrapper {
	width:975px;
}

/* Top dark grey bar of main area */
#wrapper #top {
	background:#d6d6d6 url(images/topgreybg.gif) scroll no-repeat center top;
	height:16px;
	border-bottom:1px solid #e1e1e1;
	width:975px;
}


/* #main is a container for the two columns */
#wrapper #main {
	background:#fff url(images/faux-columnbg.gif) repeat-y scroll 0 0;
	width:975px;
}

	/* START NAVIGATION SIDEBAR ------------------------------------------------- */
	
	/* This is the sidebar that contains the navigation */
	#wrapper #main #sidebar {
		position:relative;
		float:left;
		width:189px;
		padding-bottom:60px;
		z-index:200;
	}
	
	/* The green boxes which contain the navigation group titles are h2 elements, specified here */
	#wrapper #main #sidebar .navgroup h2 {
		display:block;
		padding:3px;
		padding-left:10px;
		margin-bottom:9px;
		font-size:13px;
		background-color:#66cc00;
		color:#fff;
		width:142px;
		margin-top:-10px;
		margin-left:50px;
		cursor:default;
	}
	
	/* Add padding to the top to keep them apart from each other and the top */
	#wrapper #main #sidebar ul { padding-top:30px; list-style-type:none; }
	
	/* Add a border to the bottom of each list item */
	#wrapper #main #sidebar ul li { border-bottom:1px solid #eee; }
	
	/* Add a top border to the first item in each list, must have <li class='first'> */
	#wrapper #main #sidebar ul li.first { border-top:1px solid #eee; }
	
	/* This adds padding to the pretend list items that can't be clicked, these are just headers for sub items in the list, hence the reset of the cursor */
	#wrapper #main #sidebar ul li.category {
		padding:8px 5px 5px 20px;
		cursor:default;
	}
	/* This adds the same padding as we've just added to the li.category, but use display block to make the links hover properly */
	#wrapper #main #sidebar ul li a {
		display:block;
		padding:8px 5px 5px 20px;
	}
	
	/* Adds bold font styling to <li class='important'> items, such as "National Organisation" */
	#wrapper #main #sidebar ul li.important a {	font-weight:bold; background-color:#f1f4f5;}
	
	/* List item <a> hover to turn the background grey */
	#wrapper #main #sidebar ul li a:hover { background-color:#efefef; }
	
	/* END NAVIGATION SIDEBAR --------------------------------------------------- */



	/* START CONTENT COLUMN ----------------------------------------------------- */
	
	/* This is our content area with a little shadow image right at the top */
	#wrapper #main #content {
	    display:inline;
	    float:left;
	    width: 783px;
	    background:transparent url('images/contentbg1.png') scroll no-repeat 1px top;
	    font-size:1.1em;
	    color:#737373;
	}
	
	/* Use an inner class to add in the Title Underline in the content using background images and also specify padding here */
	#wrapper #main #content .inner {
	    padding:20px 45px 35px;
	}
	
	/* Title styling */
	#wrapper #main #content .inner h1 {
	    font-size:24px;
	    text-align:right;
	    color:#66cc00;
	    margin-bottom:20px;
	    font-family:Arial,Verdana,sans-serif;
	}
	
	/* Subheadings */
	#wrapper #main #content .inner h2, h3, h4 { font-size:16px; color:#66cc00; }
	#wrapper #main #content .inner h3 { font-size:14px; }
	#wrapper #main #content .inner h4 { font-size:12px; }
	
	/* The main area within the content, basically everything underneath the title */
	#wrapper #main #content .inner .textholder {  }
	
	/*
	Just a Thought... try it and see, adds padding to all the text in the textholder as i wasn't sure about the positioning
	#wrapper #main #content .inner .textholder p,
	#wrapper #main #content .inner .textholder h2,
	#wrapper #main #content .inner .textholder h3 {
		padding-left: 10px;
		padding-right:10px;
	}*/
	
	
	/* WELCOME PAGE CSS -------------- */
	#wrapper #main #content .inner .extrapadding { padding:20px; }
	
	#wrapper #main #content #superbuttons {
	    border-bottom:1px solid #EEEEEE;
	    padding-left:5px;
	    padding-right:5px;
	    padding-bottom:10px;
	}
	
	#wrapper #main #content .superbutton { float:left; }
	#wrapper #main #content #superbuttons #want { float: right; }
	/* End WELCOME PAGE CSS ---------- */
	
	/* This is for important words that need highlighting, mainly in "Our Values" */
	#wrapper #main #content strong.important { font-weight:bold; color:#66cc00; }
	
	/* Format of all lists on the site contents */
	#wrapper #main #content ul { list-style-position:outside; padding-bottom:5px; }
	#wrapper #main #content ul li { margin-left:20px; padding:5px; }
	
	/* SIDE IMAGE -------------------- */
	
	#wrapper #main #content .sideImage {
		padding:10px;
		border:1px solid #dfdfdf;
		display:block;
		float:right;
		width:202px;
		margin-left:20px;
	}	
	
	/* BANNER STUFF ------------------ */
	
	/* This is the container for the images at the top of each page (other than index.html) supplies padding and a border */
	#wrapper #main #content .banner {
		padding:10px;
		border:1px solid #dfdfdf;
		margin-bottom:15px;
	}
	
	#wrapper #main #content .banner img {
		position:relative;
		/*height:169px;*/
		width:671px;
		background-color:#666;
		border:1px solid #eee;
		display:block;
	}
	
	#wrapper #main #content .banner #special {
		height:461px;
		border:1px solid #d9d9d9;
	}
	
	#wrapper #main #content .banner #special img {
		background:transparent;
	}
	/* End BANNER STUFF --------------- */
	
	
	/* CONTACT US PAGE CSS ------------ */
	
	/* This changes the .banner CSS by removing it's side borders for our big letters */
	#wrapper #main #content .contact {
		border-left:0;
		border-right:0;
		text-align:center;
	}
	
	/* The big letters are styled here */
	#wrapper #main #content .contact p {
		font-size:50px;
		color:#999;
	}
	/* End CONTACT US STUFF ----------- */
	
	
	/* Branch Events page CSS --------- */
	body#branch-events #wrapper #main #content strong {
		font-weight:bold;
		width:70px;
		text-align:left;
		display:inline-block;
		padding:5px;
	}
	/* End Branch Events CSS ---------- */
	
	/* END CONTENT COLUMN ------------------------------------------------------- */

/* This clear:both means that the clearfix div's parent can adjust to the size as floats within it, put this div at the same level as the floats */
#wrapper .clearfix {
	clear:both;
}

/* Bottom dark grey bar area, try and keep this the same as the top grey bar, but with all the "bottom"s turned into "top"s and vice-versa */
#wrapper #bottom {
	background:#d6d6d6 url(images/bottomgreybg.gif) scroll no-repeat center top;
	height:16px;
	border-top:1px solid #e1e1e1;
	width:975px;
}

/* END MAIN AREA ---------------------------------------------------------------- */

/* START FOOTER ----------------------------------------------------------------- */
#footer {
 	clear:both;
 	margin:0 30px 0;
}
#footer p {
	margin:0 auto;
	padding:0;
	width:960px;
	color:#8d8d8d;
	height:35px;
	font-size:10px;
	line-height:35px;
	text-align:center;
	border-top:2px solid #E1E1E1;
}
/* END FOOTER ------------------------------------------------------------------- */

/* START LINK STYLES & MISC ----------------------------------------------------- */

/*  Link Styles  */
a { color: #3c8ba8; text-decoration: underline; }
a:hover { color:#3c8ba8; text-decoration: none; }
#sidebar a { color:#a0a0a0; text-decoration:none; }
#sidebar a:hover { color:#3c8ba8; text-decoration:none; }
img { vertical-align: bottom; display: block }
a img { border: 0; }
a.inlinebuttons { float:left;padding-right:15px; }

/*
*
*  Crazy navigation stuff: Read carefully
*    For each item in your sidebar navigation that is actually a page (not an anchor or external link)
*    you should have given the <li> a class. Format eg: "Our Values" -> "our-values"
*    should be lowercase and hyphenated.
*   
*    As well as this, you should give each page you make <body> with the id of your
*    page in exactly the same format as above.
*
*    In this bit of css below, you have a line for each possible page:
*	 eg.   body#our-values #sidebar ul li#our-values a
*
*    All these CSS lines must be separated by commas
*    The break down of these lines is basically: Make the <a> belonging to the <li> with the same ID as <body> different (active)
*
*/
body#welcome #sidebar ul li#welcome a,
body#our-values #sidebar ul li#our-values a,
body#community #sidebar ul li#community a,
body#branch-statistics #sidebar ul li#branch-statistics a,
body#branch-history #sidebar ul li#branch-history a,
body#branch-events #sidebar ul li#branch-events a,
body#find-us #sidebar ul li#find-us a,
body#contact-us #sidebar ul li#contact-us a,
body#volunteering #sidebar ul li#volunteering a,
body#donating #sidebar ul li#donating a,
body#links #sidebar ul li#links a {
	background:transparent url(images/activearrow.png) no-repeat scroll 183px center;
	font-weight:bold;
	position:relative;
	width:165px;
	z-index:56;
}
/* END LINK STYLES & MISC ------------------------------------------------------- */