/*
--------------- npc_styles -----------------

CONTENTS
- Reset
- Global positioning
- Content Styles
- NPC styles
- JQuery

 */



/* ................................. Reset css so different browser behaviour is more consistent ................................. */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, section {
	margin: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 1em;
	font-family: inherit;
	vertical-align: baseline;
	padding: 0;
}

article, aside, dialog, figure, footer, header, hgroup, section {
	display: block;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

table, td, th {
	vertical-align: top; /* Changed from middle */
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

a img {
	border: none;
}
/* ................................. end of Reset css ................................. */





/* ................................. Global .................................. */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em; /* Any em font sizes will be relative to this value, so changing this affects ALL the text */
	line-height: 1.5;
	text-align: left;
	overflow-y:scroll; /* overflow-y is a CSS 3 property, so won't validate as CSS 2.1, but still behaves same across so no worries  */
}

#size_wrapper { /* Outer-most div containing all elements */
	width: 960px; /* 960px = most common size for 1024 x 760 = no horizontal scroll bar + a little breathing space - Just change this to make a wider or smaller layout and the page content and other areas will adapt accordingly */
	margin-left: auto; /* Centre the page in the browser */
	margin-right: auto; /* Centre the page in the browser */
	position: relative; /* Ensure that any 'absolute'ly positioned elements are relative to the main wrapper - i.e. keep within stated width */
}

#banner { /* Contains main image / search and global navigation */
	height: 218px; /* Same height as banner graphic - width of graphic is: 960px */
	background-image: url(images/global/banner.jpg); /* 1 big banner image keeps all graphics together */
	background-repeat: no-repeat; /* Stops repeating image if ever layout is expanded */
	background-color: #2e92cd; /* Add colour in case image does not load = can see white text */
}

#global_links { /* Top left global navigation */
	width: 355px;
	margin-left:15px;
	padding-top: 10px;
	color: #FFFFFF;	
}

#global_links a {
	color: #FFFFFF;
	text-decoration: none;
}

#global_links a:hover, #global_links a:focus {
	text-decoration: underline;
}

#sitemap_az { /* Sits to the left of 'search' box */
	width: 60px;
	position: absolute;
	top: 22px;
	left: 388px;
	font-size: 0.9em;
	line-height: 120%;
	text-align: center;
	overflow:visible; /* Just in case user increases font size */
}

#sitemap_az a {
	color: #004e9c; /* Deep blue */
	text-decoration: none;
}

#sitemap_az a:hover, #sitemap_az a:focus {
	text-decoration: underline;
}



/* ---------------   Original Global Search ------------------ 

form#search {  
	margin: 0;
	padding: 0;
	width: 350px;
	position: absolute;
	top: 27px;
	left: 460px;
}

form#search input {
	border: none;
	float: left;
	border: 0;
}

form#search span {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 250px;
}

#searchfield {
	color:#0066CC;
}

 --------------- End of Global Search ------------------ */

/* ---------------  Global Search - Googleised ------------------ */

form#cse-search-box {  /* No div around form field */
	margin: 0;
	padding: 0;
	width: 350px;
	position: absolute;
	top: 27px;
	left: 460px;
}

form#cse-search-box input {
	border: none;
	float: left;
	border: 0;
}

form#cse-search-box span { /* Contains search button */
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 250px;
}

#q {
	color:#0066CC; /* Blue */
}

/* --------------- End of Global Search - Googleised ------------------ */



img#logo { /* Place the NPC logo in the top right (of the 'size_wrapper'), even if size of layout changes */
	position: absolute;
	top: 0;
	right: 0;
}

#dropdown_nav { /* Positions 'nav_menu' CSS (i.e. the drop-down menu system */
	position: absolute;
	z-index: 500; /* Put this high in the stacking order so page elements below 500 are overlapped */
	top: 218px;
	left: 0;
	width: 100%;
	height: 48px;  /* Width and height are both required so that the background colour can be seen going to the right hand edge */
	background-color: #f0efef; /* Very light grey */
	border-bottom:4px solid #5fc833; /* Same as: '.nav li' in the nav_menu CSS  - NPC Green */
}








/* ----------------  Left Nav -------------------- */

#left_nav { /* Generic left nav wrapper for positioning - contains faint blue tint and rounded top edges */
	width: 208px;
	margin-top: 65px; /* This is the distance from the lowest HTML in the DOM (NOT the 'nav_menu' CSS as this absolutely positioned, i.e. out of context flow) */
	background-color: #f3f8fc; /* Very light grey */
	float:left;
	left: 0;
	background-image: url(images/global/left_nav_top.png);
	background-repeat: no-repeat;
	background-position: left top; /* Add curved edges to top of left hand panel */	
}

#left_nav_height { /* Use this to push the blue tint down when they there aren't enough elements to do the job */
	width: 208px;
	margin-top: 65px; /* This is the distance from the lowest HTML in the DOM (NOT the 'nav_menu' CSS as this absolutely positioned, i.e. out of context flow) */
	background-color: #f3f8fc; /* Very light grey */
	float:left;
	left: 0;
	background-image: url(images/global/left_nav_top.png);
	background-repeat: no-repeat;
	background-position: left top; /* Add curved edges to top of left hand panel */	
	height: 485px;
}

#left_nav .leftnav_bottom {
	background-image: url(images/global/left_nav_bottom.png); /* Add curved edges to the bottom of the left hand panel */	
	background-repeat: no-repeat;
	background-position: left bottom;
}

#left_nav .leftnav_bottom_height {
	background-image: url(images/global/left_nav_bottom.png); /* Add curved edges to the bottom of the left hand panel */	
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 500px;

	
	/* border: #F00 10px solid; */

}

#left_nav .leftnav_head { /* Main heading - single line */
	height: 37px; /* Same height as graphic icon */
	background-image: url(images/global/leftnav_head_arrow.png); /* Add the header graphic - with arrow */
	background-color: #f3f3f3;
	background-repeat: no-repeat;
	background-position: left top;
	font-size: 1.2em;
	color: #0072dd; /* Deep blue */
	padding-top: 5px; /* Moves the text down to centre it within the graphic icon */
	margin-top: 20px; /* Breathing room to the top of each heading */
	margin-left: -5px; /* Slightly indent the image */
}

* html #left_nav .leftnav_head { /* IE6 Bug Fix - indent the headings to the right */
	margin-left: 5px;
}

#left_nav .leftnav_head_double { /* Main heading - double line */
	height: 55px; /* Same height as graphic icon */
	background-image: url(images/global/leftnav_head_arrow_double.jpg); /* Add the header graphic - with arrow */
	line-height: 120%;
}

#left_nav .leftnav_head_triple { /* Main heading - double line */
	height: 69px; /* Same height as graphic icon */
	background-image: url(images/global/leftnav_head_arrow_triple.jpg); /* Add the header graphic - with arrow */
	line-height: 110%;
}

#left_nav .leftnav_head_quod { /* Main heading - double line */
	height: 82px; /* Same height as graphic icon */
	background-image: url(images/global/leftnav_head_arrow_quod.jpg); /* Add the header graphic - with arrow */
	line-height: 105%;
}

