/*
CSS file for site layout. 

This file implements a two column layout:
The layout is fluid:

The leftmost column should be included after the rightmost in the html.
This is so the content appears before the navigation in a screen reader.

Implementation is as follows.

<div class="outer">
	<div class = "right">
	Some main content
	</div>
	<div class = "left">
	Some content to go in the left column. Eg
	navigation
	</div>
	<div class = "clearing"></div> //Include this to make both the left and right
	columns appear the same height.
</div>

*/

body{
	text-align: center;
	background-image:url(../images/bg-fade.gif) ;
	background-repeat:repeat-x;
	padding:1em 3em;
}

#site-container{
	width:790px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	border-left:1px solid white;
	border-right:1px solid grey;
}
#footer {
	border-bottom:1px solid grey;
}
/* alter to alter the left column background  & colour*/
.outer{
	background:url(../images/side5.jpg) repeat-y;
	background-color:white;	
}

/* setup */
.outer{
	clear:both;
	 /* _negative_ left column with */
}

.left{
	float: left;
	width: 200px;              /* left column width */
	text-align:center;
}


.right{
	width:590px;
	float: right;	
}
.clearBoth {
	clear:both;
}

.clear {clear:both;position:relative; background:url(../images/content_bottom1.jpg) 0 0; height:96px;
	margin-top:0px;z-index:10;}

.left .branding {
	margin-top:10px;
	text-align:center;
	
}

div#header {
  background: url(../images/pennines_cropped.jpg) 100% 0 no-repeat;
  background-color: #96abc0;
  color: black;
  height: 160px;
  width:100%;
  border-top:1px solid white;
  border-bottom:1px solid white;
  padding:0;
  margin:0;
}
/* note fix positioning in IE 6 */
#header img {
	position: absolute;
	
	border-right: 4px solid white;
 	/*height: 160px;*/
 	border-left:0px;
 	padding-left:0px;
 	/*margin-left:-3px;*/
}

.site_title {
	margin-top: 0.2em;
	margin-right: 10px;
	margin-bottom: 0;
 	float:right;
  color: #050;
  font:small-caps bold 1.1em/1em "Times New Roman", serif;
	width:auto;
	height: 30px;
	width:350px;
  text-align:left;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/site_title.png');

}

.site_title[class] {
	background-image: url(../images/site_title.png);
}

#header h1 span {
	position: absolute;
	left: -50em; width: 50em;
}

div#header p{
	width: 350px;
	margin-right:11px;
	margin-top:0;
	margin: 0 11px 0 0;
	color: #EED;
	font: italic 1.2em/1em Times, "Times New Roman", serif;
	text-align:right;
	float:right;
	padding: 0.2em 0em 0em 0em;
	clear:right;
}

div#header h2{
	font:bold 1.2em/1em Arial, sans-serif ;
	float:right;
	text-align:right;
	clear: right;
	margin-right: 11px;
	margin-top: 0.1em;
	padding:0em 0.2em 0.1em 0em;
	width:339px;
	color:#eed;
}

.transparent{
	background:url(../images/transparent_p.png) 100% 0 no-repeat;
}

#header a:link, #header a:visited{
	color:#ffffff;
	font:bold;
	text-decoration:none;	
}


.outer{
	background:url(../images/side-working.jpg) repeat-y;
	background-color: white;
}

/* setup */
.outer{
	clear:both;
	 /* _negative_ left column with */
}



#header a:hover{
	color:#007a00;
}

#footer {
			width:100%;
		position:relative;
		background-color:#8d8f74;	
		clear:both;
		border-top:1px solid white;
		background:url(../images/footer-background.jpg) repeat-x;
		padding:1px 0 0.1em 0;
		margin:0 0 0 0;
		min-height:2em;
		border-bottom:1px solid grey;
		text-align:right;
}

#footer .branding {
	padding-top:8px;
	padding-right:1em;
	padding-bottom:8px;
}