*{
	margin: 0;
	padding: 0;
}
div{
	/*border: solid 1px green;*/
}
body{
	font-size: 62.5%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background-color: #ffffff;
	background: url(img-styles/info-bg.gif) repeat-y right -6.8em;/*coloured strip down right hand side*/
}

img{
	border: none;
}

/*=== POSITIONING AND COLOUR OF MAIN DIVS ===*/

#wrapper{
	background: url(img-styles/navbar_bg.gif) repeat-y left;	/*provides left bar colour*/
																	/*ie6 and ie7 require 1px narrower*/
	height: 1%;
}

#head{
	position: relative;
	width: 100%;
	background-color: #004990;
	color: #ffffff;
	/*height: 127px;*/	/*was set to match logo image height, but when
								increasing font-size, hides content*/									
}

#main{
	clear: both;
	float: left;
	width: 100%;
	margin-right: -166px;		/*create space for floated right bar*/
}

#navbar
{
	float: left;
	width: 15em;
	background-color: #cdd1e6;
	color: #004990;
	padding-bottom: 4em;	/*large space at bottom of navbar forces footer to bottom
								of viewport on short pages - ie7 and ie6 need different values*/
}

#content{
	position: relative;
	z-index: 5;				/*change from 5 to 7 to bring content on top at 600x480 BUT
								hides photo top right on home page*/
	/*background-color: #ffffff;	*/  /*does not work in ie6 re footer in constituency.htm*/
	min-width: 50%;
	background-color: #ffffff;
	color: #000000; 
	margin-left: 15em;
	margin-right: 166px;
	margin-top: -3.4em;
	margin-top: -22px;
	padding: 1em 1% 2em 2%;
	height: 1%;			/*fixes several issues in ie7 (content shifts to left when
								buttons in navbar hovered over or clicked; discrepancy
								in margins.  Fixes margin and float problems in ie6*/
	/*border: solid 1px green;*/
}

#info{
	position: relative;
	z-index: 6;
	float:left;
	/*top: -66px;				roughly half of header height - which is fixed
									too high for IE7, too low for IE6*/
	top: -6.6em;				/*works well for all browsers*/
	margin-bottom: -6.6em;	/*compensates for negative top position*/ /*reduced from 6.8*/
	width: 166px;
	background-color: #f37121;
	color: #ffffff;
}


#foot{
	position:relative;				/*required for footnote positioning*/
	clear: both;						/*in IE6 not clearing properly*/
	background-color: #004990;
	color: #cdd1e6;
	min-height: 3em;
	height: 1%;				/*does this line help with position of foot in ie6? 
									Yes but only if also set for wrapper*/
	padding-top: .5em;
	padding-bottom: .2em;
	border-right: #f37121 solid 166px;	/*wide border matches info col width*/
	
}

/*=== HEADING ===*/
#logo{
	float: left;
	width: 15em;
	background-color: #004990;
	margin-right: -4em;
	
}

#head h1 {
	position: relative;
	margin-left: 111px;
	font-size: 4.5em;
	padding-bottom: .2em;
	z-index: 2;		/*required by IE to bring text in front of logo*/
}

#head p{
	padding-left: 1%;
	padding-top: .2em;
	padding-bottom: .3em;
	font-size: 2em;				/*font-size twice base*/
	margin-left: 7.5em;			/*relative margin therefore half other margins*/
	margin-right: 166px;			/*content clears right bar*/
	color: #004990;
	background-color: #cdd1e6;
}
/*== link to accessibility page ==*/
#accessibility{
	position: absolute;
	top: .2em;
	right: -160px;
	background-color: #004990 !important;
	color: #ffffff;
	z-index: 20;
}
#accessibility a{
	color: #ffffff;
}
#accessibility span{
	font-size: 85%;
}

/*=== NAVBAR ===*/

#navbar ul{
	margin-top: 1em;
	padding: .5em 2% .5em 4%;
	list-style-type: none;
	width: 90%;			/*solves one issue in FF and IE7 and another in IE6*/
}
#navbar li{
	background-image: url(img-styles/button.gif);
	background-repeat: no-repeat;
	padding-left: .3em;
	padding-top: .2em;
	background-position: -.2em -.2em;
}
#navbar a{
	
	font-size: 1.2em;
	display: block;		/*maximise target click area of link*/
	height: 1%;				/*fixes ie6 issue*/
	font-weight: bold;
	text-decoration: none;
	padding-bottom: .3em;
	padding-left: .3em;
	padding-top: .3em;
	padding-right: .2em;
	border-right: 2px solid #858795;
	border-bottom: 2px solid #858795;
}
#navbar a.navbar{
	border: none;
	font-size: 1em;
	display: inline;
}

