BODY { 
	border:0; 
	margin:0; 
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;  
	color: #000000; 
	background-color: #FFFFFF;
	text-align: left;
} 

TABLE {
	font-size: 1em;
}

TH {
	font-weight: bold; 
	color: #FFFFFF;
	background-color: #000099;
	text-align: left; 
}	

TABLE caption {
	font-weight: bold;
	text-align: left;
}

/* use for page title */
H1 {
	font-size: 1.8em; 
	background-color: white;
	color: #000099;
	font-weight: bold;
	padding: 0px 5px;
	margin: 0px;	
}

/* use for main section headings */
H2 {
	font-size: 1.1em; 
	background-color: inherit;
	color: #000099 ; 
	font-weight: bold ;
	margin: 3px 0 0 0 ;	
}

H2 a, h2 a:visited  {
	color: #000099 ; 
	text-decoration:none;
}
H2 a:hover {
	color: #000099 ; 
	text-decoration:underline;
}

/* use for sub-headings (e.g. product groups) */
H3 {
	font-size: 1em; 
	font-weight: bold; 
	margin: 0px;	
}	

/* use for sub-headings (e.g. subscription names) */
H4 {
	font-size: 1em; 
	font-weight: bold; 
	margin: 0px;	
}	

PRE {
	font-size: 1.2em;
}

p {
	margin: 7px 0px;	
}
/* use on paragraphs where only a small gap is required before and after. eg. after a sub-heading */
p.smallPara {
	margin: 5px 0px;	
}

/* use for text that needs to be smaller than normal. Use sparingly! */
.smalltext {
	font-size: 0.9em;
}

ul {  
	list-style-type: square;
}

ol {  
	list-style-type: lower-roman;
}


/* normal links */
a { 
/*	background-color: inherit; */
	color : #000000;
}
a:visited { 
/*	background-color: inherit; */
	color : #000000;
}
a:hover {  
/*	background-color: inherit; */
	color: #000099;
}

/* links without underlines - only use when it's clearly a link. e.g. in a menu */
.nounderline a { 
	text-decoration : none; 
}
.nounderline a:hover { 
	text-decoration : underline; 
}


/* IDs (specific regions of the page) */
/* NB. Will probably not be necessary in portal as positioning of elements will be determined by other means (e.g. iframes) */

#topMenu { 
	font-size: 0.9em;
	position: absolute; 
	top: 5px;
	left: 80px;
}

#mainContent {
	margin: 0 0 0 0px;
	padding: 5px 5px 0 5px;
}

#layout {
	margin-left: 0;	
}
#content {
	padding-left: 5px;
}

#sidebarCol {
	width: 180px;
}

#navunderline {
	border-top: 1px solid #666666; 
}

/* main logo banner/header */
#header {
	padding: 0px; 
	margin: 0;
	height: 69px; 
	color: white;
	background-color: #000099; 
}
.headerWarn {
	padding: 0px; 
	margin: 0;
	height: 69px; 
	color: white;
	background-color: #CC0000; 
}

#logo {
	margin:5px 10px;
}

/* use for links in main logo banner/header */
a.topMenu, a.topMenu:visited {
	background-color: #000099; 
	color : white; 
	text-decoration : none; 
	font-weight : bold;
	margin: 0px 10px;
	font-size: 0.9em;
}
a.topMenu:hover { 
	text-decoration : underline; 
	color : white; 
}

a.topMenuWarn, a.topMenuWarn:visited {
	background-color: #CC0000; 
	color : white; 
	text-decoration : none; 
	font-weight : bold;
	margin: 0px 10px;
	font-size: 0.9em;
}
a.topMenuWarn:hover { 
	background-color: #CC0000; 
	text-decoration : underline; 
	color : white; 
}

/* breadcrumb style */
.crumb {
	padding: 2px 0px 5px 5px;
}

/* Ensures the preceding <div> element stretches to contain the floated elements within them */
/* See http://www.complexspiral.com/publications/containing-floats/ */
.clearer {
	display: block; 
	clear: both; 
	margin: 0;
}

/***************************/
/* styles for main content */
/***************************/

/* use for main sections. eg. UK weather forecast  */
.mainSection {
	border: 1px solid #CCCCCC;
	padding: 3px;
}
/* use for main section headings */
.mainSectionHeading {
	background-color: #D6E797;
	height: 28px;
}
.mainSectionHeading h2 { margin:5px 0 0 6px; }

/* use for main weather section headings */
.weatherSectionHeading {
	background-color: #C3C3DD;
	height: 28px;
}
.weatherSectionHeading h2 { padding:5px 0 0 6px; }