#left_nav p {
	padding-left: 7px; /* Moves the text to the right - keeps all text left aligned (as opposed to text-indent) */
}

#left_nav .no_arrow { /* Main heading - without the arrow icon */
	background-image: url(images/global/leftnav_head_no_arrow.jpg); /* Replace the header graphic so no arrow appears */
}

#left_nav a {
	display: block; /* Change from default 'inline' to 'block' so that link area and border go to edge of 'left_nav' div and become clickable */
	text-decoration: none;
	border-bottom: dotted;
	border-bottom-color: #347da8; /* Blue */
	border-bottom-width: 1px;
	background-image: url(images/global/leftnav_icon.png);
	background-repeat: no-repeat;
	background-position: 7px 5px; /* left top */
	padding-left: 22px; /* Better than text-indent, as this way multi-lines line up properly without only the top line being indented */
	color: #0072dd; /* IE6 bug fix - Make sure link colour does not auto appear as visited - Deep blue */
}

/* Sub-headings are styled without the icon + slightly smaller + slightly inset */
#left_nav .sub a {
	padding-left: 30px;
	font-size: 0.9em;
	background-image: url(images/global/leftnav_sub_icon.png);
	background-position: 15px 5px;
}

/* Sub-headings are styled without the icon + slightly smaller + slightly inset */
#left_nav .sub a:hover {
	background-image: url(images/global/leftnav_sub_icon_ro.png);
}

#left_nav .leftnav_head p a { /* Make the E-Learning heading interactive */
	background-image: none;
	border-bottom: none;
	padding-left: 0;
}


/* The '* html' syntax hides the following selector from all browsers except IE6 and below */
* html #left_nav a { /* IE6 bug fix - Make entire area of links within a div tag clickable */
	height: 1px; /* IE6 bug fix - Gives IE6 'layout'! The height itself is actually ignored (as treated as minimum height) */
}

#left_nav .leftnav_external_links a {
	background-image: url(images/global/external_link_icon.png); /* Add the external inks icon */
}

#left_nav .leftnav_external_links a:hover {
	background-image: url(images/global/external_link_icon.png); /* Add the external inks icon */
}

#left_nav a:visited { /* Make the visited links greyer, so users know they have visited them */
	color: #6d828e; /* Greyish blue */
}

#left_nav a:hover, #left_nav a:focus {
	background-color: #0877b2; /* Deep blue */
	background-image: url(images/global/leftnav_icon_ro.png); /* Have to completely replace the image due to pixelated problem = graphic will need changing if bg colour changes */
	color:#FFFFFF;
}

#left_nav .leftnav_head p a:hover {
	text-decoration: underline;
	color: #0072dd;
	background-color: transparent; /* Must use transparent (as 'none' can only be applied to background-image */
	/* margin-left: -10px;
	padding-left: 10px; */
}

* html #left_nav .leftnav_head p a:hover { /* IE6 Bug Fix - Stop image appearing over text */
	background-image: none;
	
}

/* ----------------  End of Left Nav -------------------- */





/* Used on section Home pages - e.g. Antiplatelets or Controlled Drugs */
#sectionhome_nav { 
	width: 500px;
	margin-top: 20px;
	float:left;
	left: 0;
	padding-bottom: 50px;
	margin-bottom: 10px;
}

#sectionhome_nav a {
	display: block;
	text-decoration: none;
	border-bottom: dotted;
	border-bottom-color: #347da8; /* Blue */
	border-bottom-width: 1px;
	background-image: url(images/global/leftnav_icon.png);
	background-repeat: no-repeat;
	background-position: 0 5px; /* left top */
	padding-left: 17px; /* Better than text-indent, as this way multi-lines line up properly without only the top line being indented */
	color: #0072dd; /* IE6 bug fix - Make sure link colour does not auto appear as visited - Deep blue */
}

#sectionhome_nav a:hover, #sectionhome_nav a:focus {
	background-color: #0877b2; /* Deep blue */
	color:#FFFFFF !important;
	background-image: url(images/global/leftnav_icon_ro.png); /* Have to completely replace the image due to pixelated problem = graphic will need changing if bg colour changes */
}





/* ----------------  Footer -------------------- */
#footer {
	width: 100%;
	position: relative;
	height: 39px; /* + 6 for padding = 45px height */
	border-top-color: #5fc833; /* Add the NPC green line */
	border-top-style: solid;
	border-top-width: 5px;	
	background-color: #3199d1; /* Blue */
	padding-top: 3px;
	padding-bottom: 3px;
	clear: both; /* Make sure that the footer is always at the bottom of the screen */
	color: #FFFFFF;
}

*:first-child+html #footer { /* IE7 bug fix - Make sure the navigation menu appears over the footer */
	z-index: -1; /* This stops Firefox making the footer links active */
}

* html #footer { /* IE6 bug fix - Make sure the navigation menu appears over the footer */
	z-index: -1; /* This stops Firefox making the footer links active */
}

#footer a {
	color: #FFFFFF;
	text-decoration: none;
}

#footer .left {
	position: absolute;
	left: 0;
	padding-left: 15px;
}

#footer .right {
	position: absolute;
	right: 0;
	padding-right: 15px;
}

#footer a:hover, #footer a:focus {
	text-decoration: underline;
}

/* ----------------  End of Footer -------------------- */







#content_area { /* Main page content goes into this - will scale into available space unless inhibited */
	width:auto; /* scale to fill the area as the layout size may change in the future */
	margin-top: 70px; /* This is the distance from the lowest HTML in the DOM (NOT the 'nav_menu' CSS as this absolutely positioned, i.e. out of context flow) */
	margin-left: 230px; /* Size of 'left_nav' area + breathing room */
	margin-bottom: 20px; /* Provide breathing room between page content and footer */
}

/* Add this class to accommodate pages with no 'left-hand' links */
.full_screen { /* Base the full screen area (currently 960px) on the '#content_area' to make updates easier and keep all styles working */
	margin-left: 0 !important; /* Overide the 'margin-left: 230px' width in the '#content_area' so that the full page is used */
	padding-left: 20px;
}
.news_box_content{
	width:auto
}
.news_box_content a:link{
	text-decoration: none;
	color:#FFFFFF;
}
.news_box_content a:visited {text-decoration: none; color:#FFFFFF;}

.news_box_content a:active {
	color:#FFFFFF;
	text-decoration: none
}
.news_box_content a:hover {
	color:#009933;
	text-decoration:underline;
}

#lower {
	margin-top: 200px; /* This is the distance from the lowest HTML in the DOM (NOT the 'nav_menu' CSS as this absolutely positioned, i.e. out of context flow).
	Note that there is also a class called 'lower' */
}

* html #content_area { /* Use the IE hack to stop this applying to non-IE browsers - Applies to IE6 and below */
	display: block; /* IE6 bug fix - Stop the double margin bug + provide 'layout' so positioning works */
}

