/* I've commented out the first (universal) set of tags, which I got from http://leftjustified.net/journal/2004/10/19/global-ws-reset/ 
The idea is that it fixes layout problems across browsers. Need to check whether it interferes with other tags before I remove the comments

* { 
padding:0; 
margin:0; 
} 
*/


body  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1em;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #wrapper selector */
	color: #333;
	background-color: #fff;
}
body, div, img, p, h1, h2, h3, ul, ol, li, a, dl, dd, dt, form, input, blockquote {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
}

/* invisible skip to content */

#skip {
	position: absolute;
	top:-1000px;
}

/* ************ WRAPPER ******************** */

/* wrapper is the very outer wrapping div that holds everything else and gives whole page some margins */
#wrapper {
  width: 95%;  /* this will create a container 95% of the browser width */
	background: #FFFFFF;
	margin: 10px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 


/* *************  HEADER  ****************** */

#header_blue {
	padding:10px;
	border-top: #0066cc solid 4px;
	border-bottom: #0066cc solid 4px;
	background-color: inherit;
}
#header_blue a {
text-decoration:none;
color:#FFFFFF;
	background-color: inherit;
}
#header_blue .topIPpagehead {
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1.3em;
font-weight: bold;
line-height: 1.4em;
color: #000099;
margin-top: 10px;
	background-color: inherit;
}
#header_blue  ul {
	list-style: none;
}
#header_blue li {
	font-size: 0.8em;
	font-weight: normal;
	}
/*the following style the links at the bottom of the header - 'skip to content' and 'accessibility' */
#header_blue .skiplink {
	color: #0033FF;
	font-size: 0.9em;
	float: left;
	padding-left: 15px;
}
#header_blue .skiplink a {
	color: #0033FF;
	text-decoration: underline;
	background-color: inherit;
}

#header_blue .skiplink a:link, #header_blue .skiplink  a:visited, #header_blue .skiplink  a:hover {
	text-decoration: underline;
	color:#0033FF;
	background-color: inherit;
}

#header_blue  .toaccess {
	color: #0033FF;
	font-size: 0.9em;
	padding-right: 15px;
	float: right;
}

#header_blue  .toaccess a {
	color:#0033FF;
	background-color: inherit;
}

#header_blue .toaccess a:link, #header_blue .toaccess  a:visited, #header_blue .toaccess  a:hover {
	color:#0033FF;
	background-color: inherit;
	text-decoration: underline;
}
/* ***************right logo is the NHS logo in the header ************* */
#rightlogo {
	margin: 0 20px;
	float: right;
}

/* ***************end header styles************* */

/* the following styles can be used anywhere  */

.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.right { /* same as above (to deal with left-over use of this class. */
	float: right;
	margin-left: 8px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

a img {border: none; 
}



/* *************** PAGE LINKS BLUE is the page heading with the forward and back links **** */
#pagelinks_blue {
	margin: 5px 0;
	padding: 5px;
	background-color:#0066cc;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: 400;
	line-height: 1.4em;
	color: #fff;
}
.rightlink a {
	float: right;
	color:#FFFFFF;
	font-size: 0.9em;
	background-color: inherit;
}
.rightlink a:link, a:visited, a:hover, a:active {
	color: #FFFFFF;
	background-color: inherit;
}
.leftlink a {
float: left;
color:#FFFFFF;
font-size: 0.9em;
	background-color: inherit;
}
.leftlink a:link, a:visited, a:hover, a:active {
color: #FFFFFF;
	background-color: inherit;
}


/* ************ MENU  this styles the positioning and dark blue background of the menu. The menu itself is styled from the P7.css and controlled by the P7.inc  ***** */

#menu {
	width:100%;
	background-color:#009933;
	padding: 0.5em 0;	
	border-bottom: #009933 solid 16px;
	
}

/* the div 'inner-wrapper' is a wrapper to contain the three column layout */
#inner-wrapper {
	background-color:#ffffff;
	width: 100%;
	margin-top: 10px;
	border: 1px #000099;
	 position: relative;
  	top:0;
  	left:  0;
}

/* rather than delete the left column, I've given it a width of 1px - in case we need to put it back */
#leftcolumn {
  	float: left;
  	width: 1px;
  	margin: 0;
  	padding: 0;
}

#content {
	padding: 10px;
	margin-left: 1px; 
} 

/* ************MAIN FONT TAGS  ******* */
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5em;
	font-size: 0.95em;
	color: #333;
	font-weight: 300;
	background-color: transparent;
}
h2, h3, h4, h5, h6 {
	font-weight: bold;
	background-color: transparent;
} 	
	
/* SEE ALSO THE FONT TAGS DEFINED AS PART OF THE CONTENT DIV BELOW */	

/* styles for content div (the main content of the page)  */

