/* Neath AQ Website stylesheet - June 2007 - sam.hope-evans@erg.kcl.ac.uk */
/* coded for XHTML transitional 1.0 and WAI AA */
/* all elements are position: static by default - flow in document order cannot be offset with top & left properties  */
/* position: relative elements flow in document order but can also be offset with top & left properties */
/* position: absolute elements are removed from the document flow and stay in place on screen resize and can be positioned anywhere */

/* HTML tags */
/* reset html margins, paddings and border to 0 for browser consistency*/
/* NEATH uses Verdana - font size to 1em/100% of user's current browser preferences  -*/
/* make sure browser DOCTYPE is triggered into Standards Mode for IE 6.0 or font cascade won't work*/

body, html { font-size:100%; font-family:verdana,arial,helvetica,sans-serif; margin: 0px; padding: 0px; border: 0px; background-color: #fff; color:#000000; font-weight: normal;  }

a { color: #377FBD; text-decoration: none; }
a:link { color: #377FBD; text-decoration: none;}
a:visited { color: #377FBD; text-decoration: none;}
a:hover { color: #377FBD; text-decoration: underline;}
a:focus { text-decoration: underline !important;}

hr { clear: both; color: #dadada; background-color: #dadada; height: 1px; border: 0;}
form { margin: 0; padding: 0; }
 
/* containers */

div#topcontainer { position: relative; width:780px; padding: 0; margin: 20px auto; border: 0; }

div#header { font-size: 0.65em; font-weight: bold !important; width:780px; margin: 0; padding: 0; height: auto; border: 0; background-color: #ffffff; }


/* breadcrumbs to see where user is in site */

div#crumbTrail { font-size: 0.70em; font-weight: bold; height: 35px; background-position: 0% 0%; background-repeat: repeat-x; color:#377FBD; border:0; padding: 4px 0 0 0; margin:0;}
div#crumbTrail ul { list-style:none; padding:0; margin:0;}
div#crumbTrail li { display:block !important; padding:0; margin:0; }
div#crumbTrail li img#language { float: left; border: 0; margin: 0 5px 0 0;}
div#crumbTrail a { text-decoration:none; color:#377FBD; }
div#crumbTrail a:link { text-decoration:none;}
div#crumbTrail a:hover { text-decoration:underline; color:#336699;}

/* container holding main content and right hand blocks */

div#main-container { font-size: 0.9em !important; font-family: arial, verdana, helvetica, sans-serif !important; float:right; width:590px; /*height: 100%;*/
 margin: 0 0 10px 0; padding: 0 0 5px 0; color:#000000; /*background-color:#FFFFFF;*/ }

/* must be set as a relative element so the map dots are positioned from its top XY - stops map shifting underneath dot on screen resize */
div#main-content { position: relative; float: left; width: 67%; margin: 0; padding: 0; height: 100%; background-color: #E7EFEF; 
font-size: 0.75em; color: #000000; border-right: 1px solid #dadada; border-left: 1px solid #dadada;  }

/* map dots */
div.mapdot { border: 0; position: absolute; width:12px; height:12px; }
div.mapdot a.maplink { border: 0; display: block; text-align: center;}
div.mapdot a.maplink:focus, div.mapdot a.maplink:hover, div.mapdot a.maplink:active { width: 100%; 
border: 0; }
div.mapdot img { border: 0; }


/* zoom link  - positioned absolute to the main content*/
div.zoom { position:absolute; z-index: 5; padding: 3px; background-color: #FFCE63; text-transform: uppercase;
border: 1px dashed #377FBD; text-align: center;  }
div.zoom:hover { border: 1px solid #377FBD; }
div.zoom a { width: 100%; display: block; }



/* right container to hold all the navigation menus in place - WIDTH MUST BE 175px TO STOP IE 6.0 BUG WITH CORNER GFX */
/* all extra styles in nav-menus.css */
div#right-container-holder { float: right; width: 175px; margin: 0; padding: 0; border: 0; }


/* containers for left and right sections */
/* width in pixels to match width of map image */
div#main-content div#left-map-section { float: left; width: 230px; height: 100%; min-height: 100%; border: 0 !important; margin: 0; padding: 0 0 10px 0; }
div#main-content div#left-map-section  p { margin: 0; border: 0; }
/* use relative width instead to make best use of space IE 6.0*/
div#main-content div#right-map-section { float: left; /*width: 330px;*/ width: 58%; height: 100%; min-height: 100%; border: 0 !important; margin: 0 0 0 10px; padding: 0 0 10px 0; }
div#main-content div#right-map-section p { margin: 0; border: 0; }
div#main-content div#right-map-section a#graph-button { display: block; color: #000000; text-decoration: none; text-align: center; width: 200px; cursor: pointer; border: 1px solid #377FBD; margin: 10px; padding: 2px; background-image: url(../images/silver-button.gif); background-repeat: repeat-x;}


/* header for top curved edge of the main area  - add border to fill out*/
div#main-content-header { z-index: 1; border-left: 2px solid #377FBD; clear: both; width: 67%; height: 25px; position: relative; top: 0; left: 0; margin: 0; padding: 0;  background-position: top right; background-repeat: no-repeat; background-color: #377FBD; background-image: url(../images/curve-top.gif); }
div#main-content-header p.title { border: 0; margin: 0; padding: 5px; font-size: 1em !important; font-weight: bold; color: #ffffff; background-color: transparent;}

/* footer for bottom curved edge of the main area */
div#main-content-footer { border-right: 2px solid #377FBD; position: relative; float: left; width: 67%; height: 25px; top: 0; left: 0; margin: 0; padding: 0;  background-position: bottom left; background-repeat: no-repeat; background-color: #377FBD; background-image: url(../images/curve-bot.gif); }

/* footer div*/

div#footer-container {font-size: 0.7em; height: auto; clear: both; padding: 0; margin: 5px 0 0 0; border: 0; }

/* main content section styles */

/* text formatting */

div#main-content p { padding: 5px; margin: 0; }
div#main-content p.smalll-text { border: 0; margin: 0; padding: 5px; font-size: 0.7em !important;}
div#main-content p.message { padding-top: 15px; }
div#main-content p#timestamp { clear: left; margin: 10px 0 0 0; padding: 5px 5px 0 5px; font-style: italic; }
div#main-content p.back-link { margin: 10px; padding: 0; }
div#main-content p.back-link a { margin: 0; padding: 0; color: #377FBD !important; font-weight: bold;}

div#main-content span.warning { color: #FF0000; font-weight: bold;}

/* keep superscript and subscript text from breaking the line-spacing */
div#main-content sub { position: relative; font-size: 0.8em; vertical-align: baseline;  bottom: 0.00em; }
div#main-content sup  { position: relative; font-size: 0.8em; vertical-align: baseline; bottom: 0.25em; }

/* images */
div#main-content img { border: 0; }
div#main-content img#homepagemap { border: 1px solid #377FBD; margin: 10px 10px 10px 0; float: left; z-index: 0;}
div#main-content img#processpagemap { display: block; border: 1px solid #377FBD; margin: 10px 10px 10px 0; float: left;}
div#main-content img#mapkey { border: 0; margin: 10px 20px 10px 0; float: left;}
div#main-content img#photos { float: right; margin: 10px; padding: 0; border: 1px solid #377FBD; }
div#main-content img#site-plan { float: right; width: 175px; margin: 0 0 0 5px; height: 125px; padding: 0; border: 0;}
div#main-content img#logo { border: 1px solid #377FBD; margin: 10px 0 0 0; padding: 0; }
div#main-content img#warning { border: 0; margin: 0 5px 0 0; padding: 0; float: left;}
div#main-content img#browsers { border: 1px solid #377FBD; margin: 5px; padding: 0; float: right;}
div#main-content img#lynx { border: 0; margin: 0 5px 0 0; padding: 0; float: left;}
div#main-content img#xhtml { border: 0; margin: 0 5px 0 0; padding: 0; float: left;}
div#main-content img#css { border: 0; margin: 0 5px 0 0; padding: 0; float: right;}
div#main-content img#wai { border: 0; margin: 0 5px 0 0; padding: 0; float: left;}
div#main-content img#windows { border: 0; margin: 0 5px 0 0; padding: 0; float: left;}
div#main-content img#mac { border: 0; margin: 0 5px 0 0; padding: 0; float: left;}
div#main-content img#multimap { border: 0; margin: 0; }
div#main-content img#server { border: 1px solid #377FBD; margin: 10px 0 0 10px;}
div#main-content img#timer { border: 0; margin: 10px 5px 0 0;}
div#main-content img#database { float: left; border: 0; margin: 0 5px 0 0;}
div#main-content img#reports { float: left; border: 0; margin: 0 5px 0 0;}
div#main-content img#register { float: left; border: 0; margin: 0 5px 0 0;}
div#main-content img#adobe { float: right; border: 0; margin: 0 5px 0 0;}
div#main-content img#graphs { float: left; border: 0; margin: 0 5px 0 0;}
div#main-content img#help { float: left; border: 0; margin: 0 5px 0 0;}
div#main-content img#help-icon { float: left; border: 0; margin:  0 5px 10px 0;}
div#main-content img#about { float: left; border: 0; margin: 0 5px 0 0;}

div#main-content img#rati { float: left; border: 0; margin: 5px;}
div#main-content img#download { float: left; border: 0; margin: 0 5px 10px 5px;}
div#main-content img#xml { float: left; border: 0; margin: 0 5px 10px 5px;}
div#main-content img#guide-icon { float: left; border: 0; margin: 0 5px 0 0;}
div#main-content img#links { float: left; border: 0; margin: 0 5px 0 0;}
div#main-content img#sitemap { float: left; border: 0; margin: 0 5px 0 0;}


/* section tabs */
div#main-content ul#main-tabs { text-align: right; float: right; height: 20px; border: 0; margin: 0 25px 5px 0; padding: 2px 0 5px 0;}
div#main-content ul#main-tabs li { width: 100%; list-style-type: none; display: inline; margin: 0 0 10px 5px; padding: 5px; background-color: #E7EFEF !important; }
div#main-content ul#main-tabs li a { color: #377FBD; font-size: 1.2em; font-weight: bold; width: 100%;  padding: 3px; border-right:1px dashed #377FBD !important; 
border-bottom:1px dashed #377FBD !important; border-left:1px dashed #377FBD !important;}
div#main-content ul#main-tabs li a:hover { background-color: #FFCE63 !important;  border-right:1px solid #377FBD !important; border-bottom:1px solid #377FBD !important; border-left:1px solid #377FBD !important;text-decoration: none;}
div#main-content ul#main-tabs li a:focus { background-color: #FFCE63 !important;  border-right:1px solid #377FBD !important; border-bottom:1px solid #377FBD !important; border-left:1px solid #377FBD !important;text-decoration: none;}

/* css highlight trick */
body#bulletins-page ul#main-tabs li a.bulletins { background-color: #FFCE63 !important; text-decoration: none; border-right:1px solid #377FBD !important; border-bottom:1px solid #377FBD !important; border-left:1px solid #377FBD !important;}
body#details-page ul#main-tabs li a.details { background-color: #FFCE63 !important; text-decoration: none; border-right:1px solid #377FBD !important; border-bottom:1px solid #377FBD !important; border-left:1px solid #377FBD !important;}
body#stats-page ul#main-tabs li a.stats { background-color: #FFCE63 !important; text-decoration: none; border-right:1px solid #377FBD !important; border-bottom:1px solid #377FBD !important; border-left:1px solid #377FBD !important;}


/* standard list */

div#main-content ul.kclstyle { clear: both;  margin: 10px; padding: 0 0 0 25px; }
div#main-content ul.kclstyle li { margin: 0; padding: 0 0 0 10px; list-style-image: url(../images/bullet.gif); }
div#main-content ul.kclstyle li a { margin: 0; padding: 0; color: #377FBD !important; font-weight: bold; }

div#main-content ul.kclstyle li.sub-nav { margin: 0 0 0 35px; padding: 0 0 0 10px; list-style-image: url(../images/bullet2.gif); }

/* tables*/

div#main-content table#bulletin-details { width: 90%; margin: 15px 2px 10px 0; padding: 0; float: right;  vertical-align: top; background-color: #E7EFEF; border: 1px solid #377FBD; border-collapse: collapse; border-spacing: 0;}
div#main-content table#bulletin-details th { /*width: 50%;*/ font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table#bulletin-details th a {color: #FFCE63 !important; }
div#main-content table#bulletin-details td {font-size: 1.0em; padding: 5px; border: 0; background-color: #ffffff; }
div#main-content table#bulletin-details td a { color: #377FBD; }
div#main-content table#bulletin-details tr.centre td { text-align: center !important; font-style: italic;}
div#main-content table#bulletin-details tr.bold td { font-weight: bold; }
div#main-content table#bulletin-details td.bold { font-weight: bold; }
div#main-content table#bulletin-details tr.padding-top td { padding-top: 15px; }
div#main-content table#bulletin-details tr.padding-top-25 td { padding-top: 25px; }
div#main-content table#bulletin-details tr.padding-bottom td { padding-bottom: 15px; }

div#main-content table#bulletin-details img#multimap { border: 0; margin: 0; padding: 0; }
div#main-content table#bulletin-details img.sitephoto { border: 1px solid #377FBD !important; margin: 0; padding: 0; }
div#main-content table#bulletin-details input.submit { cursor: pointer; width: 70px; margin: 0; padding: 0; border: 1px solid #377FBD; background-color: #e8f4f6; background-image: url(../images/silver-button.gif); background-repeat: repeat-x;}
div#main-content table#bulletin-details input#submit { cursor: pointer; width: 70px; margin: 0; padding: 0; border: 1px solid #377FBD; background-color: #e8f4f6; background-image: url(../images/silver-button.gif); background-repeat: repeat-x;}
div#main-content table#bulletin-details input#submit-change { cursor: pointer; width: 70px; margin: 0; padding: 0; border: 1px solid #377FBD; background-color: #e8f4f6; background-image: url(../images/silver-button.gif); background-repeat: repeat-x;}
div#main-content table#bulletin-details input#bulletindate { width: 70px; }
div#main-content table#bulletin-details input.radio { display: inline; margin: 0 5px 0 10px; padding: 0; vertical-align: middle; }
div#main-content table#bulletin-details input#exceedance { margin: 0 5px 0 15px; }

div#main-content table#bulletin-details select.sites { display: inline; margin: 0 5px 0 10px; padding: 0; 
/* limit width to stop container overflow with long site names */ width: 240px; }
div#main-content table#bulletin-details select#mapview { margin: 10px 0 10px 0; }
div#main-content table#bulletin-details select#statyear { width: 110px; }
div#main-content table#bulletin-details select#objective { margin: 10px 0 10px 0; width: 312px; }
div#main-content table#bulletin-details select.exceedance { margin: 3px; }

div#main-content table#bulletin-site-aq { width: 90%; margin: 15px 2px 10px 0; padding: 0; float: left;  vertical-align: top; border: 1px solid #E7EFEF; border-collapse: collapse; border-spacing: 0;}
div#main-content table#bulletin-site-aq th { /*width: 50%;*/ font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #E7EFEF;}
div#main-content table#bulletin-site-aq td { font-size: 1.0em; padding: 5px; border: 1px solid #E7EFEF !important; background-color: #ffffff; }


div#main-content table.graph-tools {  width: 80%; margin: 15px 2px 10px 0; padding: 0; float: right; clear: left; vertical-align: top; background-color: #E7EFEF; border: 1px solid #377FBD; border-collapse: collapse; border-spacing: 0;}
div#main-content table.graph-tools th { width: 50%; font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table.graph-tools td {font-size: 1.0em; padding: 5px; border: 0; background-color: #ffffff; }
div#main-content table.graph-tools td a { color: #377FBD; }
div#main-content table.graph-tools tr.bold td { font-weight: bold; }
div#main-content table.graph-tools td.bold { font-weight: bold; }
div#main-content table.graph-tools td.checkbox { padding: 3px 3px 3px 5px; text-align: center; vertical-align: top; font-size: 0.8em;}
div#main-content table.graph-tools tr.padding-top td { padding-top: 15px; }
div#main-content table.graph-tools tr.padding-top-25 td { padding-top: 25px; }
div#main-content table.graph-tools tr.padding-bottom td { padding-bottom: 15px; }

div#main-content table.graph-tools input.submit { cursor: pointer; width: 70px; margin: 0; padding: 0; border: 1px solid #377FBD; background-color: #e8f4f6; background-image: url(../images/silver-button.gif); background-repeat: repeat-x;}
div#main-content table.graph-tools input.button { width: 50px; cursor: pointer; border: 1px solid #377FBD; margin: 10px 0 0 0; padding: 0; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }
div#main-content table.graph-tools input.checkbox { border:0; margin: 10px 0 10px 0; padding: 0; }
div#main-content table.graph-tools input.plotbutton { width: 120px; height: 25px; cursor: pointer; border: 1px solid #377FBD; margin: 10px 0 20px 5px; padding: 2px; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }
div#main-content table.graph-tools img.graph { border: 0; margin: 0;}
div#main-content table.graph-tools select { display: inline; margin: 0 5px 0 5px; padding: 0; }
div#main-content table.graph-tools select.sites { display: inline; margin: 0 5px 0 5px; padding: 0; }
div#main-content table.graph-tools select.timeperiod { display: inline; margin: 0; padding: 0; }
div#main-content table.graph-tools span.warning { display: block; font-weight: bold; color: #FF0000; padding: 3px; }
div#main-content table.graph-tools a#back {  margin: 0 0 10px 5px; padding: 2px; width: 150px; height: 15px; display: block; color: #000000; text-decoration: none; text-align: center; cursor: pointer; border: 1px solid #377FBD; background-image: url(../images/silver-button.gif); background-repeat: repeat-x;} 


/*nested table*/
div#main-content table.graph-tools-sub { width: 80%; border: 1px solid #377FBD; padding: 0; margin: 20px 0 20px 0; border-spacing: 0; border-collapse: collapse; }
div#main-content table.graph-tools-sub th { font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table.graph-tools-sub td { padding: 3px; }
div#main-content table.graph-tools-sub td.no-padding { padding: 0; }
div#main-content table.graph-tools-sub tr.padding-bottom td { padding-bottom: 20px;}
div#main-content table.graph-tools-sub img { border: 0; }

/* key */

div#main-content table#keyaq {  margin: 10px; width: 250px; clear: both; background-color: #E7EFEF; border: 0; border-collapse: collapse; 
border-spacing: 0;}
div#main-content table#keyaq th { padding: 5px 2px 10px 2px; text-align: left; }
/* watch width of TD affects all table */
div#main-content table#keyaq td { padding: 2px 2px 2px 10px; }
div#main-content table#keyaq td.button { padding: 5px;}
div#main-content table#keyaq tr.padding-top td { padding-top: 10px; }
div#main-content table#keyaq a#bandsbutton { display: block; color: #000000; text-decoration: none; text-align: center; width: 200px; cursor: pointer; border: 1px solid #377FBD; margin: 10px 0 10px 5px; padding: 2px; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }
div#main-content table#keyaq a.aqmabutton { display: block; color: #000000; text-decoration: none; text-align: center; width: 200px; cursor: pointer; border: 1px solid #377FBD; margin: 0 0 10px 5px; padding: 2px; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }

div#main-content table#keyaq a#viewall { display: block; color: #000000; text-decoration: none; text-align: center; width: 120px; cursor: pointer; border: 1px solid #377FBD; margin: 10px 0 0 0; padding: 2px; background-image: url(../images/silver-button.gif); background-repeat: repeat-x;}
div#main-content table#keyaq a.showbutton { display: block; color: #000000; text-decoration: none; text-align: center; width: 15px; height: 15px; cursor: pointer; border: 1px dashed #377FBD; margin: 0; padding: 0; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }
div#main-content table#keyaq a.showbuttonselected { display: block; color: #000000; text-decoration: none; text-align: center; width: 15px; height: 15px; cursor: pointer; border: 2px solid #377FBD; margin-right: 0; padding: 0; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }


/*tables for 7 day graph pages on bulletins */

div#main-content table#graph-image {  background-color: #ffffff; clear: both; /*float: right;*/ width: 95%; margin: 10px 0 10px 5px; 
padding: 0; border: 1px solid #377FBD; border-spacing: 0; border-collapse: collapse; }
div#main-content table#graph-image td { padding: 0; }
div#main-content table#graph-image td.top { vertical-align: top; padding: 0; }
div#main-content table#graph-image td.grey { background-color: #e7e7e7; }
div#main-content table#graph-image img { border: 0;}
div#main-content table#graph-image img#graph { border: 0; margin: 0;}
div#main-content table#graph-image img.axis { border: 0; margin: 0; }
div#main-content table#graph-image img.seperate-graph { border: 0; margin: 0; }
div#main-content table#graph-image a.switchgraph { display: inline; color: #000000; text-decoration: none; text-align: center; width: 150px; height: 15px; cursor: pointer; border: 1px solid #377FBD; 
margin: 10px 10px 20px 10px; padding: 2px; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }

div#main-content table#graph-imagesub { width: 100%; margin: 0; padding: 0; border: 0; border-spacing: 0; border-collapse: collapse; }
div#main-content table#graph-imagesub th { width: 50%; font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table#graph-imagesub td { padding: 3px; border: 0; }
div#main-content table#graph-imagesub td.button { padding-left: 15px; }
div#main-content table#graph-imagesub th { padding-bottom: 20px; text-align: left; font-weight: bold; font-size: 1.3em; }
div#main-content table#graph-imagesub a.showbutton { display: block; color: #000000; text-decoration: none; text-align: center; width: 15px; height: 15px; cursor: pointer; border: 1px dashed #377FBD; margin: 0; padding: 0; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }
div#main-content table#graph-imagesub a.showbuttonselected { display: block; color: #000000; text-decoration: none; text-align: center; width: 15px; height: 15px; cursor: pointer; border: 2px solid #377FBD; margin-right: 0; padding: 0; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }
div#main-content table#graph-imagesub a.switchgraph { display: block; color: #000000; text-decoration: none; text-align: center; width: 150px; height: 15px; cursor: pointer; border: 1px solid #377FBD; margin: 0; padding: 2px; background-image: url(../images/silver-button.gif); background-repeat: repeat-x; }

/*table for report page */

div#main-content table#table-reports { clear: both;  width: 95%;  margin: 10px; padding: 0; vertical-align: top; border: 1px solid #377FBD; border-collapse: collapse; border-spacing: 0;}
div#main-content table#table-reports th { font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table#table-reports td { font-size: 1.0em; padding: 5px; border: 0; background-color: #ffffff; }
div#main-content table#table-reports tr.centre td { text-align: center; font-style: italic;}
div#main-content table#table-reports tr.padding-top td { padding-top: 15px; }
div#main-content table#table-reports select#reporttype { display: inline; margin: 0 5px 0 5px; padding: 0; }

/*table for guide pages */

div#main-content table#guide { clear: both;  width: 95%;  margin: 10px; padding: 0; vertical-align: top; border: 1px solid #377FBD; border-collapse: collapse; border-spacing: 0;}
div#main-content table#guide th { width: 50%; font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table#guide td { font-size: 1.0em; padding: 5px; border: 0; background-color: #ffffff; }
div#main-content table#guide tr.padding-top td { padding-top: 15px; }
div#main-content table#guide tr.bold td { font-weight: bold; }

div#main-content table.guide-sub { clear: both;  width: 95%;  margin: 10px; padding: 0; vertical-align: top; border: 1px solid #377FBD; border-collapse: collapse; border-spacing: 0;}
div#main-content table.guide-sub th { width: 50%; font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table.guide-sub td { vertical-align: top; font-size: 1.0em; padding: 5px; border: 0; background-color: #ffffff; }
div#main-content table.guide-sub tr.padding-top td { padding-top: 15px; }
div#main-content table.guide-sub tr.bold td { font-weight: bold; }

div#main-content table.guide-sub-bands { clear: both;  width: 95%;  margin: 5px; padding: 0; vertical-align: top; border: 1px solid #377FBD; border-collapse: collapse; border-spacing: 0;}
div#main-content table.guide-sub-bands th { font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table.guide-sub-bands td { vertical-align: top; font-size: 1.0em; padding: 5px; border: 1px solid #377FBD !important; background-color: #ffffff; }
div#main-content table.guide-sub-bands td.blue { background-color: #377FBD !important; color: #ffffff !important; font-weight: bold; vertical-align: middle; font-size: 1.3em !important;}
div#main-content table.guide-sub-bands tr.padding-top td { padding-top: 15px; }
div#main-content table.guide-sub-bands tr.bold td { font-weight: bold; }

div#main-content table.aqbands { clear: both;  width: 95%;  margin: 10px; padding: 0; vertical-align: top; border: 1px solid #377FBD; border-collapse: collapse; border-spacing: 0;}
div#main-content table.aqbands th {text-align: left;  width: 50%; font-size: 1.1em; padding: 3px; font-weight: bold; background-color: #377FBD; color: #ffffff; border: 1px solid #377FBD;}
div#main-content table.aqbands td { text-align: left; font-size: 1.0em; padding: 5px; border: 1px solid #377FBD; background-color: #ffffff; }
div#main-content table.aqbands td.no-border { text-align: left; font-size: 1.0em; padding: 5px; border: 0; background-color: #ffffff; }
div#main-content table.aqbands tr.padding-top td { padding-top: 15px; }
div#main-content table.aqbands tr.bold td { font-weight: bold; }


/* forms */
/* reset all forms to have no margin or padding */
div#main-content form { margin: 0; padding: 0; }
div#main-content form#site-form { width: 300px; background-color: #E7EFEF !important; margin: 0; padding: 0;}
div#main-content form#site-form select#site-list { width: auto;  margin: 10px 5px 10px 15px; padding: 0; border: 1px solid #dadada; }
div#main-content form#site-form select:focus { border: 1px solid #C78312 !important; }
div#main-content form#site-form input#submit { cursor: pointer; width: 50px; margin: 10px 0 10px 15px; padding: 0; border: 1px solid #377FBD; background-color: #e8f4f6; background-image: url(../images/silver-button.gif); background-repeat: repeat-x;}
div#main-content form#site-form input:focus { border: 1px solid #C78312 !important; }



/* shared styles */
.small-text { font-size: 0.8em;}
.red { color: #FF0000; }
.dashedborder { border: 1px dashed #377FBD; }
.dashedborder:hover { border: 1px dashed #377FBD !important; }
.spacer { clear: both; }
.spacer-left { clear: both;}
.spacer-right { clear: right;}
.accessibleicon { border: 0; margin: 0 10px 0 10px; }
.noborder { border: 0px !important; }
.top { vertical-align: top; }
.vmiddle { vertical-align: middle;}
.bottom { vertical-align: bottom;}
.centre { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.padding { padding: 5px; }
.padding-top { padding-top: 5px; }
.hidden { display: none; }
.blue { clear: both; background-color: #E7EFEF !important; }
/* not valid css 2? - use to break long words onto new lines if longer than container width */
/*.break-word { word-wrap: break-word; }*/