.hidden	{ /* Used for the 'Skip to content' Access key - can't use 'display: none' else some screen readers won't see it */
	width:0 !important;
	font-size:0 !important;
	height:0 !important;
	line-height:0 !important;
	position:absolute !important;
	left:-999% !important;
	overflow:hidden !important;
}

.hide { /* This effectively removes items from the document - including some screen readers */
	display: none;
}

.breadcrumbs {
	font-size: 0.8em;
	/* border: #999999 thin solid; */
	padding: 2px;
	float: left;
	margin-top: -10px;
}

.breadcrumbs br {
	clear: both;
}

/* .................................................................................... End of Global .......................................................................................... */








/* ................................. Content styles .................................. */


#content_area h1 { /* Main heading at the top of each page */
	font-size: 1.5em;
	color: #2d92ca; /* Blue */
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight: bold;
	text-align: left;
	/* background-color: #F00; */
}

#content_area h1.bg { /* Differently styled H1 - with a grey bar bg, e.g. 'contact_us.php' */
	background-color: #e2e2e2;
	margin-left: -20px;
	margin-top: -20px;
	padding-top: 11px;
	padding-left: 22px;
	padding-bottom: 4px;
}

*:first-child+html #content_area h1.bg { /* IE7 bug fix - Make sure the navigation menu appears over the footer */
	margin-top: -20px; /* IE7 bug fix - Move the title further up */
}

.OrderedList

{

margin:0;

padding:0;

}

.OrderedList LI

{
	list-style-position: outside;
	margin-left:30px;
} /* IE7 bug fix - Fix disapearing numbered bullets in IE */





/* ...................  top right images to go with the h1.bg class  ...................  */

.top_right_image { /* 1st part of adding image to the top right */
	position: relative; /* Set a context for the image to sit inside */
}

/* Each image requires 3 sets of code.  1. standards compliant  2. IE6 bug fix  3. IE7 bug fix */

/* Contact Us ------------ */
.top_right_image div.contactus { /* Position the image to the top right of the div - this is used with headings such as 'Contact Us' */
	position: absolute;
	top: -44px;
	right: 0;
	width: 493px;
	height: 179px;
	background: url(images/contact_us.png) no-repeat top left;
}

* html .top_right_image div.contactus { /* IE6 Bug fix - Add transparancy to image and position correctly */
	right: 15px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contact_us.png', sizingMethod='crop');
	background: none;
}

*:first-child+html .top_right_image div.contactus { /* IE7 Bug Fix - Align the image with the top = 1 extra pixel than standards compliant browsers */
	top: -43px;
}

/* About Us ------------ */
.top_right_image div.aboutus { /* Position the image to the top right of the div - this is used with headings such as 'Contact Us' */
	position: absolute;
	top: -44px;
	right: 0;
	width: 261px;
	height: 279px;
	background: url(images/about_us.png) no-repeat top left;
}

* html .top_right_image div.aboutus { /* IE6 Bug fix - Add transparancy to image and position correctly */
	right: 0;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/about_us.png', sizingMethod='crop') !important;
	background: none;
}

*:first-child+html .top_right_image div.aboutus { /* IE7 Bug Fix - Align the image with the top = 1 extra pixel than standards compliant browsers */
	top: -43px;
}

/* Freedom of Information ------------ */
.top_right_image div.freedom { /* Position the image to the top right of the div - this is used with headings such as 'Contact Us' */
	position: absolute;
	top: -44px;
	right: 0;
	width: 311px;
	height: 147px;
	background: url(images/freedom_info_padlock.png) no-repeat top left;
}

* html .top_right_image div.freedom { /* IE6 Bug fix - Add transparancy to image and position correctly */
	right: 0;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/freedom_info_padlock.png', sizingMethod='crop');
	background: none;
}

*:first-child+html .top_right_image div.freedom { /* IE7 Bug Fix - Align the image with the top = 1 extra pixel than standards compliant browsers */
	top: -43px;
}


/* Privacy policy ------------ */
.top_right_image div.privacy { /* Position the image to the top right of the div - this is used with headings such as 'Contact Us' */
	position: absolute;
	top: -44px;
	right: 0;
	width: 350px;
	height: 244px;
	background: url(images/privacy_policy_folder.png) no-repeat top left;
}

* html .top_right_image div.aboutus { /* IE6 Bug fix - Add transparancy to image and position correctly */
	right: 0;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/privacy_policy_folder.png', sizingMethod='crop') !important;
	background: none;
}

*:first-child+html .top_right_image div.aboutus { /* IE7 Bug Fix - Align the image with the top = 1 extra pixel than standards compliant browsers */
	top: -43px;
}


/* Acceessibility ------------ */
.top_right_image div.accessibility { /* Position the image to the top right of the div - this is used with headings such as 'Contact Us' */
	position: absolute;
	top: -44px;
	right: 0;
	width: 216px;
	height: 213px;
	background: url(images/accessibility_n.png) no-repeat top left;
}

* html .top_right_image div.aboutus { /* IE6 Bug fix - Add transparancy to image and position correctly */
	right: 0;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/accessibility.png', sizingMethod='crop') !important;
	background: none;
}

*:first-child+html .top_right_image div.accessibility { /* IE7 Bug Fix - Align the image with the top = 1 extra pixel than standards compliant browsers */
	top: -43px;
}


/* Publication Scheme ------------ */
.top_right_image div.pubscheme { /* Position the image to the top right of the div - this is used with headings such as 'Contact Us' */
	position: absolute;
	top: -44px;
	right: 0;
	width: 274px;
	height: 216px;
	background: url(images/npc_pub_scheme_books.png) no-repeat top left;
}

* html .top_right_image div.pubscheme { /* IE6 Bug fix - Add transparancy to image and position correctly */
	right: 0;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/npc_pub_scheme_books.png', sizingMethod='crop');
	background: none;
}

*:first-child+html .top_right_image div.aboutus { /* IE7 Bug Fix - Align the image with the top = 1 extra pixel than standards compliant browsers */
	top: -43px;
}





/* ...................  End of top right images  ................... */




*:first-child+html #content_area h1{ /* IE7 Bug Fix - Stop the H1 from centering */
	padding-top: 10px;
	margin-top: 20px;
}


* html #content_area h1{ /* IE6 Bug Fix - Stop the H1 from centering */
	padding-top: 10px;
	/* margin-top: 90px; */
	margin-top: 10px;
}

/* does not work! Intended to fix H1 from centering
* html #content_area h1 {
	display: block;
	text-align: left;
}
*/


/* Style the inconsistent headings and sub-headings */
h1.event_header { /* Based on 'H1' but with added arrow icon */
	background-image: url(images/global/event_arrow_icon.png);
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 37px;
	margin-top: -16px !important;
}

h2.event_header { /* Based on 'H2' but with added arrow icon */
	background-image: url(images/global/event_arrow_icon.png);
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 37px
}

#content_area .page_links{ /* Used for sub-navigation at the top of the content_area - beneath the main H1 title */
	font-size: 1em;
}

#content_area h2 {
	font-size: 1.3em;
	font-weight: bold;
	color: #2d92ca; /* Blue */
	padding-bottom: 3px;
}