#content h1 { 
	padding: 0px 10px 15px 0;
	font-size: 1.3em;
	line-height: 1.5em;
	color: #006;
	background-color: transparent;
}
#content p,  #content ul, #content ol {
	padding: 0 20px 20px 20px;
	line-height: 1.5em;
	font-size: 0.95em;
	color: #333;
}
#content h2 {
	padding-bottom: 10px;
	font-size: 1.1em;
	line-height: 1.5em;
	color: #003366;
}
#content h3 {
	padding: 0 20px 20px 20px;
	font-size: 1.1em;
	color:#333;
}
#content h4 {
	padding: 0 20px;
	font-size: 1em;
	color:#003366;
}
#content ul {
	margin-left: 0.75em;
	font-size: 0.95em;
}
#content ul li {
	list-style: none;
	background: url(/resource/images/graphics/rightarrow.png) no-repeat 0 6px;
	padding-left: 15px;
}
#content  li ul  li {
list-style:none;
	background: url(/resource/images/graphics/bluerightarrow.png) no-repeat 0 6px;
	padding-left: 25px;
}
#content a {color: #33c; 
	text-decoration: underline;
	background-color: inherit;
	}
#content a:link {color: #33c;
	background-color: inherit; 
	}
#content a:visited {color: #33c;
	background-color: inherit; 
	}
#content a:hover {color: #006;  
	text-decoration:underline;
	background-color:#CCFFFF;
	 }
#content a:active {color: #33c; 
	background-color: inherit;
	}

#content .tinytext {
	color: #006699;
	font-size: 0.8em;
	padding: 0;
}

#content blockquote {
	background: #e4eef7;
	color: #333;
	line-height: 1.3em;
}



/* COLUMN */ 
/* the following styles define the look of the right column */
#rightcolumn  {
	float: right; 
	width: 210px; /* since this element is floated, a width must be given */
	background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0 0 15px 10px; /* top and bottom padding create visual space within this div  */
	margin-right: 5px;
	margin-left: 20px;
}
#rightcolumn .box {
	width: auto;
	margin: 10px 0 10px 0;
	padding-bottom: 10px;
	border:#009 1px solid;
	background-color: #ffffff; 
}
#rightcolumn .boxheading {
	background-color:#0066cc;
	color:#FFFFFF;
	font-size: 1.1em;
	padding: 10px 5px;
	margin-bottom: 10px;
	width: auto;
}
#rightcolumn .insidebox {
	padding: 0 5px;
}

#rightcolumn p, #rightcolumn ul {
	color: #333;
	padding-top: 10px;
	font-size: 0.95em;
	line-height: 1.5em;
}
#rightcolumn li {
	margin: 0 0 10px 0;
	list-style: none;
	background: url(/resource/images/graphics/rightarrow.png) no-repeat 0 6px;
	padding-left: 10px;
}
#rightcolumn ul {
	margin-left: 0.75em;
}
#rightcolumn a {
	color: #0066ff;
}

#rightcolumn a:link {
	color: #0066ff;
}
#rightcolumn a:visited {
color:#660099;
}
#rightcolumn a:hover {
	color: #330099;
	background-color:#CCFFFF;
}

#rightcolumn .tinytext {
	font-size: 0.8em;
	color:#666666;
}




/* Start footer area which includes 'footer1' and 'pagebottom' ---------------------------------- */

#footer1 {
	clear: both;
	float: left;
	padding: 5px 0px;
	background: #fff;
	border-top:#000066 solid 2px;
}


#footer1 ul {
	list-style: none;
}
/*the following style the links at the bottom of the page*/
#footer1 .goback {
	float: left;
	padding-left: 15px;
}
#footer1 .crumbs{
	padding-right: 15px;
	float: right;
}
#footer1 .goback a {
color:#0033FF;
	background-color: inherit;
}
#footer1 .goback a:link, #footer1 .goback  a:visited, #footer1 .goback  a:hover {
	text-decoration: underline;
color:#0033FF;
	background-color: inherit;
}
#footer1 .crumbs a {
color:#0033FF;
	background-color: inherit;
}
#footer1 .crumbs a:link, #footer1 .crumbs  a:visited, #footer1 .crumbs  a:hover {
color:#0033FF;
	background-color: inherit;
}
#pagebottom {
	clear: both;
	float: left;
	width: 100%;
	background-color: #2B3657;
	color: #FFF;
	font-size: 80%;
	padding-bottom: 5px;
}
#pagebottom ul {
	margin: 15px 20px;
	padding: 0px 0px 5px 0px;
	list-style: none;
	color: #FFF;
	background-color: inherit;
}
#pagebottom #copyright {
	float: left;
}
#pagebottom #links {
	float: right;
}
#pagebottom  a {
	color: #FFF;
	background-color: inherit;
}
#pagebottom  a:link, #pagebottom  a:visited {
	text-decoration: none;
	color: #FFF;
	background-color: inherit;
}
#pagebottom  a:hover {
	text-decoration: underline;
		background-color:#CCFFFF;
}

/* end footer */
	
	



/*other styles for content area. ------------------------------------------------------------*/

#content .contrast {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#336633;
	font-weight: bolder;
}
.firstpara {
	color: #000;
	font-weight: bold;
}
.indent {
	margin-left: 10px;
}
.leftimg {
	float: left;
	margin: 0 10px 0 0;
	border: 1px solid #000;
}

	