#navbar a:link{
	background-color: #cdd1e6;
	color: #004990;
	padding-right: .2em;
	border-right: 2px solid #858795;
	border-bottom: 2px solid #858795;
}

#navbar a:visited{
	color: #004990;
	background-color: #cdd1e6;
}

#navbar a:hover, #navbar a:active, #navbar a:focus{
	background-color: #004990;		/*bg color on hover in IE7 when content
											has two columns, causes a jump to left
											putting height: 1% on content fixes*/
	color: #ffffff;
}

#nav_hospital{
	margin-top: 2em;
}
#navbar h3{
	font-size: 1.6em;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: .5em;
	padding-bottom: .2em;
	text-align: center;
}
/*=== END NAVBAR ===*/

#content h2{
	position: relative;
	color: #004990;
	background-color: #ffffff;
	font-size: 2em;
}
#content h2 span{
	font-size: 80%;
	margin-left: 2%;
	display: block;	/*when text in span wraps, forces left margin to be applied
								to wrapped line*/
}

#content div{
	float: left;
	width: 30em;			/*in FF base font size 30em = 300px, not in ie7*/
	margin-left: 2%;		/*too wide for ie6 */
	margin-right: 2%;		/*     ditto      */
	background-color: #ffffff;
	color: #000000;
}
#content div p, #content div h3, #content div h4{
	margin-left: 0;
	margin-right: 0;
}
#content p, #content blockquote{
	font-size: 1.1em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 2%;	
	margin-right: 2%;
	line-height: 1.5;
	text-align: justify;
}
#content h3, #content h4{
	margin-left: 2%;	
	margin-right: 2%;	
	margin-top: .5em;
	margin-bottom: .2em;
	color: #004990;
	font-size: 1.4em;
}

#content h4{
	font-size: 1.2em;
}
#content img.right{
	display: block;
	float:right;
	margin-left: 1em;
}

#content img.left{
	display: block;
	float: left;
	margin-right: 1em;
}

#content ul, #content ol{
	margin-left: 6%;	
	font-size: 1.1em;
}

#content ul.linklist{
	margin-right: 0;
	list-style-type: none;
	font-size: 1.1em;
	margin-bottom: 1em;
}

#content blockquote{
	margin-left: 5%;
	margin-right: 5%;
	font-style: italic;		/*in ie6 makes div too wide, forces info bar to wrap to bottom*/
}

#content p.quote, #content div.quote{
	background-color: #faebd7;
	color: #000000;
	padding-left: 2%;
	padding-right: 2%;
}

#content p.indent{
	padding-left: 2%;
	padding-right: 2%;
}

#content p.caption{
	font-style: italic;
	text-align: center;
}
#info h3, #info h4{
	font-size: 1.6em;
	padding-left: 5%;		/*too wide for ie6*/
	padding-right: 5%;	/*     ditto      */
	padding-top: .2em;
	padding-bottom: .1em;
	text-align: center;
	/*border-top: solid 1px #ffffff;
	border-bottom: solid 1px #ffffff;*/
}
#info h3{
	margin-top: 1.5em;
}
#info h4{
	font-size: 1.4em;
	text-align: left;
}
#info p, #navbar p{
	font-size: 1.1em;
	width: 90%;					/*without width:90% info bar too wide for IE6*/
	padding-left: 5%;
	padding-right: 5%;
	margin-top: .8em;
	margin-bottom: .8em;
}
#info p.slogan{			/*"working for you" - top right*/
	font-weight: bold;
	text-align: center;
	font-size: 1.6em;
	padding-bottom: .7em;
	padding-top: .2em;
	margin: 0;
	margin-bottom: 1em;
	border-bottom: solid 1px white;
}
#info a:link, #info a:visited, #info a:hover, #info a:active{
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}




#foot p{
	margin-left: .5%;
}
#foot p span{
	margin-right: 1%;
}

#foot #footnote{
	width: 14em;
	position: absolute;
	bottom: 4.5em;
	left: .5em;
	color: #004990;
}
#foot a{
	color: #cdd1e6;
	text-decoration: none;
	font-weight:bold;
}
#foot a:active, #foot a:focus{
	color: #004990;
	background: #cdd1e6;
}
#foot #footnote p{
	margin-top: .7em;
	margin-bottom: .7em;
	font-size: .8em;			/*too small for ie7*/
	text-align: left;
}
#foot #footnote p.designer{
	margin-top: 2em;
}
#foot #footnote p.designer a{
	font-weight: bold;
	text-decoration: none;
	color: #004990;
}
/*=== ELEMENT STYLES ===*/