#content_area h2.black {
	color: #000000;
	font-size: 1.3em;
	font-weight: bold;
	padding-bottom: 3px;
}

#content_area h2 .link {  /* Used on the site map */
	color: #2d92ca;  /* Blue */
}

#content_area h2.underline {
	border-bottom: 2px solid #3aa0d7;
	width: 800px;
}

#content_area h3 {
	color: #2d92ca; /* Blue */
	font-size: 1.2em;
	padding-bottom: 3px;
	font-weight: bold;
}

#content_area h3.black {
	color: #000000;
	font-size: 1.2em;
	padding-bottom: 3px;
	font-weight: bold;
}

#content_area h3.white {
	color: #FFFFFF;
	font-size: 1.2em;
	padding-bottom: 3px;
	font-weight: bold;
}

#content_area .bordertop {
	border-top: 1px solid #CACACA;
}




p {
	margin-bottom: 1em;
}

.lighter { /* Change the default text black colour to a grey colour */
	color: #807f7f;
}

.emphasise { /* Use a class (rather than the <strong> tag) in case you ever want to change the styling of the emphasis */
	font-weight: bold;
}

.blue_text { /* I'll let you guess what this one does :-D */
	color: #3198d1;
	font-weight: bold;
}

img.right_image { /* Position an image to the right of the screen - text will flow beneath it (unless '.left_hand_panel' is used to limit the size of the left panel */
	float: right;
	padding: 15px;
	padding-right: 0;
}

.indent { /* Use this when you have an element that needs to be positioned slighlty to the right of it's normal / default position */
	padding-left: 10px;
}

.lower { /* Use this when you have an element that needs to be positioned slighlty lower than it's normal / default position */
	padding-top: 5px; /* Note that there is also an ID called 'lower' */
}

*:first-child+html .ie7_lower { /* IE7 bug fix - Move the heading up, closer to the breadcrumbs  */
	padding-top: 10px;
}

*:first-child+html .ie7_higher { /* IE7 bug fix - Move the heading up, closer to the breadcrumbs  */
	margin-top: -5px !important;
}

*:first-child+html .ie7_higher_small { /* IE7 bug fix - Move the heading up, closer to the breadcrumbs  */
	margin-top: 0 !important;
}

.breadcrumb_higher { /* Move the breadcrumb up in certain circumstances  */
	margin-top: -40px;
}

*:first-child+html .breadcrumb_higher {
	margin-top: 0;
}

h1.nav_higher { /* Move the main heading up in certain circumstances  */
	margin-top: -40px;
}

.margin_top_reset { /* Override the default margin value of a class  */
	margin-top: 0 !important;
}


#content_area span.readmore a {
	background-color: #52b037 !important;
	color: #FFFFFF;
	padding: 2px;
	text-decoration: none;
}

#content_area span.readmore a:hover {
	color: #FFFFFF !important;
	text-decoration: underline !important;
}



/* ---------------- Right-hand panel -------------------------------------  */

/* Uses CSS3 so will NOT work currently in IE + will stop validation - retained sa you may want to use it later
img.right_image_shadow {
	float: right;
	padding: 15px;
	padding-right: 0;
	-webkit-box-shadow: 3px 3px 6px #666666;
	-moz-box-shadow: 3px 3px 6px #666666;
	box-shadow: 3px 3px 6px #666666;
} */

/* Uses CSS3 so will NOT work currently in IE + will stop validation 	
.right_hand_panel {
	width: 300px;
	float: right;
	margin-top: 10px;
	margin-bottom: 20px;
	margin-left: 20px;
	background-color: #339bd4; 
	color: #FFFFFF;
	padding-right: 10px; 
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	border-radius: 5px;  
} */


.right_hand_panel { /* Moves content inside it to the right of the screen. Text and images can be placed inside - best used with a <div> tag as the outer element */
	width: 160px;
	float: right;
	margin-bottom: 10px;
	background-color: #b6b0b2; /* Grey by default - but can apply any colour to it that you choose - can add a graduated tint - see '.graduated_tint_blue' */
	color: #FFFFFF;
	padding-right: 0px;
	padding-left: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	clear: right; /* Make sure that other panels (and footer) go beneath this one */
}

.right_panel_higher { /* Move the panel upwards when it needs to be positioned in line with a heading */
	margin-top: -70px;
}

.right_hand_box { /* turn the grey box into a white box */
	background-color: #FFFFFF;
	color: #000000;
	border: solid 1px #CACACA;
	position: relative;
	float:right;
}
.right_hand_news { /* turn the grey box into a white box */
	background-color: #FFFFFF;
	color: #000000;
	border: solid 1px #CACACA;
	position: relative;
	float:right;
	width: 160px;
}
.right_float{
	width:150px;
	margin-top: 70px;
	height:auto;
	float:right !important;
}

.black { /* Override a grey or blue value abnd return the text to black */
	color: #000000;
}

/* Apply this as a second class along with 'p.right_hand_panel' to make the background graduate to a lighter tone */
.graduated_tint_blue {
	background: url(images/global/white_grad_tint.png) repeat-x bottom;
	background-color: #339bd4; /* Blue */
}

.graduated_tint_green {
	background: url(images/global/white_grad_tint.png) repeat-x bottom;
	background-color: #97c93c; /* Green */
}

/* IE6 Bug fix - set solid colour instead of transparency in the background image  */
* html .graduated_tint_green {
	background: none;
	background-color: #97c93c; /* Green */
}

/* IE6 Bug fix - set solid colour instead of transparency in the background image  */
* html .graduated_tint_blue {
	background: none;
	background-color: #339bd4; /* Blue */
}

#content_area .right_hand_panel h2 {
	font-size: 1.2em;
	font-weight: 700;
	color: #FFFFFF; /* White */
	padding-top: 0;
	padding-bottom: 0;
}

img.right { /* Position an image in the right hand panel over to the right */
	float: right;
	padding: 4px;
}

img.right_podcast { /* Position an image (like podcast) in the right hand panel over to the right and position it exactly as required */
	float: right;
	position: absolute;
	bottom: -3px;
	right: 0;
	padding: 4px;
}

#content_area .right_hand_panel a { /* make the right hand panel links white */
	color: #FFFFFF;
}

#content_area .right_hand_panel a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

#content_area .right_hand_panel a.grey {
	color: #666565;
}

#content_area .right_hand_panel a.grey:hover {
	color: #666565;
	text-decoration: none;
}

#content_area .right_hand_box h3.black {
	color: #000000;
	font-size: 1.0em;
	padding-bottom: 3px;
	font-weight: bold;
}

#content_area .right_hand_box p {
	color:#666565;
}

#content_area .right_hand_box h2 {
	font-size: 1.1em;
	font-weight: 700;
	color: #FFFFFF; /* White */
	padding-top: 0;
	padding-bottom: 0;
}


/* ---------------- End of Right-hand panel -------------------------------------  */






