/**
 * ExtraCare Screen Style Sheet
 *
 * @author: Stuart Davis (stuart@hcl.uk.com)
 * @date: March 06
 */

/* -----------------------------------*/
/* ---------->>> INITIAL <<<----------*/
/* -----------------------------------*/

/* Neutralize styling: 
   Elements we want to clean out entirely: */
html, body, form, fieldset {
	margin: 0px;
	padding: 0px;
	font: 105%/125% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling: 
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ol, dl, li, address {
	margin: 1em 0;
	padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
dd, blockquote {
	margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
	cursor: pointer;
}
fieldset {
	border: none;
}

/* Form field text-scaling 
input, select, textarea {
	font-size: 100%;
}*/

/* -----------------------------------*/
/* --------->>> THE REST <<<----------*/
/* -----------------------------------*/

/* -------------- general elements --------------- */

body { 
	background: #fff url(_images/background.jpg) repeat-x;
}

/* ------------ positional elements ------------- */

#sitewrapper {
	margin: 0px;
	padding: 0px;
	width: 950px;
}

#Header {
	margin: 0px;
	padding: 0px;
	height: 105px;
	width: 950px;
}

	#HeaderLogo {
		float: left;
		width: 250px;
	}
	
	#HeaderMenu {
	float: right;
	width: 700px;
	padding-top: 36px;
	padding-bottom: 36px;
	z-index: 100;
	}
	
	#HeaderMenuText {
	margin: 0px;
	padding: 0px;
	height: 40px;
	width: 700px;
	line-height: 45px;
	text-align: right;
		}
		
#Page {
	margin: 0px;
	padding: 0px;
	width: 950px;
}

	#PageLeftbar {
		margin: 0px;
		padding: 20px;
		float: left;
		width: 210px;
	}
	
	#PageContent {
		margin: 10px 0px 0px;
		padding: 0px 20px 0px 0px;
		float: left;
		width: 429px;
		border-right-width: 1px;
		border-right-style: dashed;
		border-right-color: #999999;

	}
	
	#PageContentBIG {
		margin: 10px 0px 0px;
		padding: 0px;
		float: left;
		width: 700px;
	}

	
	#PageSidebox {
	margin: 10px 0px 0px;
	padding: 0px 0px 0px 20px;
	float: right;
	width: 230px;
	}
	
		#PageSidebox ul {
		margin-left: 20px;
		padding: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		}
		
		#PageSidebox li {
		padding-bottom: 15px;
		}
		
/* ------------ front page ------------- */

#PageContentFRONT {
		margin: 0px;
		padding: 30px 0px 0px 20px;
		float: left;
		width: 660px;
	}
	
	
div#headerwrapper {
	margin: 0px;
	padding: 0px;
	height: 250px;
	width: 660px;
	}

	div#headerwrapperPIC {
		margin: 0px;
		padding: 0px;
		float: left;
		height: 250px;
		width: 345px;
		background-image: url(_images/frontpage-main.jpg);
		background-repeat: no-repeat;
	}
	
	div#headerwrapperBOX {
		background-color: transparent;
		padding: 0px;
		height: 250px;
		width: 315px;
		float: right;
		margin:0px;
		background-image: url(_images/frontpage-greenbg.gif);
		background-repeat: no-repeat;
	}
	
	
	
	div#headerwrapperTEXT {
		position: relative;
		left: 20px;
		top: 105px;
		margin: 0px;
		padding: 0px;
		width: 280px;
		color: #FFFFFF;
		z-index: 9;
	}
		
		div#headerwrapperTEXT p {
		margin: 0px;
		padding: 0px;
		}
			
	