/* Use to float an image to the right of some text */
.panelImageRight  {
	float:right; 
	padding: 0; 
	margin:0;
}
/* Use to float an image to the right of some text */
.panelImageLeft  {
	float:left; 
	padding: 0; 
	margin:0;
}

/* Use for blue/green panels of text/images (see style guide) */
.bl_panel, .bl_panelPad { background-color: #E2E2EE; }
.grn_panel, .grn_panelPad { background-color: #E2E8CE; line-height: 1.1em;}
.bl_panelPad, .grn_panelPad { padding: 2px 5px; }


/* use for non-tabular groups of items. e.g. service index page */
.groupPanel {	
	background-color: #CCCCFF; 
	color: black; 	
	padding: 0px 0px;
	margin: 10px 10px 0px 0px;
	border-top: 1px solid #000099; 
	border-left: 1px solid #000099;
}

.groupHeading, .groupHeading a, .groupHeading a:visited, .groupHeading a.hover,  .groupHeading h2 {
	padding: 3px;
	background-color: #C3C3DD;
	margin: 0px;
	color: #000099;
	font-weight: bold;
	text-decoration: none;
}
.groupHeading a:hover {
	text-decoration: underline;
}

/* use for main groups of products */
.groupItem {
	background-color: #CCCCFF;
	color: black; 	
	border-top: 1px solid white;
	border-bottom: 1px solid #000099;
	border-left: 1px solid white;
	border-right: 1px solid #000099;
	padding: 4px;	
}
.groupItem a {
	text-decoration: none;
}
.groupItem a:hover {
	text-decoration: underline;
}

/* use for headings of sub-groups of products. e.g. pressure charts */
.subGroupHeading, .subGroupHeading a, .subGroupHeading a:visited {
	font-weight: bold;
	text-decoration: none;
}
.subGroupHeading a:hover {
	text-decoration: underline;
}

/* use for sub-groups of products */
.subGroupItem {
	border: 0px; 
	padding: 2px 0px 2px 8px;
	font-weight: normal;
}


/* use for old-style tabular data (no borders on table cells) */
.tableColumn {
	background-color: #CCCCFF;
	color: inherit; 	
}
.tableRow {
	background-color: #FFFFCC;
	color: inherit; 	
}
.tableJoint {
	background-color: #CCCCCC;
	color: inherit; 	
}
.tableBorder {  
/*	border-top: 1px solid #000099; 
	border-left: 1px solid #000099; */
	border-top: 1px solid #969AE4; 
	border-left: 1px solid #969AE4;
}

/* use for new-style tabular data (borders on table cells) */
.tablecellBorder, 
.tablecellBorderWhiteHighlight,
.tablecellBorderRedHighlight, 
.tablecellBorderGreenHighlight, 
.tablecellBorderGreyHighlight,
.sequenceCell {
	border-bottom: 1px solid #969AE4;
	border-right: 1px solid #969AE4;
}
.tablecellNoBorder {
	background-color: #E2E2EE;
	color: inherit; 	
}
.tablecellBorder {
	background-color: #E2E2EE;
	color: inherit; 	
}
.tablecellBorderWhiteHighlight {
	background-color: #FFFFFF;
	color: inherit; 	
}
.tablecellBorderRedHighlight {
	background-color: #FFCCCC;
	color: inherit; 	
}
.tablecellBorderGreenHighlight {
	background-color: #CCFF99;
	color: inherit; 	
}
.tablecellBorderGreyHighlight {
	background-color: #CCCCCC;
	color: inherit; 	
}

/*.tablecellNoLeftBorder, .tablecellNoLeftBorderWhite {
	border-top: 1px solid white;
	border-bottom: 1px solid #000099;
	border-right: 1px solid #000099;
}
.tablecellNoLeftBorder { 
	background-color: #CCCCFF;
	color: inherit; 	
}

.tablecellNoRightBorder, .tablecellNoRightBorderWhite { 
	border-top: 1px solid white; 
	border-left: 1px solid white; 
	border-bottom: 1px solid #000099;
}
.tablecellNoRightBorder {
	background-color: #CCCCFF;
	color: inherit; 	
}
*/

/* use for animation/sequence indicators */
.sequenceCell { 
	background-color: #CCCCFF; 
	color: inherit; 	
	padding: 0px;
}

.sequenceLink {
	margin-right: 7px;
	margin-left: 7px; 
}

.grey-bottom {
	border-bottom: 1px solid #CCCCCC;
}

/* use to highlight blocks of text in green */
.highlight {
	background-color:#CCFF33;
	color: inherit; 	
	border: 1px solid #99CC00;
	padding: 3px;
}

/* use to highlight blocks of text in blue */
.highlightBlue {
	background-color:#CCCCFF;
	color: inherit; 	
	border: 1px solid #000099;
	padding: 3px;
}

/* use for error messages */
.error {  
	background-color: inherit; 	
	color: #FF0000;
	font-weight: bold; 
}

/* heading style for flash warnings */
.warning, .warning h2 {  
	background-color: #FF0000;
	color: #FFFFFF; 
	font-weight: bold;
	padding: 3px;
}

/* style for flash warning text */
.warningBg {  
	background-color: #FFCCCC;
	color: inherit; 	
}

/* heading style for advance warnings */
.advwarning {  
	background-color: #FFCC66;
	color: black; 	
	font-weight: bold;
	padding: 3px;
}

/* heading style for heat-health warnings */
.hhwarning {  
	background-color: #CCCCFF;
	color: black; 	
	padding: 3px;
}

.hhlevel1 {	
    background-color: #CCCCFF;
	padding: 3px;
}

.hhlevel2 { 
    background-color: #FFCC66;
	padding: 3px;
}

.hhlevel3 { 
    background-color: #FFCCCC;
	padding: 3px;
}


/* Used to hide accessibility links. eg. skip navigation */
/* Use a.skiplink for link on blue background */
a.skiplink, a.skiplink:visited {color: #000099;}
a.skiplink:hover, a.skiplink:focus, a.skiplink:active {color: white !important;}
/* Use a.skiplinkW for link on white background */
a.skiplinkW, a.skiplinkW:visited {color: white;}
a.skiplinkW:focus, a.skiplinkW:active {color: #000099 !important;}

/* Use for animation progress bar */
.progressbar {
	font-weight: bold;
	font-size: 0.9em;
	background-color: #FFFFFF;
	color: black;
	border-left:1px solid #666666;
	border-bottom:1px solid #666666;
}
a.progressbar {
	text-decoration: underline;	
}

.progressbarSel {
	font-weight: bold;
	font-size: 0.9em;
	background-color: #D6E797;
	color: black;
	border-left:1px solid #666666;
	border-bottom:1px solid #666666;
}
a.progressbarSel {
	text-decoration: none;	
}

.padding5 {
	padding: 5px;
}

.formNoMargin {
	margin-top:0;
	margin-bottom:0;
}

.dayRow {
	background-color: white;
}

.borderTop {
	border-top: 1px solid #969AE4;
}
.borderBottom {
	border-bottom: 1px solid #969AE4;
}
.borderLeft {
	border-left: 1px solid #969AE4;
}
.borderRight {
	border-right: 1px solid #969AE4;
}
.nightRow {
	background-color: #dddddd;
}

.warningFlash {
	background-color: #FFCCCC;
	padding: 3px;
}

.warningEarly {
	background-color: #FFCC66;
	padding: 3px;
}

/* Sitemap styles */
.sitemapChannel {
	padding: 3px 20px 3px 3px;
	font-weight:bold;
	color: #CCFF33;
	background-color: #000099;
}
.sitemapChannel a, .sitemapChannel a:hover, .sitemapChannel a:visited {
	color: #CCFF33;
}

.sitemapSublevel1 {
	color: #000000;
	font-weight: bold;
	padding: 3px 20px 3px 3px;
	background-color: #d0d0d0; 
	border-top: 1px solid gray; 
}

.sitemapSublevel2 {
	padding: 3px 20px 3px 3px;
	font-weight: bold; 
/*	background-color: #E6E6E6;
*/	color: black;
	border-top: 1px solid gray; 
}

.sitemapSublevel3 {
	padding: 3px 20px 3px 3px;
	border-top: 1px solid gray; 
	border-right: 1px solid gray;
}

.sitemapBorder {
	border-top: 1px solid gray;
}

.printableLinks {
	border: 1px solid #CCCCCC;
	padding: 3px;
	background-color:#EEEEEE;
}
.greyText {
	color: #666666;
}

/* Styles for search box */
.searchForm {margin:10px 10px 0 0;}
.searchBox {margin:3px 0 0 10px; font-size:1em; }

/* Styles for buttons */
.grnButton {
	display:inline;
	border: 1px solid #A7C24F;
	font-weight: bold;
	margin: 3px; 
	float:left;
}
.grnButton a {
	background-color: #CCFF33;
	text-decoration: none;
}
.grnButton a:hover {
	background-color: #D6E797;
	text-decoration: underline;	
}

th.whiteBackground, td.whiteBackground {
	color: black;	
}
th.tablecellBorderWhiteHighlight {
	color: black;	
	font-weight: normal;
}
#mobshowonly { display: none; }

.tableHeadLt {background-color: #C3C3DD; border-right: 1px solid #969AE4; padding-bottom: 6px;}