/* Use this class in conjunction with the ".right_hand_panel" to create a 2 column layout */
.left_hand_panel { /* This class constrains the width of the div to a set size so that text does not wrap around ".right_hand_panel" images and text */
	/* 206px 'right_hand_panel' plus 208px 'left_hand_nav'= 414px used already
	960px 'size wrapper' minus 414px = 546px */
	width: 560px; /* NOTE: padding and margin also add to the total width of this panel */
	float: left;
	margin-top: -10px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-bottom: 10px;	
	
}

*:first-child+html .left_hand_panel { /* IE7 bug fix - Move the heading up, closer to the breadcrumbs  */
	margin-top: -20px;
}



#content_area ul, #content_area ol { /* Force bullet points to appear inside their bounding div */
	margin: 1em;
	padding-left: 1em;
}



abbr,
acronym { /* Use the 'abbreviation' and 'acronym' element and add a title (tool tip) in the HTML - The title will appear when the user rolls over the element */
	border-bottom: 1px dotted #333333;
}

abbr:hover,
abbr:focus,
acronym:hover,
acronym:focus {
	cursor: help; /* Show the question mark when the user rolls over the element (or uses the tab key) */
}

/* This 'z-index' fixes the flash 'window' mode issue - the Flash file would otherwise obscure the CSS drop down navigation menu. */
.stack { /* NPC admins must add: <div class="stack"> around the Flash embed HTML and add <param name="wmode" value="opaque"> */
	position:absolute;
	z-index:1;
}




/* Generic Form stles */
.table_form input[type="text"],
.table_form textarea {
	border: solid 1px #0b74ac; /* Deep blue */
}



.shadow_outer { /* Apply the same large shadow graphic to multiple elements */
	position: relative; /* Try to fix IE7 ????????? */
	background-image: url(images/global/shadow.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-left: 6px;
}

.shadow_inner { /* Apply the same large shadow graphic to multiple elements */
	position: relative;
	top: -7px;
	left: -6px;
}

*:first-child+html .shadow_inner { /* IE7 bug fix - This is v close, but not a perfect fix*/
	width: 100%;
	top: 3px;
	/* display: block;  */
}





/* ----------------------  Tables -------------------------------- */

/* Generic Table styles - see table reset values at top of page */
table {
	width: 100%;
	border: solid 1px #FFFFFF;
}

table.table_form {
	border: none;
	width:600px
}

table td.table_column { /* Style columns with this class */
	background: #1f9de0; /* Deep blue */
	color: #FFFFFF;
	text-align: right;
	padding-right: 8px;
}

td { /* Table cell */
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 4px;
}

.odd_rows_events { /* jQuery uses this class to style odd rows of a table */
	background: #d6eaf9; /* Light blue */
}

.odd_rows_events_archive {
	background: #f2f1f1; /* grey */
}

.even_rows {
	background: #FFFFFF;
}

thead.events { /* Apply the 'thead' and 'tbody' elements to tables so that these areas can be styled independantly of the rest of the table content */
	background-color: #1f9de0 !important; /* Deep blue */
	color: #FFFFFF;
	font-size: 1.1em;
}

thead.events_archive { /* Apply the thead and tbody elements to tables so that these areas can be styled independantly */
	background-color: #000000 !important;
	color: #FFFFFF;
	font-size: 1.1em;
}

*:first-child+html table { /* IE7 bug fix - Remove the gap between table columns as in IE7. State 'border-collapse: collapse' explicitly */
	border-collapse: collapse;
}

table.merec_table {
	background-color: #ccff99 !important;
	border: #99CC66 2px solid;
}

table .merec_table_darker { /* This class is used at the top and bottom of the table, therefore a new class (as opposed to 'thead') is used */
	background-color: #99CC66 !important;
}

table.merec_table td { /* Table cell */
	border: #99CC66 1px solid;
}

table.bullet_table {
	background-color: #FFFFFF;
	border: #FFFFFF 2px solid;
}

.pda_head{
	padding-left: 5px;
	font: Arial, Helvetica, sans-serif;	
	font-weight: normal; 
	font-size: 14px;
	color: #FFFFFF;
	padding-top: 5px;
}

.pda_body{
	padding-left: 5px;
	font: Arial, Helvetica, sans-serif;	
	font-weight: normal; 
	font-size: 12px;
	color: #000000;
}
table.pda_table {
	background-color: #FFFFFF !important;
	border: #1F9DE0 2px solid;
	padding-left: 0px;
	font: Arial, Helvetica, sans-serif;	
	font-weight: normal; 
	font-size: 12px;
	color: #000000;
	
}

table .pda_table_darker { /* This class is used at the top and bottom of the table, therefore a new class (as opposed to 'thead') is used */
	background-color: #1F9DE0 !important;
	font: Arial, Helvetica, sans-serif;	
	font-weight: normal; 
	font-size: 14px;
	color: #FFFFFF;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}


table.pda_table td { /* Table cell */
	border: #D6EAFA 1px solid;
	font-style: normal;
	background-position: center;
}

table.bullet_table {
	background-color: #FFFFFF;
	border: #FFFFFF 2px solid;
}

.odd_rows_pda { /* jQuery uses this class to style odd rows of a table */
	background: #d6eaf9; /* Light blue */
}

.even_rows_pda {
	background: #FFFFFF;
}


/* ----------------------  End of Tables -------------------------------- */






.navbartext {
	font-size: 0.8em;
}

.lastupdated { /* Can be used in the content area (rather than the footer to draw emphasis to an important update if required */
	background-color: #5fc833;
	font-weight: bold;
	color: #434040;
	padding: 2px 5px 5px 2px;
}




#content_area .sitemap a { /* Used on the site map page only */
	color: #666666; /* Add a grey color to all links (except the main headings) */
}

#content_area .sitemap span a { /* Indent the 2nd level of hierarchy */
	padding-left: 25px;
}

#content_area .sitemap span span a { /* Indent the 3rd level of hierarchy */
	padding-left: 50px;
}





/* ............. Styles retained from NPC current sites .................. */

.contentDefinition {
	color: #6600CC;
}

h2.merec_head {
	margin-top: -16px;
	display: block;
	border-top: solid 5px #5fc833;
	border-bottom: solid 10px #5fc833;
	color: #0053a0;
	font-size: 1.3em;
	line-height: 21px;
	margin-bottom: 15px;
}

.merec_subhead {
	display: block;
	border-bottom: solid 2px #5fc833;
	font-size: 1.1em;
	text-decoration: none;
	color: #000000;
	
}
.merec_subhead a{
	display: block;
	border-bottom: solid 2px #5fc833;
	font-size: 1.1em;
	text-decoration: none;
	color:#000000;
}
.merec_subhead a:hover {
	display: block;
	border-bottom: solid 2px #5fc833;
	font-size: 1.1em;
	color:#0053A0;
	text-decoration: none;
}


.box_tint_bg { /* large box in content area with graduated grey tint fading to white at top */
	background: url(images/global/box_grey_tint_bg.png) repeat-x right bottom;
	border: solid 1px #cacaca;
}

.box_tint_bg p {
	padding: 10px;
}