/*=== SPECIAL STYLES ===*/




/*=== PICTURE GALLERY - OUT AND ABOUT ===*/
#content #gallery{
	width: 100%;
	margin: 0;
	padding: 0;
}
#gallery div{
	float: left;
	margin: 0;
	margin-left: 2%;
	margin-right: 2%;
	min-height: 350px;		/*ignored by ie6 so used height, overflow visible instead*/
}
#gallery div p{
	text-align: center;
	font-style: italic;
}

/*=== HOME PAGE ===*/
/*=intro paras and pic=*/
#cg_home{
	/*position: absolute;
	left: -211px;
	top: 3.2em;
	z-index: 10;*/
	float:right;
	position:absolute;
	top:0;
	right: 0;
	
	/*top: -6.9em;	*/		/*too high for ie7 and ie6 */
	
	/*right: -2.5em;*/
	/*z-index: 10;*/
}
#pg_index #content h2{
	/*z-index: 11;
	background-color: transparent;*/
	/*taken out re video*/
	/*margin-right: 200px;	*/		/*so pic does not obscure heading on home page*/
}
#pg_index #content #intro{
	/*width: auto;
	margin-right: 230px;
	margin-bottom: 3em;*/
	/*width: 95%;*/
	/*width: auto;*/
	/*margin-bottom: -5em;	*//*closes up space created by lifting cg_home
								BUT at 800x600 bottom gets overlapped*/
	
	/*margin-right: 208px;*/ /*taken out re video*/
	width: auto;
	/*min-height: 260px;*/ /*taken out re video*/ /*to clear image in cg_home, nb IE7 recognises, IE6 does not */
	
}

#pg_index #content #intro #object_video{
	position:relative; 
	left:50%; 
	margin-left: -212px;
	clear: both
}
/*epsom hosp update*/
#ehu h3, #news h3{
	background-color: #f37121;
	color: #ffffff !important;
	text-align: center;
	padding-top: .3em;
	padding-bottom: .3em;
	margin-bottom: 0;
	font-size: 1.8em;
}
#ehu .banner, #campaigns .banner, #news .banner, #out .banner{
	background-color: #cdd1e6;
	color: #004990;
	font-size: 1.5em;
	text-align: center;
	font-weight: bold;
	padding: .5em;
	
}
#ehu a, #campaigns a, #news a{
	text-decoration: none;
}
/*home page - campaign section*/
#campaigns h3, #speeches h3, #out h3{
	color: #ffffff !important;
	background-color: #004990;
	text-align: center;
	padding-top: .3em;
	padding-bottom: .3em;
	margin-bottom: 0;
	font-size: 1.8em;
}
/*home page - out and about section */
#out h3{
	text-align: left;
	padding-left: .5em;
}
#out h3 span{
	font-size: 90%;
	font-weight: normal;
	padding-left: 1.5em;
}
#out h3 span span{
	padding-left: 3em;
}
#out p{
	font-style: italic;
	text-align: center;
}
/*=== end of home page ===*/

/*=== ac-resources-dev page ===*/
#pg_ac-resources-dev #content p{
	text-align: left;
}

/*=== have your say page ===*/
#contribution p{
	font-size: 1em;
	line-height: 1;
}
#contribution{
	width: 95% !important;
}
#contribution hr{
	margin-top: .5em;
	margin-bottom: .5em;
}

/*=== ACCESSIBILITY ===*/
/*=== re tabbing through pages - highlight focus ===*/
a:focus, a:active{				/*focus for FF, active for IE*/
	background: yellow;
	background: #f37121;
	/*color: #ffffff;*/
	background: #FFCC99;
	border-bottom: 3px solid #f37121;
}

#navbar a:focus img, #navbar a:active img{
	border: 3px solid #f37121;
}
#info a:focus, #info a:active{
	background-color: #ffffff;
	color: #f37121;
}

#info a:focus img, #info a:active img{
	border: 3px solid #ffffff;
}

/*=== hiding text except from screen-readers===*/
/*move off the page*/
/*based on recommendations from http://www.webaim.org/techniques/css/invisiblecontent/ */
#navbar h2, #info h2, #foot h2, .hidden{
	position: absolute;
	/*left: -9000px;*/
	/*top: 0;*/
	left: 0;
	top:-1000px;
	width:1px;
	height:1px;
	overflow:hidden;
}
/*make hidden links visible on focus*/
a:active.hidden, a:focus.hidden{
	position:static;
	width:auto;
	height:auto;
	z-index: 100;
	font-size: 150%;
}