/* rightbox2 is the style for boxes like the one on the home page about the DH.   */
.rightbox2 {
	background: #FFFFCC;
	margin: 5px 10px 10px 10px;
	padding: 2px;
	float: right;
	width: 220px;
	border: thin solid #990000;
}
.rightbox2 p, ul {
padding: 5px 0px 5px 1px;
font-size: 0.9em;
}
.rightbox2 li {
	margin-left: -15px;
}

/* innerbox is a contrasting full-width box, like the one on the home page about use of terms */
.innerbox {
	background-color: #e7eae9;
	border:#000066 thin dashed;
	padding: 10px 0 0 0;
	margin: 10px;
}
.innerbox p, ul {
font-size: 0.95em;
}
.innerbox h2 {
	font-size: 1.1em;
	margin: 5px 8px;
}

/* hottipbox is a contrasting full-width box, with the 'hot tips' image applied as background to the heading */
.hottip_box {
	background-color: #fff;
	border: thin #000066 dashed;
	padding: 8px;
	margin: 10px 220px 10px 10px;
}

.hottip_box_head   {
	background-image: url(/resource/images/graphics/hottips.gif);
	background-repeat:no-repeat;
	background-position:left;
	background-color: #204ea9;
	margin-bottom: 1em;
}
.hottip_box_head h2 {
visibility:hidden; /*I've hidden the text because there is already text in the background image */
}

/*highlight_box looks the same as the hot tips box, but does not need a heading*/
.highlight_box {
	background-color: #fff;
	border: thin #000066 dashed;
	padding: 8px;
	margin: 10px 220px 10px 10px;
}
.highlight_box p {
	color:#333;
	font-weight: bold;
	}
.highlight_box li {
	color:#333;
	font-weight: bold;
	}
	
caption {
color:#000066;
background-color:#fff;
text-align:center;
margin: 15px 0;
}
/* ***********table with white background and borders top and bottom of each row  ************ */

.plain_table {
border: 1px #0099FF;
border-collapse: collapse;
margin: 0 10%;
}
.plain_table tr {
vertical-align: top;
}
.plain_table td {
padding: 2px;
border: 1px solid #0099ff;
}
.plain_table th {
text-align:left;
padding: 2px;
font-weight:bold;
color:#000066;
border: 1px solid #0099ff;
}
/* ***********table with blue background and outside border  ************ */
.featured_table {
background-color:#CCFFFF;
border: thin #0099FF;
margin: 0 10%;
}
.featured_table td {
padding: 2px;
vertical-align: top;
}
.featured_table th {
padding: 2px;
font-weight:bold;
color:#000066;
}


/* NOT SURE IF THESE ARE IN USE - CHECK SOME TIME  */
#content blockquote, #content .important {
	width: 90%;
	margin: 0px 20px 20px 20px;
}




#content img.left {
	float: left;
	margin: 10px 15px 5px 15px;
}

#content img.right {
	float: right;
	margin: 10px 15px 5px 15px;
}

#content h1 + .important {
	margin-top: 20px;
}

#content li + li {
	margin-top: 10px;
}



#content ol {
	margin-left: 2em;
}

#content .box500px {
	width: 500px;
	margin: 20px 10px 20px 20px;
	padding-bottom: 10px;
	background-color: #ffffff;
	border:#009 3px solid; 
}
#content .box500px h1{
	padding: 8px 10px;
	font-size: 1.2em;
	color:#009;
}




hr   {
	color: #0099FF;
	text-align: center;
	height: 1px;
	width: 60%;
}
/* ****** SHOULD BE DELETED provided nothing has stopped working
.hottip_box h2 {
	font-size: 110%;
	color: #000066;
	padding-top: 10px;
	margin-left: 20px;
	font-weight: bold;
	background-color: inherit;
}
.markup {
	color: #FF0000;
}
.addhyperlink {
	color: #6600CC;
	font-weight:bold;
}


.rightimg {
	float: right;
}

#content .indextable h1 {
	color: #FFFFFF;
	margin-bottom: 15px;
	padding-left:10px;
	background-color: #0066CC;
}


#content .indextable h1 a:link, #content .indextable h1 a:visited {
color: #FFFFFF;
text-decoration: none;
	background-color: inherit;
}


.indextable {
table-layout: auto;
text-decoration: none;
}
.indextable td{
vertical-align:top;
}
.indextable p {
font-size: 0.9em;
margin: 0;
text-decoration: none;
}
.indextable h1 {
font-size: 1em;
font-weight: bold;
color: #FFffff;
	background-color: inherit;
}

.indextable a {
text-decoration: none;
}
*/fieldset {
	border-style: none;
		padding: 0 5px;
}
label {
	font-size: 0.8em;
	color: #006699;
}
legend {
color:#666699;
font-size: 0.8em;
display: none;
}

#wrapper #inner-wrapper #rightcolumn .centred-on-blue {
	font: small Verdana, Arial, Helvetica, sans-serif;
	color: #000066;
	background-color: #FFFFFF;
	background-position: center;
		text-align: center;
		padding-bottom: 5px;
		margin-top: 10px;
}
#wrapper #inner-wrapper #rightcolumn .centred-on-blue a:link  {
	text-decoration: underline;
	color: #FFFFFF;
	}