.box_col_grey {
	background-color: #b7b7b7; /* grey */
	padding: 10px;
	margin-bottom: 5px;
}

.box_col_grey {
	color:#FFFFFF;
}

.box_col_blue {
	background-color: #96c5e8; /* light blue */
	padding: 10px;
	margin-bottom: 5px;
}

.box_title_grad { /* Used in email alert */
	width: 740px;
	margin-left: -20px;
	padding-left: 20px;
	padding-right: 20px;
	border: solid 1px #CACACA;
	background: url(images/email_head_bg.png) repeat-x top;
}

* html .box_title_grad { /* IE6 Bug fix - Make the box smaller so that it fits and does not push down below other elements */
	width: 760px;
}

.blue { /* Email alert background */
	background-color: #339bd4; /* Blue */
	margin-left: -10px;
	margin-right: -10px;
	text-align: center;
	color: #FFFFFF;
	padding: 10px;
	height: 120px;
}

.green { /* Email alert background */
	background-color: #97c93c; /* Green */
	margin-left: -10px;
	margin-right: -10px;
	text-align: center;
	color: #FFFFFF;
	padding: 10px;
	height: 120px;
}

.button_style { /* Email alert button style */
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(/images/button.png);
	background-repeat:no-repeat;
	width:212px;
	height:38px;
	text-align: center;
	font-weight:bold;
}

a.blue_text {
		color: #339bd4;
		text-decoration: none;
}

a.green_text {
		color: #97c93c;;
		text-decoration: none;
}

h2.box_title {
	color: #FFFFFF !important;
}

/*.curve_box {   
	background-image: url(images/global/shadow.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-left: 6px;
	padding-bottom: 1px;
}

.curve_box p {
	border-left: solid 1px #cacaca;
	border-top: solid 1px #cacaca;
	padding-bottom: 30px;
}

.curve_box h2 {
	
}*/

.merectitle {
	font-style: normal;
	font-weight: normal;
	color: #000000;
	font-size: 20px;
	font-size: 1.5em;
}

.merecsection {
	font-size: 1.3em;
	color: #0000CC;
}

/* ............ End of Styles retained from NPC current sites ............. */







/* Leave 'a:visited' as the default */

/* Style the rollover effect of links, including those that have been affected by jQuery */
#content_area a:hover, #content_area a:focus,
#content_area a:visited:hover, #content_area a:visited:focus,
#content_area a.external_link:hover, #content_area a.external_link:focus,
#content_area a.pdf_link:hover, #content_area a.pdf_link:focus
#content_area .email_link:hover, #content_area .email_link:focus {
	text-decoration: none;
	color:#049c07; /* NPC like green */
}

.clear { /* Stop unwanted wrapping */
	clear:both;
}





/* /////////////////////////////////////////  Warning Box ///////////////////////////////////////// */

.warning_box { /* Create the outer box that contains all the paragraphs to be hidden */
	width: 550px;
	border: 2px solid #c00202; /* Red */
	padding-left: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

*:first-child+html .warning_box { /* IE7 bug fix - Move heading bg graphic to left so it fills whole area */
	padding-left: 0;
}

*:first-child+html .more { /* IE7 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;	
}

* html .warning_box { /* IE6 bug fix - Moves the warning heading further to the left */
	width: 545px;
	padding-left: 0;
}

* html .more { /* IE6 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;	
}

.warning_heading {
	background-color: #5a1515; /* Dark Red */
	background: url(images/global/warning_header.png) no-repeat right top;
	margin-left: -10px; /* Override padding on the warning box and return the heading colour to the left */
	height: 48px;
	padding-left: 10px;
	padding-top: 15px;
	color: #FFFFFF;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.1em;
}

*:first-child+html .warning_heading { /* IE7 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;
	margin-left: 0;
}

/* does not work /*
* html .warning_heading {
	min-height: 1px;
	margin-left: -50px;
}*/

/* /////////////////////////////////////////  End of Warning Box ///////////////////////////////////////// */



/* /////////////////////////////////////////  Welcome Box ///////////////////////////////////////// */

.welcome_box { /* Create the outer box that contains all the paragraphs to be hidden */
	width: 933px;
	border: 2px solid #c00202; /* Red */
	padding-left: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

*:first-child+html .welcome_box { /* IE7 bug fix - Move heading bg graphic to left so it fills whole area */
	padding-left: 0;
}

*:first-child+html .welcome.more { /* IE7 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;	
}

* html .welcome_box { /* IE6 bug fix - Moves the warning heading further to the left */
	width: 837px;
	padding-left: 10;
}

* html .welcome_more { /* IE6 bug fix - Add some padding to the text in the warning box */
	padding-left: 20px;	
	font-weight: normal;
}

* .welcome_standard { /* IE6 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;
	font: Arial, Helvetica, sans-serif;	
	font-weight: normal;
}
.welcome_heading {
	background-color: #5a1515; /* Dark Red */
	background: url(images/global/welcome_header2.png) no-repeat right top;
	margin-left: -10px; /* Override padding on the warning box and return the heading colour to the left */
	height: 48px;
	padding-left: 10px;
	padding-top: 15px;
	color: #FFFFFF;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.1em;
}

*:first-child+html .welcome_heading { /* IE7 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;
	margin-left: 0;
}

/* does not work /*
* html .warning_heading {
	min-height: 1px;
	margin-left: -50px;
}*/

/* /////////////////////////////////////////  End of £Wecome Box ///////////////////////////////////////// */



/* .....................  E-Learning Boxes ..................... */

.elearning_banner { /* e-learning sits at the top of the page */
	background: url(images/global/elearn_banner.jpg) no-repeat left top;
	height: 131px;
	margin-bottom: 20px;
	border: #CACACA solid 1px;
}

.elearning_banner p { /* contetn inside the elearning banner */
	padding: 10px;
	padding-left: 20px;
	width: 384px;
	color: #FFFFFF;
}

#content_area .elearning_banner h1 { 
	color: #FFFFFF;
	font-weight:bold;
	font-size: 1.1em;
	display: block;
	padding-left: 20px;
	margin-bottom: -20px;
}

*:first-child+html .elearning_banner h1 { /* IE7 bug fix - move the heading (and subsequent text) up and into the box */
	margin-top: 1px !important;
}

* html #content_area .elearning_banner h1 { /* IE6 bug fix - move the heading (and subsequent text) up and into the box */
	margin-top: 5px;
}

.elearning_box { /* Create the generic outer box that contains each e-learning topic */
	width: 340px;
	height: 200px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.elearning_box_case {
	background: url(images/global/elearn_col_case.png) no-repeat left top;
}

.elearning_box_data {
	background: url(images/global/elearn_col_data.png) no-repeat left top;
}

.elearning_box_key {
	background: url(images/global/elearn_col_key.png) no-repeat left top;
}

.elearning_box_implement {
	background: url(images/global/elearn_col_implement.png) no-repeat left top;
}

.elearning_box_quiz {
	background: url(images/global/elearn_col_quiz.png) no-repeat left top;
}

.elearning_box_patient {
	background: url(images/global/elearn_col_patient.png) no-repeat left top;
}

.elearning_box_less {
	background: url(images/global/elearn_col_less.png) no-repeat left top;
}

.elearning_box_heading { /* Style the generic heading of each box */
	height: 30px;
	padding-top: 12px;
	color: #FFFFFF;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.1em;
}

.elearning_text { /* Style the paragraph of text that sits above the e-learning topics */
	background-color: #f3f3f3;
	border: solid 1px #cacaca;
	padding: 10px;
	margin-bottom: 10px;
}

* html .elearning_text { /* IE6 bug - Fix the infamous 'peekaboo' bug - give 'layout' to the floating elements container
This makes the right hand column inside the elearning_text holder appear */
		height: 1px;
}

.elearning_text span { /* Style the paragraph heading */
	font-size: 1.2em;
	font-weight: bold;
}

.elearning_text p { /* Style the paragraph heading */
	padding: 0;
}

/* .....................  End of e-Learning Boxes ..................... */



#content_area .az { /* A to Z index styling - style the outer div */
	padding: 10px;
	border: 1px solid #CACACA;
	letter-spacing: 3px;
	width: 680px;
}

#content_area .az a { /* The anchor links inside the main div */
	color: #000000;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	padding: 2px;
}

#content_area .az a:hover {
	color: #FFFFFF !important;
	background-color: #0066CC;
}