div#findoutmore {
	margin: 0px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
	
	div#findoutmore h2 {
	font-size: 1.2em;
	font-weight: bold;
	color: #501EAF;
	padding: 0px 0px 5px;
	margin: 0px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
		}
	
	.villagebox {
	margin: 0px;
	padding: 0px;
	width: 660px;
	/*
		height: 195px;
		*/
		overflow:visible;
	background-color: #F1F1F1;
	/* from villageboxLEFT */
			padding-bottom: 10px;
	padding-top: 10px;
	}
	
		.villagebox p {
			padding: 0px;
			margin: 0px 0px 0px 95px;
			}
			
		.villagebox img {float:left;}
		
		.villageboxLEFT {
			/*
			float: left;
			width: 310px; 
			*/
		}
			
				#villagebirmingham {
				display:block;
				float:left;
				position: relative;
				left: 0px;
				top: 0px;
				margin: 0px 0px 8px 8px;
				padding: 0px;
				width: 313px;
				height: 48px;
				z-index: 9;
				}
				
				/* ?
				#villagesheffield {
				position: relative;
				left: 0px;
				top: 0px;
				margin: 0px 0px 10px;
				padding: 0px;
				width: 300px;
				height: 50px;
				z-index: 9;
				}
				
				#villagemiltonkeynes {
				position: relative;
				left: 0px;
				top: 0px;
				margin: 0px 0px 10px;
				padding: 0px;
				width: 300px;
				height: 50px;
				z-index: 9;
				}
		
		.villageboxRIGHT {
			padding: 10px;
			float: right;
			width: 310px;}
		
				#villagenottingham {
				position: relative;
				left: 0px;
				top: 0px;
				margin: 0px 0px 10px;
				padding: 0px;
				width: 300px;
				height: 50px;
				z-index: 9;
				}
				
				#villagehereford {
				position: relative;
				left: 0px;
				top: 0px;
				margin: 0px 0px 10px;
				padding: 0px;
				width: 300px;
				height: 50px;
				z-index: 9;
				}
				
				#villagenorthampton {
				position: relative;
				left: 0px;
				top: 0px;
				margin: 0px 0px 10px;
				padding: 0px;
				width: 300px;
				height: 50px;
				z-index: 9;
				}
				 ? */
	
.newsbox {
	padding: 10px;
	width: 210px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	background-color: #ffe8ab;
}

	.newsbox p {
		padding: 0px;
		margin: 0px;
	}

.extralifebox {
	padding: 10px;
	width: 210px;
	margin: 0px;
	background-color: #deefc4;
}

	.extralifebox p {
		padding: 0px;
		margin: 0px 0px 0px 85px;
	}

	.extralifebox img {
	float: left;

	}

p.charity {
	font-size: 0.6em;
	color: #666666;
	margin: 0px;
	line-height: 1.2em;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#emailthanks {
	background-color: #ffe8ab;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #ffbb04;
	border-bottom-color: #ffbb04;
	margin: 10px;
	padding: 10px;
}


/* ------------ typographical elements ------------- */

/* general headline setup */
h1, h2, h3, h4, h5 {
    color: #FFF;
    background-color: transparent;
    font-family: Trebuchet MS, Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-weight: normal;
}

/* special headlines */
h1 {font-size: 24px; margin-left: 0px; font-weight: bold;}
h1.banner {
	font-size: 1.8em;
	font-weight: bold;
	padding: 16px 0px 5px;
	color: #501EAF;
	text-align: right;
	margin: 0px;
	line-height: 1em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
}

