/* Herts & Beds stylesheet*/
body, html { font-size: 100%; line-height:1.2em; font-family: arial, verdana, helvetica, sans-serif; margin: 0; padding: 0;
border: 0; background-color: #ffffff; }
p { margin: 5px 0;}
p.no-padding-no-margin {padding:0; margin:0;}
p.logo { color:#1B4A7E; clear: both; font-size: 0.75em; padding:0; font-weight: bold;}
hr { color: #bfff51; background-color: #bfff51; height: 1px; border:0; margin: 10px 0; /*_margin: 5px 0;*/ }
blockquote { padding:0 0 0 12px; margin:12px 0 0 0; background:url(../../images/bg-quote.png) no-repeat; }
blockquote p { margin:2px 0;}
cite { font-size:.85em; margin:0; padding:0 0 0 6px;}
fieldset { padding:15px; border: 1px solid #C9E6F8; }
legend { color:#1B4A7E; padding:5px 3px 10px 3px; font-weight: bold;}
/* keep superscript and subscript text from breaking the line-spacing */
sub { position: relative; font-size: 0.8em; vertical-align: baseline; bottom: 0.00em; }
sup { position: relative; font-size: 0.8em; vertical-align: baseline; bottom: 0.25em; }
/* all text boxes to have yellow bg when selected */
input:focus { background-color: Yellow;}
/* this is the iframe for the google search results - CHECK MAX-HEIGHT TO STOP HUGE GAP when searched from SSL pages
REMOVE HEIGHT TO STOP RESULTS BEING CHOPPED OFF AT BOTTOM */
iframe { width: 450px; border: 0; min-height: 100% !important;
/* height: 100% !important; */ max-height: 100% !important; }
div.google { height: 100% !important; border: 0; }
/* alerts */
span.Low, span.Low a { color: #A3D06D !important; font-weight: bold;}
span.Low a:hover, span.Low a:focus { color: #A3D06D !important; font-weight: bold;}
span.Moderate, span.Moderate a { color: #F89C46 !important; font-weight: bold;}
span.Moderate a:hover, span.Moderate a:focus { color: #F89C46 !important; font-weight: bold;}
span.High, span.High a { color: #E33539 !important; font-weight: bold; }
span.High a:hover, span.High a:focus { color: #E33539 !important; font-weight: bold; }
span.VeryHigh, span.VeryHigh a { color: #B84B9A !important; font-weight: bold; }
span.VeryHigh a:hover, span.VeryHigh a:focus { color: #B84B9A !important; font-weight: bold; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
IMAGES & PHOTOS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
img { border: 0; }
img.border { border: 1px solid #dfffa8; }
img.thick-border { border: 3px solid #dfffa8 !important; margin-bottom: 10px !important; }
img.float-left-margin { border: 1px solid #dfffa8; float: left; margin-right: 5px }
img.float-left-margin-noborder { border: 0; float: left; margin-right: 5px }
img.float-right-margin { border: 1px solid #dfffa8; float: right; margin-left: 5px }
img.darker-border { border: 1px solid #bfff51; }
img.logo { border: 0; margin: 0; float: right; }
img.air-alert-icon { border: 0; margin: 0 5px 0 0; float: left; }
img.map { border: 1px solid #bfff51 !important; margin: 0; z-index: 0 !important;}
img.vertical-map { border: 0 !important; margin: 0; z-index: 0 !important;}
img.competition { margin: 10px 10px 2px 10px!important; }
/* ######## FLASH ##### */
object#flash-fade { margin: 0; padding: 0; border: 0; float: left; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
HEADINGS - CHECK FONT SIZE FOR RESIZING TEXT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1, h2, h3, h4, h5, h6 { font-size:1.8em; font-family: Arial Rounded MT, arial, verdana, helvetica, sans-serif; line-height:1.1em;
margin:5px 0; color: #1B4A7E;}
h1 { margin-bottom: 0;}
h1.page-title { font-size: 1.6em; display: inline;}
h1, h2 {margin-top: 0;}
h2 {font-size:1.2em;}
h3 {font-size:1.1em;}
h3.small {font-size:1.2em;}
h4 {font-size:1.1em;}
h5 {font-size:1.1em;}
h6 {font-size:1em;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
DEFAULT LINKS STYLE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a, a:link {color:#F89C46; text-decoration:none; font-weight: bold !important;}
a:visited {color:#F89C46; text-decoration: none;}
a:hover { color:#F89C46 !important; text-decoration: underline !important; background-color:#dfffa8;}
a:active {color:#F89C46; text-decoration: underline !important;}
a:focus {color:#F89C46; text-decoration: underline !important; background-color:#dfffa8;}
a.no-bg:hover { background-color: Transparent !important;}
a.no-bg:focus { background-color: Transparent !important;}
a.Low, a.Low:hover, a.Low:focus { color: #A3D06D !important; font-weight: bold;}
a.Moderate, a.Moderate:hover, a.Moderate:focus { color: #F89C46 !important; font-weight: bold;}
a.High, a.High:hover, a.High:focus { color: #E33539 !important; font-weight: bold; }
a.VeryHigh, a.VeryHigh:hover, a.VeryHigh:focus { color: #B84B9A !important; font-weight: bold; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
TOP NAVIGATION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#top-navigation { z-index: 1; background-color: #bfff51; background-image: url(../../images/bg-nav-green.png); background-repeat: no-repeat;
margin-top: 20px; margin-right: auto; margin-bottom: 0; margin-left: auto; width: 750px; padding: 0; position: relative;
font-weight: bold; /* MAKES TEXT RESIZE TOO BIG font-size: 1em;*/ font-family: Arial Rounded MT, arial, verdana, helvetica, sans-serif; }
/* div for curved corner */
div#top-navigation div#corner { position:absolute; top:0; right:0; z-index: 0; background-color: #dfffa8;
background-image: url(../../images/bg-nav-side-green.png); background-position: top right; background-repeat: no-repeat;
width:2%; height: 5px; padding: 0; }
div#top-navigation ul { margin: 0; padding: 10px; text-align: center; }
div#top-navigation ul li { color:#1B4A7E; margin: 0; padding: 3px; list-style-image: none; list-style-type: none; display: inline;}
div#top-navigation a, a:link { color:#1B4A7E; text-decoration:none;}
div#top-navigation a:hover, a:focus { color:#F89C46 !important; text-decoration: underline !important; background-color:#dfffa8; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
WEB BANNER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#photo-banner { border: 0; margin-top: 3px; margin-left:auto; margin-right:auto; width:750px; height: 141px; background-color:#ffffff;
position:relative;}
div#photo-banner img.web-banner { display:block; margin-right: 3px !important; border: 1px solid #bfff51 !important;}
div#feature-area-home { background-color:#bfff51; position:absolute; top:0; right:0; width:186px; height: 141px; padding: 0; margin: 0;}
div#feature-area-home img.features-image { margin: 0; border: 1px solid #bfff51 !important;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
BREADCRUMBS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#bread-crumbs { position: relative; width: 75%; height: 100%; margin: 0 0 10px 0; padding: 0; border: 0;
font-family: arial, verdana, helvetica, sans-serif; font-size: 0.8em; font-weight: bold;}
/* a:link overrides all links to orange unless specified */
div#bread-crumbs a, a:link { color:#F89C46; text-decoration:none;}
div#bread-crumbs a:visited {color:#F89C46; text-decoration: none;}
div#bread-crumbs a:hover {color:#F89C46 !important; text-decoration: underline !important;}
div#bread-crumbs a:active {color:#F89C46; text-decoration: underline !important;}
div#bread-crumbs a:focus {color:#F89C46; text-decoration: underline !important;}
div#bread-crumbs img.icon { margin: 0 10px 0 0; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
CONTENT CONTAINER - TWO COLUMN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* this has the dotted lines in bg set far left */
div#content-container-two-column {font-size: 0.8em; margin-top: 5px; margin-left:auto; margin-right:auto; padding:15px 15px 10px 15px;
width:718px; border:1px solid #dfffa8; background :url(../../images/bg-content-side.png) repeat-y 100% 0; position:relative; }
div#content-main-two-column { width:540px; float:left; }
div#content-main-two-column img { border: 0; margin: 0; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
MAP CONTAINER - POSITION COUNTIES FROM TOP LEFT OF THIS DIV
USE INLINE OVERRIDE FOR THE HEIGHT AND WIDTH FOR OTHER COUNTY MAPS - DEFAULT IS FOR SUSSEX
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#map-container { position: relative; border: 0; margin: 0; padding: 0; width: 535px; height: 211px; }
/* H&B districts */
/* set higher z-index */
div#map-container div.Bedford { display: none; }
div#map-container div.Bedford-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 5px; left: 23px; width:117px; height: 118px;
background: url(../../images/maps/HertsBeds/Bedford_Moderate.gif) 0 0 no-repeat; z-index: 25; }
div#map-container div.Bedford-High { position: absolute; border: 0; margin: 0; padding: 0; top: 5px; left: 23px; width:117px; height: 118px;
background: url(../../images/maps/HertsBeds/Bedford_High.gif) 0 0 no-repeat; z-index: 25; }
div#map-container div.Bedford-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 5px; left: 23px; width:117px; height: 118px;
background: url(../../images/maps/HertsBeds/Bedford_VeryHigh.gif) 0 0 no-repeat; z-index: 25; }
div#map-container div.Broxbourne { display: none; }
div#map-container div.Broxbourne-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 243px; left: 179px; width: 37px; height: 45px;
background: url(../../images/maps/HertsBeds/Broxbourne_Moderate.gif) 0 0 no-repeat; z-index: 11; }
div#map-container div.Broxbourne-High { position: absolute; border: 0; margin: 0; padding: 0; top: 243px; left: 179px; width: 37px; height: 45px;
background: url(../../images/maps/HertsBeds/Broxbourne_High.gif) 0 0 no-repeat; z-index: 11; }
div#map-container div.Broxbourne-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 243px; left: 179px; width: 37px; height: 45px;
background: url(../../images/maps/HertsBeds/Broxbourne_VeryHigh.gif) 0 0 no-repeat; z-index: 11; }
div#map-container div.Dacorum { display: none; }
div#map-container div.Dacorum-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 213px; left: 5px; width: 92px; height: 79px;
background: url(../../images/maps/HertsBeds/Dacorum_Moderate.gif) 0 0 no-repeat; z-index: 12; }
div#map-container div.Dacorum-High { position: absolute; border: 0; margin: 0; padding: 0; top: 213px; left: 5px; width: 92px; height: 79px;
background: url(../../images/maps/HertsBeds/Dacorum_High.gif) 0 0 no-repeat; z-index: 12; }
div#map-container div.Dacorum-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 213px; left: 5px; width: 92px; height: 79px;
background: url(../../images/maps/HertsBeds/Dacorum_VeryHigh.gif) 0 0 no-repeat; z-index: 12; }
div#map-container div.East_Herts { display: none; }
div#map-container div.East_Herts-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 149px; left: 160px; width: 105px; height: 116px;
background: url(../../images/maps/HertsBeds/East_Herts_Moderate.gif) 0 0 no-repeat; z-index: 17; }
div#map-container div.East_Herts-High { position: absolute; border: 0; margin: 0; padding: 0; top: 149px; left: 160px; width: 105px; height: 116px;
background: url(../../images/maps/HertsBeds/East_Herts_High.gif) 0 0 no-repeat; z-index: 17; }
div#map-container div.East_Herts-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 149px; left: 160px; width: 105px; height: 116px;
background: url(../../images/maps/HertsBeds/East_Herts_VeryHigh.gif) 0 0 no-repeat; z-index: 17; }
div#map-container div.Hertsmere { display: none; }
div#map-container div.Hertsmere-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 269px; left: 106px; width: 62px; height: 48px;
background: url(../../images/maps/HertsBeds/Hertsmere_Moderate.gif) 0 0 no-repeat; z-index: 14; }
div#map-container div.Hertsmere-High { position: absolute; border: 0; margin: 0; padding: 0; top: 269px; left: 106px; width: 62px; height: 48px;
background: url(../../images/maps/HertsBeds/Hertsmere_High.gif) 0 0 no-repeat; z-index: 14; }
div#map-container div.Hertsmere-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 269px; left: 106px; width: 62px; height: 48px;
background: url(../../images/maps/HertsBeds/Hertsmere_VeryHigh.gif) 0 0 no-repeat; z-index: 14; }
div#map-container div.Luton { display: none; }
div#map-container div.Luton-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 182px; left: 71px; width: 41px; height: 29px;
background: url(../../images/maps/HertsBeds/Luton_Moderate.gif) 0 0 no-repeat; z-index: 19; }
div#map-container div.Luton-High { position: absolute; border: 0; margin: 0; padding: 0; top: 182px; left: 71px; width: 41px; height: 29px;
background: url(../../images/maps/HertsBeds/Luton_High.gif) 0 0 no-repeat; z-index: 19; }
div#map-container div.Luton-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 182px; left: 71px; width: 41px; height: 29px;
background: url(../../images/maps/HertsBeds/Luton_VeryHigh.gif) 0 0 no-repeat; z-index: 19; }
/* set zindex lower than East Herts but higher than Mid Beds */
div#map-container div.North_Herts { display: none; }
div#map-container div.North_Herts-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 111px; left: 98px; width: 131px; height: 112px;
background: url(../../images/maps/HertsBeds/North_Herts_Moderate.gif) 0 0 no-repeat; z-index: 16; }
div#map-container div.North_Herts-High { position: absolute; border: 0; margin: 0; padding: 0; top: 111px; left: 98px; width: 131px; height: 112px;
background: url(../../images/maps/HertsBeds/North_Herts_High.gif) 0 0 no-repeat; z-index: 16; }
div#map-container div.North_Herts-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 111px; left: 98px; width: 131px; height: 112px;
background: url(../../images/maps/HertsBeds/North_Herts_VeryHigh.gif) 0 0 no-repeat; z-index: 16; }
div#map-container div.St_Albans { display: none; }
div#map-container div.St_Albans-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 217px; left: 88px; width: 54px; height: 69px;
background: url(../../images/maps/HertsBeds/St_Albans_Moderate.gif) 0 0 no-repeat; z-index: 20; }
div#map-container div.St_Albans-High { position: absolute; border: 0; margin: 0; padding: 0; top: 217px; left: 88px; width: 54px; height: 69px;
background: url(../../images/maps/HertsBeds/St_Albans_High.gif) 0 0 no-repeat; z-index: 20; }
div#map-container div.St_Albans-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 217px; left: 88px; width: 54px; height: 69px;
background: url(../../images/maps/HertsBeds/St_Albans_VeryHigh.gif) 0 0 no-repeat; z-index: 20; }
div#map-container div.Stevenage { display: none; }
div#map-container div.Stevenage-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 177px; left: 145px; width: 22px; height: 31px;
background: url(../../images/maps/HertsBeds/Stevenage_Moderate.gif) 0 0 no-repeat; z-index: 21; }
div#map-container div.Stevenage-High { position: absolute; border: 0; margin: 0; padding: 0; top: 177px; left: 145px; width: 22px; height: 31px;
background: url(../../images/maps/HertsBeds/Stevenage_High.gif) 0 0 no-repeat; z-index: 21; }
div#map-container div.Stevenage-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 177px; left: 145px; width: 22px; height: 31px;
background: url(../../images/maps/HertsBeds/Stevenage_VeryHigh.gif) 0 0 no-repeat; z-index: 21; }
div#map-container div.Three_Rivers { display: none; }
div#map-container div.Three_Rivers-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 267px; left: 65px; width: 47px; height: 59px;
background: url(../../images/maps/HertsBeds/Three_Rivers_Moderate.gif) 0 0 no-repeat; z-index: 22; }
div#map-container div.Three_Rivers-High { position: absolute; border: 0; margin: 0; padding: 0; top: 267px; left: 65px; width: 47px; height: 59px;
background: url(../../images/maps/HertsBeds/Three_Rivers_High.gif) 0 0 no-repeat; z-index: 22; }
div#map-container div.Three_Rivers-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 267px; left: 65px; width: 47px; height: 59px;
background: url(../../images/maps/HertsBeds/Three_Rivers_VeryHigh.gif) 0 0 no-repeat; z-index: 22; }
div#map-container div.Watford { display: none; }
div#map-container div.Watford-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 284px; left: 92px; width: 16px; height: 24px;
background: url(../../images/maps/HertsBeds/Watford_Moderate.gif) 0 0 no-repeat; z-index: 23; }
div#map-container div.Watford-High { position: absolute; border: 0; margin: 0; padding: 0;top: 284px; left: 92px; width: 16px; height: 24px;
background: url(../../images/maps/HertsBeds/Watford_High.gif) 0 0 no-repeat; z-index: 23; }
div#map-container div.Watford-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 284px; left: 92px; width: 16px; height: 24px;
background: url(../../images/maps/HertsBeds/Watford_VeryHigh.gif) 0 0 no-repeat; z-index: 23; }
div#map-container div.Welwyn_Hatfield { display: none; }
div#map-container div.Welwyn_Hatfield-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 211px; left: 134px; width: 49px; height: 74px;
background: url(../../images/maps/HertsBeds/Welwyn_Hatfield_Moderate.gif) 0 0 no-repeat; z-index: 24; }
div#map-container div.Welwyn_Hatfield-High { position: absolute; border: 0; margin: 0; padding: 0; top: 211px; left: 134px; width: 49px; height: 74px;
background: url(../../images/maps/HertsBeds/Welwyn_Hatfield_High.gif) 0 0 no-repeat; z-index: 24; }
div#map-container div.Welwyn_Hatfield-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 211px; left: 134px; width: 49px; height: 74px;
background: url(../../images/maps/HertsBeds/Welwyn_Hatfield_VeryHigh.gif) 0 0 no-repeat; z-index: 24; }
/* new county April 2009 */
div#map-container div.Central_Beds { display: none; }
div#map-container div.Central_Beds-Moderate { position: absolute; border: 0; margin: 0; padding: 0; top: 62px; left: 17px; width: 152px; height: 171px;
background: url(../../images/maps/HertsBeds/Central_Beds_Moderate.gif) 0 0 no-repeat; z-index: 13; }
div#map-container div.Central_Beds-High { position: absolute; border: 0; margin: 0; padding: 0; top: 62px; left: 17px; width: 152px; height: 171px;
background: url(../../images/maps/HertsBeds/Central_Beds_High.gif) 0 0 no-repeat; z-index: 13; }
div#map-container div.Central_Beds-VeryHigh { position: absolute; border: 0; margin: 0; padding: 0; top: 62px; left: 17px; width: 152px; height: 171px;
background: url(../../images/maps/HertsBeds/Central_Beds_VeryHigh.gif) 0 0 no-repeat; z-index: 13; }
/* map links to forecast - must be display: block for Firefox */
div#map-container a.county { display: block !important; border: 0; z-index: 1; color: Black !important; font-weight: bold; font-size: 0.8em;}
div#map-container a.county:hover { background-color: Transparent; border: 0;}
div#map-container a.county:active { background-color: Transparent;}
div#map-container a.county:focus { background-color: Transparent; border: 0;}
div#map-container a.county:visited { background-color: Transparent;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
CONTENT CONTAINER - SIDE TWO COLUMN - SEARCH, ALERT, NEWS AND LOGIN AREAS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* right hand container - make relative and place before breadcrumbs div - floating right */
div#content-side-two-column { overflow: inherit; height: auto; position: relative; top: 0; left: 8px;
float:right; width: 170px; border: 0; padding: 0 0 10px 0; margin: 0;}
/* make sure width is 100% of parent to use all space */
div.SearchArea { width: 100%; margin: 10px 0 0 0; padding: 0; border: 0; }
div.SearchArea input.search-input { float: left; display: inline; width: 110px; border: 1px solid #1B4A7E; margin: 0; }
div.SearchArea input.search-button { float: right; display: inline; width: 50px; border: 0; background-color: #1B4A7E;
padding: 3px; font-size: 0.8em; margin: 0; font-weight: bold; color: #fff;}
/* pollution alert - curved borders - no fill*/
div.Low-Alert-Top {background: url(../../images/alerts/dot-low.gif) 0 0 repeat-x; width: 100%; margin: 35px 0 10px 0;}
div.Low-Alert-Bottom {background: url(../../images/alerts/dot-low.gif) 0 100% repeat-x;}
div.Low-Alert-Left {background: url(../../images/alerts/dot-low.gif) 0 0 repeat-y;}
div.Low-Alert-Right {background: url(../../images/alerts/dot-low.gif) 100% 0 repeat-y;}
div.Low-Alert-BottomLeft {background: url(../../images/alerts/bl-low.gif) 0 100% no-repeat;}
div.Low-Alert-BottomRight {background: url(../../images/alerts/br-low.gif) 100% 100% no-repeat;}
div.Low-Alert-TopLeft {background: url(../../images/alerts/tl-low.gif) 0 0 no-repeat; }
div.Low-Alert-TopRight {background: url(../../images/alerts/tr-low.gif) 100% 0 no-repeat; padding:10px; font-size: 0.8em;}
div.Moderate-Alert-Top {background: url(../../images/alerts/dot-mod.gif) 0 0 repeat-x; width: 100%; margin: 35px 0 10px 0;}
div.Moderate-Alert-Bottom {background: url(../../images/alerts/dot-mod.gif) 0 100% repeat-x;}
div.Moderate-Alert-Left {background: url(../../images/alerts/dot-mod.gif) 0 0 repeat-y;}
div.Moderate-Alert-Right {background: url(../../images/alerts/dot-mod.gif) 100% 0 repeat-y;}
div.Moderate-Alert-BottomLeft {background: url(../../images/alerts/bl-mod.gif) 0 100% no-repeat;}
div.Moderate-Alert-BottomRight {background: url(../../images/alerts/br-mod.gif) 100% 100% no-repeat;}
div.Moderate-Alert-TopLeft {background: url(../../images/alerts/tl-mod.gif) 0 0 no-repeat; }
div.Moderate-Alert-TopRight {background: url(../../images/alerts/tr-mod.gif) 100% 0 no-repeat; padding:10px; font-size: 0.8em;}
div.High-Alert-Top {background: url(../../images/alerts/dot-high.gif) 0 0 repeat-x; width: 100%; margin: 35px 0 10px 0;}
div.High-Alert-Bottom {background: url(../../images/alerts/dot-high.gif) 0 100% repeat-x;}
div.High-Alert-Left {background: url(../../images/alerts/dot-high.gif) 0 0 repeat-y;}
div.High-Alert-Right {background: url(../../images/alerts/dot-high.gif) 100% 0 repeat-y;}
div.High-Alert-BottomLeft {background: url(../../images/alerts/bl-high.gif) 0 100% no-repeat;}
div.High-Alert-BottomRight {background: url(../../images/alerts/br-high.gif) 100% 100% no-repeat;}
div.High-Alert-TopLeft {background: url(../../images/alerts/tl-high.gif) 0 0 no-repeat; }
div.High-Alert-TopRight {background: url(../../images/alerts/tr-high.gif) 100% 0 no-repeat; padding:10px; font-size: 0.8em; }
div.VeryHigh-Alert-Top {background: url(../../images/alerts/dot-veryhigh.gif) 0 0 repeat-x; width: 100%; margin: 35px 0 10px 0;}
div.VeryHigh-Alert-Bottom {background: url(../../images/alerts/dot-veryhigh.gif) 0 100% repeat-x;}
div.VeryHigh-Alert-Left {background: url(../../images/alerts/dot-veryhigh.gif) 0 0 repeat-y;}
div.VeryHigh-Alert-Right {background: url(../../images/alerts/dot-veryhigh.gif) 100% 0 repeat-y;}
div.VeryHigh-Alert-BottomLeft {background: url(../../images/alerts/bl-veryhigh.gif) 0 100% no-repeat;}
div.VeryHigh-Alert-BottomRight {background: url(../../images/alerts/br-veryhigh.gif) 100% 100% no-repeat;}
div.VeryHigh-Alert-TopLeft {background: url(../../images/alerts/tl-veryhigh.gif) 0 0 no-repeat; }
div.VeryHigh-Alert-TopRight{background: url(../../images/alerts/tr-veryhigh.gif) 100% 0 no-repeat; padding:10px; font-size: 0.8em; }
/* blue curved corners and fill*/
/* The background colour must always be assigned to the very first CSS rule to stop overlapping bg images */
/* Whichever element we assign padding to, each of the elements inside it will inherit that padding. So apply to very last DIV*/
div.login-account-bl { background: url(../../images/bl-green.gif) 0 100% no-repeat #dfffa8 ; width: 100%; margin: 10px 0 10px 0; }
div.login-account-br {background: url(../../images/br-green.gif) 100% 100% no-repeat}
div.login-account-tl {background: url(../../images/tl-green.gif) 0 0 no-repeat ;}
div.login-account-tr {background: url(../../images/tr-green.gif) 100% 0 no-repeat; padding: 10px; font-size: 0.8em; }
div.login-account-tr input.search-input-username { margin: 0; padding: 0; float: none; display: inline; width: 80px; border: 1px solid #dfffa8; }
div.login-account-tr input.search-input-password { margin: 0; padding: 0; float: none; display: inline; width: 80px; border: 1px solid #dfffa8; }
div.login-account-tr input.search-button { margin: 0; float: none; display: inline; width: 50px; border: 0;
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div.login-account-tr a {color:#F89C46; }
div.login-account-tr a:hover, a:focus { text-decoration: underline; }
div.login-account-tr table { margin: 0; padding: 0; border: 0; width: 95%; }
div.login-account-tr table td { padding: 0; }
div.quotes-bl {background: url(../../images/bl-green.gif) 0 100% no-repeat #dfffa8 ; width: 100%; margin: 10px 0 10px 0; }
div.quotes-br {background: url(../../images/br-green.gif) 100% 100% no-repeat;}
div.quotes-tl {background: url(../../images/tl-green.gif) 0 0 no-repeat ;}
div.quotes-tr {background: url(../../images/tr-green.gif) 100% 0 no-repeat; padding: 10px 8px 10px 8px; color: #1B4A7E;
font-weight: normal; font-size: 0.75em; font-style: italic; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
CONTENT CONTAINER - THREE COLUMN - REGISTRATION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#content-container-three-column { margin-top:3px; /*margin-left:auto; margin-right:auto;*/ padding:0; width: 540px;
border: 0; position:relative;}
div#content-main-three-column { width: 100%; float:left; margin: 0; }
/* lists */
div#content-main-three-column ul { margin: 0; padding: 0; border: 0; }
div#content-main-three-column ul li { margin: 0; padding: 0 0 0 15px; border: 0; background: url(../../images/arrow.gif) 0 8px no-repeat;
list-style-type: none; }
div#content-main-three-column ul li a {color:#F89C46; }
div#content-main-three-column ul li a:hover, a:focus { text-decoration: underline; }
div#content-main-three-column ol { margin: 0; padding: 0; border: 0; }
div#content-main-three-column ol li { margin: 0 0 0 25px; padding: 0 0 0 5px; border: 0; }
div#content-main-three-column ol li a { color:#F89C46; }
div#content-main-three-column ol li a:hover, a:focus { text-decoration: underline; }
/* verisign flash */
div#content-main-three-column object { float: left; margin: 0 10px 0 0;}
/* registration form */
div#content-main-three-column table.registration { margin: 0; padding: 0; border: 0; width: 95%; }
div#content-main-three-column table.registration td { padding: 0; border: 0; }
div#content-main-three-column table.registration tr.padding-bottom td { padding-bottom: 10px !important;}
div#content-main-three-column table.registration td span { margin: 0; display: inline; padding: 0; border: 0; }
div#content-main-three-column select:focus { background-color: Yellow;}
div#content-main-three-column input:focus { background-color: Yellow;}
div#content-main-three-column input.Submit { margin: 5px 5px 0 0; float: none; width: 200px; border: 0;
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.Submit:hover, div#content-main-three-column input.Submit:focus { color: #F89C46 !important; cursor: pointer;}
/* end registration form */
/* edit your details page */
div#content-main-three-column table.User-Table { width: 95% !important; position: relative; }
div#content-main-three-column table.User-Table th { padding: 3px; border-top: 0; border: 1px solid #bfff51; background-color: #bfff51; color: #1B4A7E; text-align: left;}
div#content-main-three-column table.User-Table td { padding: 3px; border:1px solid #bfff51; text-align: left;}
div#content-main-three-column table.User-Table tr.bold td { font-weight: bold; }
div#content-main-three-column fieldset { width: 89%; padding:15px; border: 1px solid #bfff51; }
div#content-main-three-column legend { color:#1B4A7E; padding:5px 3px 10px 3px; font-weight: bold;}
div#content-main-three-column input.Admin { margin: 5px 5px 0 0; float: none; display: inline; width: 200px; border: 0;
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.Admin:hover, div#content-main-three-column input.Admin:focus { color: #F89C46 !important; cursor: pointer;}
/* admin buttons disabled */
div#content-main-three-column input.AdminDisabled { margin: 5px 5px 0 0; float: none; display: inline; width: 200px; border: 0;
background-color: Gray; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.AdminDisabled:hover, div#content-main-three-column input.AdminDisabled:focus { cursor: default;}
div#content-main-three-column input.RSS { margin: 5px 5px 5px 0; float: none; display: inline; width: 200px; border: 0;
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.RSS:focus { color: #F89C46;}
/* submit buttons for no javascript page */
div#content-main-three-column input.select { margin: 0; width: 50px; border: 0;
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.select:focus { color: #F89C46;}
div#content-main-three-column input.edit { margin: 0; width: 200px; border: 0;
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.edit:focus { color: #F89C46;}
/* decryptor page buttons */
div#content-main-three-column input.Decrypt { margin: 5px 5px 0 0; float: none; width: 70px; border: 0;
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.Decrypt:hover, div#content-main-three-column input.Decrypt:focus { color: #F89C46 !important; cursor: pointer;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
HOME PAGE LAYOUT - TWO COLUMN SECTION FOR HERTS BEDS
LARGE MAP ON LEFT - PHOTOS/TEXT ON RIGHT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* holds map and text columns */
div#two-column-container { background:url(../../images/bg-three-column-home-2.png) repeat-y 15px 0; padding :0; margin: 10px 0 10px 0; }
div#two-column-container p { font-size: 0.85em; }
/* forecast map */
div#two-column-side1 { float:left; width:60%; margin: 0; background:url(../../images/bg-three-column-main.png) repeat-y top right;}
div#two-column-side1 img { margin: 0; border: 0;}
div#two-column-side1 ul { margin: 10px 0 0 0; padding: 0; border: 0; }
div#two-column-side1 ul li { margin: 0; padding: 0 0 0 15px; border: 0; background: url(../../images/arrow.gif) 0 8px no-repeat; list-style-type: none; }
div#two-column-side1 ul li a { color:#F89C46; }
div#two-column-side1 ul li a:hover, div#two-column-side2 ul li a:focus { text-decoration: underline; }
/* what is and register */
div#two-column-side2 { float:right; width: 35%; margin: 0 10px 0 10px !important; padding: 0 0 0 0; }
/* use if lists needed later */
div#two-column-side2 ul { margin: 0; padding: 0; border: 0; }
div#two-column-side2 ul li { margin: 0; padding: 0 0 0 15px; border: 0; background: url(../../images/arrow.gif) 0 8px no-repeat; list-style-type: none; }
div#two-column-side2 ul li a { color:#F89C46; }
div#two-column-side2 ul li a:hover, div#two-column-side2 ul li a:focus { text-decoration: underline; }
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
FOOTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#footer { clear: both; background :#bfff51 url(../../images/bg-nav-green.png) bottom left no-repeat; margin-top:3px; margin-left:auto;
margin-right:auto; width:730px; padding: 0.8em 0 1em 20px; position:relative; color:#1B4A7E; font-size:0.7em; font-weight: bold;}
div#footer div#blue-corner { z-index:0 !important; background: url(../../images/bg-nav-side-green.png) 100% 100% no-repeat #E3F2FB;
width:2%; /*_width:2.5%;*/ position:absolute; top: 20px; right: 0; padding: 0;}
div#footer span { position: absolute; top: 0.8em; right: 20px; bottom: 0; /*left: 0;*/ z-index: 5; margin: 0; padding: 0;
display: inline; border: 0; }
div#footer a:link { color:#1B4A7E; text-decoration:none;}
div#footer a:visited { color:#1B4A7E; text-decoration:none;}
div#footer a:hover { color:#F89C46; text-decoration: underline;}
div#footer a:active { color:#F89C46;}
div#footer a:focus { color:#F89C46;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
MISC CLASSES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* herts and beds colours */
.pale-green { color: #dfffa8;}
.light-green { color: #cfff7d;}
.green { color: #bfff51; }
.none { display: none !important; }
.block { display: block !important;}
.clear { clear: both !important;}
.arrow { vertical-align: middle;}
.inline { display: inline;}
.orange {color:#F89C46; }
.bold { font-weight: bold; }
.bold-larger { font-weight: bold; font-size: larger; }
.left-quote { font-size: x-large; vertical-align: middle; line-height: inherit;}
.right-quote { font-size: x-large; vertical-align: bottom; line-height: inherit;}
.float-left { float: left;}
.float-right { float: right;}
.float-left-table { float: left; display: inline-table;}
.float-right-table { float: right; display: inline-table;}
.backgroundRed { background-color : Red !important;}
.small-italic { font-style: italic; font-size: smaller;}
.smaller-text { font-size: smaller;}
.red-bold { color: Red; font-weight: bold;}
.no-bg { background-color: Transparent;}
.white-space { white-space: normal;}
.forecast-text { font-size: 0.85em !important;}
.centre { text-align: center;}
.red-bold-centre { color: Red; font-weight: bold; text-align: center;}
.vertical-top { vertical-align: top;}