#content_area p.az_index a {
	font-size: 1em;
	color: #000000;
	text-decoration: none;
	padding-left: 20px;
	background: url(images/global/triangle_arrow_icon.png) no-repeat left center;
}

#content_area p a.az_letter {
	color: #0066CC !important;
	font-size: 1.3em;
	font-weight: bold;
	padding-left: 0;
	background-image: none;
}

#content_area p a.az_letter:hover {
	color: #0066CC;
}



.merec_banner { /* e-learning sits at the top of the page */
	background: url(images/global/merec_banner.jpg) no-repeat left top;
	height: 131px;
	margin-bottom: 20px;
}

.merec_banner p { /* e-learning sits at the top of the page */
	padding: 10px;
	padding-left: 20px;
	width: 384px;
	color: #FFFFFF;
}

#content_area .merec_banner h1 { /* e-learning sits at the top of the page */
	color: #FFFFFF;
	font-weight:bold;
	font-size: 1.1em;
	display: block;
	padding-left: 20px;
	margin-bottom: -20px;
}

* html #content_area .merec_banner h1 { /* IE6 bug fix - move the heading (and subsequent text) up and into the box */
	margin-top: 5px;
}

new_meds_banner { /* Apply the merec banner etc. to the New Meds page then add the 'new_meds_banner' class to change the image to a New meds related jpg  */
	background: url(images/global/new_meds_banner.jpg) no-repeat left top;
}

.email_banner { /* email sits at the top of the page */
	margin-left: -20px;
	background: url(images/email_banner.jpg) no-repeat left top;
	height: 154px;
	margin-bottom: 20px;
}

.email_banner p { /* e-learning sits at the top of the page */
	padding: 10px;
	padding-left: 20px;
	width: 384px;
	color: #FFFFFF;
}
.email_text{
	height:120px;
	width:auto;
}
#content_area .email_banner h1 { /* e-learning sits at the top of the page */
	color: #FFFFFF;
	font-weight:bold;
	font-size: 1.1em;
	display: block;
	padding-left: 20px;
	margin-bottom: -20px;
}

* html #content_area .email_banner h1 { /* IE6 bug fix - move the heading (and subsequent text) up and into the box */
	margin-top: 5px;
}



.podcast_banner { /* email sits at the top of the page */
	margin-left: -20px;
	background: url(images/podcast_banner_2.jpg) no-repeat left top;
	height: 140px;
	margin-bottom: 5px;
}

.podcast_banner p { /* e-learning sits at the top of the page */
	padding: 10px;
	padding-left: 20px;
	width: 384px;
	color: #FFFFFF;
}

#content_area .podcast_banner h1 { /* e-learning sits at the top of the page */
	color: #FFFFFF;
	font-weight:bold;
	font-size: 1.1em;
	display: block;
	padding-left: 20px;
	margin-bottom: -20px;
}
.podcast_subscribe {
	background-image:url(images/podcast_subscribe.jpg); background-repeat:no-repeat;
	margin-left: -20px;
	padding-left: 20px;
	height:243px;
	width:780px;
	float:left;
	padding-bottom:20px;
}

.h1{
	font-family:Arial, Helvetica, sans-serif;
	size:20px;
	padding-left:5px;
	font-weight:bold;
	margin-top:25px;
	color:#FFFFFF;
}
.h2{
	font-family:Arial, Helvetica, sans-serif;
	size:16px;
	padding-left:5px;
	font-weight:bold;
	text-decoration:underline;
	margin-top:15px;
	color:#FFFFFF;

}
.podcast_subscribe p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
}

.podcast_box_text {
	width:45%;
	float:left;
	padding-left:5px;
}

* html #content_area .podcast_banner h1 { /* IE6 bug fix - move the heading (and subsequent text) up and into the box */
	margin-top: 5px;
}



.news_banner { /* email sits at the top of the page */
	margin-left: -20px;
	background: url(images/news_banner_2.jpg) no-repeat left top;
	height: 130px;
	margin-bottom: 20px;
}

.news_banner p { /* e-learning sits at the top of the page */
	padding: 10px;
	padding-left: 20px;
	width: 384px;
	color: #FFFFFF;
}

#content_area .news_banner h1 { /* e-learning sits at the top of the page */
	color: #FFFFFF;
	font-weight:bold;
	font-size: 1.1em;
	display: block;
	padding-left: 20px;
	margin-bottom: -20px;
}

* html #content_area .news_banner h1 { /* IE6 bug fix - move the heading (and subsequent text) up and into the box */
	margin-top: 5px;
}

/* News page - inner images */
.news_rss {
	height: 200px;
	background: url(images/news_rss.jpg) no-repeat;
	background-position: 190px 50px;
}

.news_rapid {
	height: 200px;
	background: url(images/news_rapid.jpg) no-repeat;
	background-position: 190px 50px;
}

.news_email {
	height: 200px;
	background: url(images/news_rapid.jpg) no-repeat;
	background-position: 190px 50px;
}

.news_discussion {
	height: 200px;
	background: url(images/news_discussion.jpg) no-repeat;
	background-position: 190px 50px;
}

.news_email {
	height: 200px;
	background: url(images/news_email.jpg) no-repeat;
	background-position: 190px 50px;
}

.news_podcasts {
	height: 200px;
	background: url(images/news_podcasts.jpg) no-repeat;
	background-position: 190px 50px;
}

.news_ecab {
	height: 200px;
	background: url(images/news_ecab.jpg) no-repeat;
	background-position: 190px 50px;
}


/* Accommodate the varies types of 2 column layouts */

.two_column_left_450px {
	width: 360px;
}

.two_column_right_450px {
	width: 450px;
	float: right;
}

.two_column_left_360px {
	width: 360px;
}