h1.bannerred {color: #FE5B00; text-align: right;}

h2 {
	font-size: 1.6em;
	color: #FE5B00;
	font-weight: bold;
	line-height: 1.1em;
}

h3 {
	background-repeat: repeat-x;
	font-size: 1.2em;
	font-weight: bold;
	color: #FFFFFF;
	padding: 5px;
	width: 218px;
}

h3.red {background-color: #FE5B00;}
h3.amber {background-color: #FFBB04;}
h3.green {background-color: #7DCC00;}
h3.purple {background-color: #501EAF;}
h3.blue {background-color: #18B6DD;}
h3.grey {background-color: #999999; font-size: 1.1em;}


h4 {font-size: 14px; margin-left: 40px; border-bottom: none; font-weight: bold;}
h5 {font-size: 12px; margin-left: 60px; border-bottom: none; font-weight: bold;}

.clicktocontent {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	line-height: 35px;
	font-weight: bold;
	color: #000000;
	margin-right: 20px;
}

.textsize {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #000000;
	font-weight:bold;
}

.bodyquote {
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 10px;
	margin-right: 0;
	border-left: #B34B3B;
	border-width: 0 0 0 1px;
	border-style: none none none solid;
}

span.purple {color: #501EAF;}

p.indent {padding-left: 20px;}

/* ------------ images ------------- */

img.leftboxed {
	border: 1px solid #333333;
	padding: 8px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
}

img.rightboxed {
	border: 1px solid #333333;
	padding: 8px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	float:right;
}

img.greyborder {
	background-color: #F9F9F9;
	margin: 0px;
	padding: 10px;
	text-align: center;
}

img.greyborderRIGHT {
	background-color: #F9F9F9;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding: 10px;
	text-align: center;
	float: right;
}

img.lhs {
	padding-top: 20px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #7dcc00;
}

/* ------------ tables ------------- */

table {
	border: 1px solid #999999;
	border-collapse: collapse;
	margin-bottom: 20px;
}

td {
	padding: 6px;
	border: 1px solid #999999;
	margin: 0px;
}

tr {
	text-align: center;
}

tr.darkgreen {
	background-color: #BEDABA;
}

tr.lightgreen {
	background-color: #d2e6cf;
}

tr.darkpurple {
	background-color: #F0C0C0;
}

tr.lightpurple {
	background-color: #f5d5d5;
}

tr.darkyellow {
	background-color: #ffcc44;
}

tr.lightyellow {
	background-color: #fdda7e;
}

tr.darkgreen {
	background-color: #BEDABA;
}


td.lightgreen {
	background-color: #d2e6cf;
}

td.darkpurple {
	background-color: #F0C0C0;
}

td.lightpurple {
	background-color: #f5d5d5;
}

td.darkyellow {
	background-color: #ffcc44;
}

td.lightyellow {
	background-color: #fdda7e;
}


/* ------------ link styling ------------- */

a:link, a:active, a:visited{
	color: #000;
	text-decoration: underline;
}

a:hover{
	color: #242424;
	text-decoration: none;
}

/* ------------ hacks ------------- */

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
.clearfix {
    display:block;
}
* html .clearfix {
    height:1px;
}

/* sizer javascript - hide from incapable browsers */
#sizer { display:none }


/* ------------ traditions boxes ------------- */

.traditions {
	background-color: #F1F1F1;
	width: 95%;
	padding: 10px;
	margin-bottom: 15px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

	.traditions h2, .traditions p {
	padding: 0px;
	margin: 0px 0px 10px;
	}

.traditions img.left {
	padding: 5px;
	float: left;
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 0px;
	background-color: #FFFFFF;
}

.traditions img.right {
	padding: 5px;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 15px;
	background-color: #FFFFFF;
}

/* ------------ appeals boxes ------------- */

.appeals {
	background-color: #F1F1F1;
	width: 96%;
	padding: 10px;
	margin-bottom: 10px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

.appeals img {
	padding: 5px;
	float: left;
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 10px;
	margin-left: 0px;
	background-color: #FFFFFF;
}

	.appeals p {
	margin-left: 275px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
}
	
	.appeals h2 {
	padding: 0px;
	margin: 0px 0px 10px;
	}

/* ------------ village info boxes ------------- */

#villagetitle {
	background-repeat: repeat-x;
	font-size: 1.2em;
	font-weight: bold;
	color: #FFFFFF;
	padding: 0px;
	width: 409px;
	background-color: #009900;
	margin:20px 0px 0px;
	padding: 10px;
	}
	
#villagepic {
	margin: 0px;
	padding: 0px;
	height: 175px;
	width: 429px;
}

#villagetext {
	padding: 10px;
	width: 409px;
	background-color: #dfeecb;
	margin:0px;
	}

div#applicationbox {
	background-color: #F1F1F1;
	margin: 15px 0px 10px;
	padding: 10px;
	width: 190px;
}

		div#applicationbox p {
		padding: 0px;
		margin:0px;
		}
		
		div#applicationbox ul {
		margin-left: 20px;
		padding: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		}
		
		div#applicationbox li {
		padding-bottom: 10px;
		margin: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-left: 0px;
		}

img#village {
	margin: 0px;
	padding: 0px;
}

/* ------------ news ------------- */

.newsitem {
	background-color: #F1F1F1;
	width: 409px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 0px;
	padding: 10px;
}

span.title {
	font-weight: bold;
	color: #FE5B00;
}

span.date {
	color: #999999;
}

img.newsimage {
	background-color: #F9F9F9;
	margin: 0px 0px 10px 10px;
	padding: 10px;
	float: right;
}

/* ------------ links ------------- */

a:link, a:active{
	color: #000000;
	text-decoration: underline;
	font-weight: normal;
}

a:visited{
	color: #666666;
	text-decoration: underline;
	font-weight: normal;
}

a:hover{
	color: #501eaf;
	text-decoration: none;
	font-weight: normal;
}