html{
	margin:0;
	body:0;
}

body{
	font-size:62.5%;
	font-family:arial,helvetica,verdana,sans-serif;
	background:#fffed4;
	color:#333;
	margin:0;
	padding:0;
}

#wrapper{
	font-size:1.4em;
	width:55em;
	margin:0 auto;
	position:relative;
	z-index:10;
}

/*Rounded corners*/
	.content0{
		background:#fff url('images/watermark.jpg') no-repeat bottom center;
		clear:both;
		position:relative;
		top:-15px;
		z-index:10;
	}

	.content1{
		background:url('images/bg_body_l.gif') repeat-y top left;
	}
	
	.content2{
		background:url('images/bg_body_r.gif') repeat-y top right;		
	}
	
	.content3{
		background:url('images/bg_body_b.gif') repeat-x bottom;
	}
	
	.content4{
		background:url('images/bg_body_bl.gif') no-repeat bottom left;
	}

	.content5{
		background:url('images/bg_body_br.gif') no-repeat bottom right;
	}
	
	.content6{
		background:url('images/bg_body_t.gif') repeat-x top;
		padding:8em 2.2em 2em;
	}
	
	.content7{
		background:url('images/bg_body_tr.gif') no-repeat top right;
		position:absolute;
		z-index:90;
		top:0;
		right:0;
		height:32px;
		width:32px;
	}

	/*Peekaboo bug fix*/
		.content0, .content1, .content2, .content3, .content4, .content5, .content6{
			height:1px;
		}
		
		html>body .content0, html>body .content1, html>body .content2, html>body .content3, 
		html>body .content4, html>body .content5, html>body .content6{
			height:auto;
		}


/*Various bits*/
	h2{
		color:#00428D;
		font-weight:normal;
		font-size:1.4em;
		margin-bottom:0.2em;
	}
	
	h3{
		margin:1em 0 0;
		font-size:1em;
		font-weight:bold;
	}
	
	img{
		border:none;
	}
	
	p{
		margin:0 0 1em;
		padding:0;
	}
	
	.clearer{
		clear:both;
		height:1px;
		font-size:1%;
		width:100%;
	}
	
	.center{
		text-align:center;
	}
	
	.right{
		text-align:right;
	}
	
	#logo{
		position:absolute;
		top:-65px;
		left:0;
		z-index:60;
	}
	
	#header{
		padding-right:15px;
		padding-top:1px;
		margin-left:17.55em;
		position:relative;
		z-index:40;
	}

/*Fix for IE funny spacing bug*/	
	* html #header {
		position:relative;
		border-bottom:1px solid #fffed4;
	}
	
	ul.pdfs li{
	list-style-type:none;
	background-image:url('images/pdficon_small.gif');
	background-repeat:no-repeat;
	padding-left:25px;
	padding-bottom:5px;
}

	ul.word li{
	list-style-type:none;
	background-image:url('images/icon_word.gif');
	background-repeat:no-repeat;
	padding-left:25px;
	padding-bottom:5px;
}
	
/*Links*/
	a{
		text-decoration:none;
		color:#009;
	}
	
	a:hover{
		text-decoration:underline;
		color:#00c;
	}

/*Top and bottom navigation*/
	#topnav, #footernav{
		list-style-type:none;
		padding:0;
		margin:0;
		color:#999;
		float:right;
	}
	
	#topnav li, #footernav li{
		display:inline;
		padding:0 0 0 1em;
		margin:0;
	}
	
	#topnav a, #footernav a{
		color:#666
	}
	
	#topnav a:hover, #footernav a:hover{
		color:#888;
	}
	
	#footernav{
		font-size:0.9em;
		position:relative;
		margin:-10px 15px 2em 0;
	}
	
	body.about-us li.about-us a, body.our-services li.our-services a,
	body.volunteers li.volunteers a, body.useful_links li.useful-links a,
	body.jobs li.jobs a, body.contact-us li.contact-us a,
	body.staff-and-trustees li.staff-and-trustees a{
		color:#888;
		text-decoration:underline
	}

/*Searchform*/
	#searchform{
		float:right;
		clear:right;
		padding:0.6em 0
	}
	
	#searchform input{
		font-family:arial;
	}
	
	/*IE fix*/
	* html #searchform{
		padding-bottom:0;
	}
	
/*Top nav - tabs*/
	#tabs{
		margin:0;
		padding:0;
		list-style-type:none;
		float:right;
		clear:both;
		width:100%;
		position:relative;
		z-index:20;
	}
	
	#tabs li{
		margin:0 0.1em;
		padding:0;
		float:left;
		background:url('images/bg_tab_off_l.gif') no-repeat top left;
	}
	
	/*Remove the border on the tabs on pages where a tab is "on"*/
	body.home #tabs li, body.community-centre #tabs li,
	body.hostel #tabs li, body.housing-support #tabs li,
	body.play-and-youth #tabs li{
		border-bottom:none;
	}
	
	#tabs li a{
		display:block;
		font-size:1.2em;
		background:url('images/bg_tab_off_r.gif') no-repeat top right;
		padding:3px 6px 2px;
		color:#00428D;
	}
	
	#tabs li:hover{
		position:relative;
		margin-top:-1px;
		padding-bottom:1px;
	}
	
	#tabs li a:hover{
		color:#00428D;
	}
	
	body.home #tabs li.home, body.community-centre #tabs li.community-centre, 
	body.hostel #tabs li.hostel, body.housing-support #tabs li.housing-support,
	body.play-and-youth #tabs li.play-and-youth{
		background-image:url('images/bg_tab_on_l.gif');
	}
	
	body.home #tabs li.home a, body.community-centre #tabs li.community-centre a, 
	body.hostel #tabs li.hostel a, body.housing-support #tabs li.housing-support a,
	body.play-and-youth #tabs li.play-and-youth a{
		background-image:url('images/bg_tab_on_r.gif');
		color:#fff;
		padding-bottom:3px;
	}
	