.two_column_right_360px {
	width: 360px;
	float: right;
}

/* Since the news page has a right hand column that is already floated to the right, we are using absolute positioning to set the location of the right hand column on the news page */
.two_column_right_news {
	width: 360px;
	position: absolute;
	left: 410px;
	top: 438px;
}

.two_column_left_250px {
	width: 250px;
}

.two_column_right_250px {
	width: 250px;
	float: right;
}

.email_alert_column_left {
	margin-left: -20px;
	width: 370px;
	border: solid 1px #CACACA;
	padding: 10px;
	float: left;
}

* html .email_alert_column_left { /* IE6 bug fix - move further to the right */
	margin-left: -15px; /* original position was: -20px */
}

.email_alert_column_right {
	margin-left: 8px;
	width: 370px;
	border: solid 1px #CACACA;
	padding: 10px;
	float: left;
}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< NPC staff to add their own classes here >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


.mereclft {
 float: left;
 margin-right: 0px;
 margin-left: 0px;
 margin-bottom: 5px;
 margin-top: 0px;
}
.merecrt {
 float: right;
 margin-left: 0px;
 margin-right: 0px;
 margin-bottom: 5px;
 margin-top: 0px;
}
.facilitator {
	font: Arial, Helvetica, sans serif;
	font_size: 13px;
	color: #3aa0d7
	border-bottom: 2px solid #3aa0d7;
	width: 550px;

}

/* /////////////////////////////////////////  Email alert Welcome Box ///////////////////////////////////////// */

.email_alert_welcome_box { /* Create the outer box that contains all the paragraphs to be hidden */
	width: 730px;
	border: 2px solid #c00202; /* Red */
	padding-left: -10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

*:first-child+html .email_alert_welcome_box { /* IE7 bug fix - Move heading bg graphic to left so it fills whole area */
	padding-left: -10;
}

*:first-child+html .email_alert_welcome_more { /* IE7 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;	
}

* html .email_alert_welcome_box { /* IE6 bug fix - Moves the warning heading further to the left */
	width: 740px;
	padding-left: -30;
}

* html .email_alert_welcome_more { /* IE6 bug fix - Add some padding to the text in the warning box */
	padding-left: 20px;	
	font-weight: normal;
}

* .email_alert_welcome_standard { /* IE6 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;
	font: Arial, Helvetica, sans-serif;	
	font-weight: normal;
}
.email_alert_welcome_heading {
	background-color: #5a1515; /* Dark Red */
	background: url(images/global/welcome_header_email_alert.jpg) no-repeat right top;
	margin-left: -20px; /* Override padding on the warning box and return the heading colour to the left */
	height: 48px;
	padding-left: 25px;
	padding-top: 15px;
	color: #FFFFFF;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.1em;
}

*:first-child+html .email_alert_welcome_heading { /* IE7 bug fix - Add some padding to the text in the warning box */
	padding-left: 10px;
	margin-left: 0;
}

/* does not work /*
* html .warning_heading {
	min-height: 1px;
	margin-left: -50px;
}*/

/* /////////////////////////////////////////  End of email alert Welcome Box ///////////////////////////////////////// */





/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< End of NPC staff to add their own classes here >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */








/* ------------------------------------------------- Add these classes dynamically with jQuery --------------------------------------------------------- */
/* Be specific to the content area so that these aren't added to the left nav */

/* External links icon */
#content_area a.external_link {  /* This class is added by jQuery to all links that are not NPC */
	background: url(images/global/external_link_icon.png) no-repeat right center;
	padding-right: 13px;
}

/* PDF icon */
#content_area a.pdf_link {  /* This class is added by jQuery to all links to PDF files */
	background: url(images/global/pdf_icon.png) no-repeat right center;
	padding-right: 20px;
}

/* Powerpoint icon */
#content_area a.pp_link {  /* This class is added by jQuery to all links to PDF files */
	background: url(images/global/pp_icon.png) no-repeat right center;
	padding-right: 20px;
}

/* Word icon */
#content_area a.doc_link {  /* This class is added by jQuery to all links to PDF files */
	background: url(images/global/word_icon.png) no-repeat right center;
	padding-right: 20px;
}

/* Flash icon */
#content_area a.flash_link {  /* This class is added by jQuery to all links to PDF files */
	background: url(images/global/flash_icon.png) no-repeat right center;
	padding-right: 20px;
}


/* ------------- More Warning Box ------------- */
.more { /* Styles the questions in the Warning box - makes them bold */
	display: block;
	font-weight: bold;
	margin: 5px;
	margin-left: 0;
	padding: 3px;
	padding-right: 35px;
	padding-left: 0;
	
}
.welcome_more { /* Styles the questions in the welcome box - makes them bold */
	display: block;
	font-weight: bold;
	margin: 5px;
	margin-left: 0;
	padding: 3px;
	padding-right: 35px;
	padding-left:10px;
}
a.more:visited { /* Override default behaviour to turn the link to grey and instead make sure it remains white so can be seen */
	color: #308be1;
}

/* Shows hidden paragraphs when clicked */
p.toggle { /* These are the paragraphs of 'more information' that are initally hidden till the user clicks on them for more info */
	margin-top: -8px;
	padding: 3px;
	padding-right: 35px;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}

a.toggleLink {
	color: #308be1;
}

a.toggleLink:visited {
	color: #308be1;
}

#content_area a.toggleLink:hover {
	color: #308be1;
}

#content_area a.toggleLink:active {
	color: #308be1;
}

/* ------------- End of More Warning Box ------------- */



.events_banner1{
	height:33px;
	background-image:url(/images/global/purple_banner.jpg);
	background-repeat:repeat-x;
	font-size:18;
	font-weight:bold;
	color:#FFFFFF;
	padding-left:10px;
	padding-top:10px;
}
.events_banner2{
	height:33px;
	background-image:url(/images/global/lightblue_banner.jpg);
	background-repeat:repeat-x;
	font-size:18;
	font-weight:bold;
	color:#FFFFFF;
	padding-left:10px;
	padding-top:10px;
}
.events_banner3{
	height:33px;
	background-image:url(/images/global/darkblue_banner.jpg);
	background-repeat:repeat-x;
	font-size:18;
	font-weight:bold;
	color:#FFFFFF;
	padding-left:10px;
	padding-top:10px;
}
.events_banner4{
	height:33px;
	background-image:url(/images/global/red_banner.jpg);
	background-repeat:repeat-x;
	font-size:18;
	font-weight:bold;
	color:#FFFFFF;
	padding-left:10px;
	padding-top:10px;
}
.events_banner5{
	height:66px;
	background-image:url(/images/global/lightblue_doublebanner.jpg);
	background-repeat:repeat-x;
	font-size:18;
	font-weight:bold;
	color:#FFFFFF;
	padding-left:10px;
	padding-top:10px;
}




/* ------------------------------------------------------------ End of Add these classes with jQuery --------------------------------------------------- */


/* icon remover - e.g. PDF, external link */
#content_area a.overide_icon {  /* Overide the class added by jQuery */
	background: none !important;
}