/*2 col*/
	#cols{
		clear:both;
		height:1%;
	}
	
	html>body #cols{
		border:none;
		height:auto;
	}
	
	#leftcol{
		width:14.1em;
		float:left;
	}
	
	#rightcol{
		width:34.9em;
		float:right;
		height:350px;
	}
	
	html>body #rightcol{
		height:auto;
		min-height:350px;
	}
	
/*Boxes, with PNG transparency hack*/
	.box{
		border:1px solid #dcdcdc;
		padding:0.5em 0.5em 0;
		margin-bottom:1em;
		
	/* Mozilla ignores crazy MS image filters, so it will skip the following */
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/bg_whitebox.png');
	}
	
	/* IE ignores styles with [attributes], so it will skip the following. */
	.box[class] {
		background:url('images/bg_whitebox.png');
	}
	
	#wrapper .news, #wrapper .quote{
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/bg_yellowbox.png');
		background-color:#fff3f0;
	}

	.news{
		margin-top:1em;
	}
	
	.news[class], .quote[class]{
		background:url('images/bg_yellowbox.png');
	}
	
	.box h2{
		margin-top:0;
	}
	
	.feature, .quicklinks{
		width:15.8em;
	}
	
	.feature{
		float:left;
	}
	
	.quicklinks{
		float:right;
	}
	
	.quicklinks ul, .feature ul{
		padding-left:1.5em;
		margin:0 0 1em;
	}
	
	/*IE Links not working fix*/
	.quicklinks *{
		position:relative;
		z-index:20;
	}
	
/*Blue box*/
	.bluebox-tl{
		background:#C8D6E6 url('images/bg_bluebox_tl.gif') no-repeat top left;
		color:#00428D;
	}
	
	.bluebox-tr{
		background:url('images/bg_bluebox_tr.gif') no-repeat top right;
	}
	
	.bluebox-bl{
		background:url('images/bg_bluebox_bl.gif') no-repeat bottom left;
	}
	
	.bluebox-br{
		background:url('images/bg_bluebox_br.gif') no-repeat bottom right;
	}
	
	.bluebox-tl p{
		padding:0.5em 0.5em;
		margin:0;
	}
	
	.bluebox-tl{
		height:1px;
	}
	
	html>body .bluebox-tl{
		height:auto;
	}
	
/*Images on home page*/
	#images{
		background:url('images/people.jpg') repeat-x top left;
		height:73px;
		position:absolute;
		width:100%;
		top:15px;
		right:15px;
		width:36.2em;
		z-index:70;
	}
	
/* CONTENT PAGE STYLES*/
	h1{
		font-size:1.7em;
		margin-top:0;
		padding-top:0;
		color:#555;
	}

	#subnav{
		background:#00428D url('images/bg_subnav.gif') repeat-x bottom left;
		position:absolute;
		width:100%;
		top:15px;
		right:15px;
		width:36.2em;
		z-index:70;
		color:#fff;
		text-align:center;
		line-height:1.4;
	}
	
	#subnav ul{
		list-style-type:none;
		margin:0.6em 0 1.5em 0.2em;
		padding:0;
	}
	
	#subnav ul li{
		display:inline;
	}
	
	#subnav ul li a{
		color:#fff;
		margin:0.5em;
	}
	
	#leftcol blockquote{
		margin:0;
		padding:28px 0 0;
		font-style:italic;
		background:url('images/openquote.gif') no-repeat top left;
	}
	
	div#leftcol div.quote blockquote p{
		margin:0 0 0 0.6em;
		padding:0 0 25px;
		background:url('images/closequote.gif') no-repeat bottom right;
		text-indent:0;
	}
	
	div#leftcol div.quote p{
		text-indent:3em;
		margin-top:4px;
	}
	
	div#leftcol div.quote p cite{
		font-style:normal;
	}

/*Images + popup images*/
	#rightcol a img{
		border:1px solid #888;
		padding:2px;
		margin:0 25px 10px 0;
	}
	
	#rightcol a:hover img{
		border-color:#555;
	}
	
	.img-right{
		float:right;
		padding:0 0 5px 5px;
	}
	
/*Youth blog*/
	body.youthblog #header{
		text-align:right;
	}
	
	#subnav2{
		position:absolute;
		width:100%;
		top:15px;
		right:15px;
		width:36.2em;
		z-index:70;
		text-align:right;
		line-height:1.4;
	}
	
	#subnav2 ul{
		list-style-type:none;
		margin:0.6em 0 1.5em 0.2em;
		padding:0;
	}
	
	#subnav2 ul li{
		display:inline;
	}
	
	#subnav2 ul li a{
		margin:0.5em;
	}
	
	body.youthblog .content6{
		padding-top:4em;
	}
	
	body.youthblog #header{
		border-bottom:none;
	}
	
	#rightcol .quicklinks a img{
		border:none;
	}
	
/*Investors in people*/
	#IIP{
		position:absolute;
		bottom:25px;
		left:5.2em;
	}
	
	body.home #leftcol{
		text-align:center;
	}
	
	body.home #leftcol div{
		text-align:left;
	}
	
.whatson{
font-size:0.9em;
}

.whatson h2{
line-height:1;
}

.whatson span{
font-size:0.9em;
}