/**************** Style Resets **********************/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;} h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,address {margin:1em 0;} li, dd, blockquote {margin-left:1em;} html, body, fieldset {font:100.1%/120% Verdana, Arial, Helvetica, sans-serif;} input, select, textarea {font-size:100.1%;} h1, h2, h3, h4, h5, h6 {font-size:100%;} form label{cursor:pointer;} fieldset, img{border:none;} table{border-collapse:collapse; border-spacing:0;} ul li {list-style-type:square;} hr {height: 1px; background-color: #E5E5E5; color: #E5E5E5; border: none; padding: 0; margin: 1em 1em;} /**************** General Links ***********************************/ a:link { color: #01346e; text-decoration: none;border-bottom:1px solid #01346e;} a:visited { color: #01346e; text-decoration: none;border-bottom:1px solid #01346e;} a:focus, a:hover, a:active {color: #fff;background-color:#01346e;text-decoration: none;border-bottom:1px solid #fff; } /********* Navigation **********************************/ #nav {clear:both;width:100%;height:4.25em;position:absolute;bottom:0;left:0;} #navlist {margin-top:12px;} /**************** Main sections *********************/ html{height:100%; } body {height:101%; line-height:150%; color: #555; text-align: center; background: url(../images/darkblueback.gif) 8px 0 repeat-x;} #skip {font-size:80%; text-align:right; color:white; margin:0;position:absolute;top:0;right:0.5em;z-index:10;} #skip li {display:inline; list-style-type: none; padding: 0 0 0 1em; } #skip li a:link, #skip li a:visited {border:none; color:#fff; padding:5px; } #skip li a:focus, #skip li a:hover, #skip a:active { border:none;color:#fff; padding:5px;border-top:1px solid white;} #container {font-size:76%; margin:0 auto;text-align:left; width:960px;} #wrap {position:absolute;top:0;left:0;z-index:100;margin:0 auto;width:100%;} #contents {clear:both;width:64%;float:left;margin:20px 1% 10px 2%;padding:0 0 0 0;} #contents img {float:right;margin:15px 0 8px 8px;border:1px solid #ccc;padding:5px;} #contents div.image {float:right;width:220px;text-align:center;margin-bottom:10px;margin-left:8px;} #contents div.image a:link, #contents div.image a:visited {border-bottom:none;color:#aaa;} #contents div.image a:focus,#contents div.image a:hover, #contents div.image a:active {border-bottom:none;color:#000;background-color:white;} #contents div.image span {clear:both;display:block;margin-top:0;font-size:90%;} #contents div.image img {margin-bottom:0;} #header {width:100%;position:relative;border-top:1px solid;height:228px;clear:both;} #sidebar {width:28%;float:right;margin:10px 2% 10px 1%;display:inline;} #clients #sidebar {min-height:200px;} #clients #sidebar, #clients div.grey {min-height:300px;overflow:hidden;font-size:85%;} #clients div.grey {min-height:300px;overflow:hidden;margin:0;} #sidebar div.grey h4, #clients #sidebar div.grey ul {margin:5px 0 0 0 ;padding:0;} #clients #sidebar div.grey li {margin-left:5px;} div.grey {background-color:#e2e2e2 ;padding:8px;overflow:hidden;color:#000;} #sidebar div.grey ul li {padding:0;} #sidebar div.grey ul {margin-top:0;} #footer {clear:both;height:3em; padding-top:1em;margin-top:10px;border-top: 1px solid #eaebeb;background-color:white; margin-left:auto; margin-right:auto;} #footer .left {float:left; width:40%;text-align:left;margin-left:20px;} #footer .right {float:right; width:40%; text-align:right;margin-right:20px;} /************* Headings *********************/ h1 {font-size:160%; color: #fff;font-weight:normal;margin:20px 0 0 0;display:block;width:533px;float:left;} h2 {font-size:200%; color:#01356f;font-weight:normal; margin: 0px 0 0 0;font-family: "Times New Roman", Georgia, serif;} h3 {font-size:150%;font-weight:bold; color:#01356f;margin: 10px 0 0 0;font-family: "Times New Roman", Georgia, serif;} #sidebar h3 {margin-bottom:10px;background-color:white; margin-top:10px;} h4 {font-size:120%; color:#175a8e;margin: 15px 0 0 0;} h1 img {border:none;} /************** Other bits ***************/ p.tel {float:right;width:235px;font-weight:normal;font-size:170%;text-align:right;margin-top:60px;color:#fff;font-family: "Times New Roman", Georgia, serif;} #map-container img {margin-top:10px;margin-left:0;} div.listbox {clear:both;margin-bottom:15px;} h1 a:link, h1 a:visited,h1 a:focus,h1 a:hover,h1 a:active {text-decoration:none;border-bottom:0;background-color:transparent;} img.frame {float:right; clear:both;padding:6px;border:1px solid #e2e2e2;color:#333;background:#fff;margin: 0 0 5px 4px;} ul {list-style:square; padding-left:3px; margin-left:3px;} ol {margin-left:10px;} ul.float {float:left;width:300px;display:inline;} #vidbox {position:absolute;left:0;top:0;z-index:-100;height:180px;width:320px;overflow:hidden;} #vidbox img {width:1px;height:1px;float:none;margin-left:0;} .boxes {margin:10px 0 20px 0px;clear:both;width:628px;min-height:150px;} .boxes .box {margin:0 15px 0 0;padding:0;float:left;} .box {float:left;width:190px;margin: 0 10px 0 0; height: 150px;} .first {margin-left:0;} .third {margin-right:0;} #clientpics {clear:both;width:100%;overflow:hidden;} #clientpics img {margin:0;padding:0;} #clientpics img.worldmap {margin-right:15px;} #contents {position:relative;} #contents {z-index:1;} #header {z-index: 2;} /*************** Forms ******************/ #enquiry p.inline {display:inline;} #enquiry {font-size:100%; color:#000; margin-left:0px;width:90%; margin-top:10px; } #enquiry fieldset { border:none; } #enquiry fieldset #main {border:none;} #enquiry legend { display:none;} #enquiry input {background:#fff; border:1px solid #aaa; width:70%; padding:5px 3px 5px 3px; vertical-align:middle; margin:0 0 5px 0; } #enquiry select {border:1px solid #2c3079; margin:2px 0 5px 0;} #enquiry textarea { background:#FFF; border:1px solid #aaa; width:70%; margin-left:0; font-size:110%; padding:3px ; vertical-align:middle; } #enquiry input.submit{ border:1px solid #fff;clear:both; color:white; font-size:100%; width:30%; margin:10px 0 20px 0; font-weight:bold; background:#336699 url(../images/dkblueback.jpg) left top repeat-x; } #enquiry input:hover, #enquiry textarea:hover { border:1px solid #2e8cb0;background-color:#efefef; } #enquiry input.submit:focus, #enquiry input.submit:hover, #enquiry input.submit:active { clear:both; color:white; font-size:100%; width:30%; margin:10px 0 20px 0; font-weight:bold; background:#336699 url(../images/aquabutton.jpg) left top repeat-x; } #enquiry input.radio {width:2em;border:none;} #enquiry input.topic, #enquiry label.topic,#enquiry input.topic, #enquiry label.topic {position:absolute;left:-9999px;} .required { color:#b31659; font-weight:bold; margin-left:0px; } #enquiry .required { color:#b45a80; font-weight:bold; margin-left:0px; } .validationerrors ol {color:#000; margin-left:5px; padding-left:10px; margin-bottom:10px; } #enquiry input.shorttext {width:20%;} /***************** Tables ****************/ table {border-collapse: collapse;border: 1px solid #ccc;margin:10px 0px;width:100%;background-color:#fff;} tbody { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;} table tr th {background-color:#ece8e8;} table tr.odd {background-color:#f7f6f6;} table tbody, table th, table td { padding: 0.25em;border: 1px dotted #ccc; text-align:center;} table tr.alt th, .product table tr.alt td { background-color: #fff; } table td.center, table th.center {text-align:center;} table input {border:1px solid #ccc;padding:3px 5px;} table input.short {width:20px;} table input.submit {margin-top:3px;background:#2c7dac url(../images/bluefade.gif) repeat-x top left;padding:3px 6px;color:white;border:1px solid #57a1ca;} table input.submit:hover {background:#2c7dac url(../images/brownfadenav.gif) repeat-x top left;padding:3px 6px;color:white;border:1px solid #57a1ca;} table caption {text-align:left; font-weight:bold;} table img {float:left;} table tr.thin {height:1em;} /***************** Clearfix ****************/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ /*** ESSENTIAL STYLES ***/ *** ESSENTIAL STYLES ***/ #nav {background-color:#404041;width:960px;margin:0;padding:5px;} .sf-menu, .sf-menu * { margin: 0;font-weight:bold; padding: 0; list-style: none; } .sf-menu {line-height: 1.5;} .sf-menu ul { position: absolute; top: -999em; margin-left:0;padding-left:0; width: 20em; /* left offset of submenus need to match (see below) */} .sf-menu ul li { width: 100%;font-weight:bold; list-style-type:none; height:4em; line-height: 1.5;} .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */} .sf-menu li { float: left; position: relative; margin-right:3px;list-style-type:none;} .sf-menu a { display: block; position: relative;} .sf-menu li:hover ul,.sf-menu li.sfHover ul { left: 0; top: 2em; /* match top ul list item height */ z-index: 99;} ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul { top: -999em;} ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul { left: 20em; /* match ul width */ top: 0;} ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul { top: -999em;} ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul { left: 20em; /* match ul width */ top: 0;} .sf-menu {float: left; margin-bottom: 1em;} .sf-menu a {font-weight:bold; border-bottom: none; padding: 0.75em 1em 1em 1em; text-decoration:none;} .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #5d9cdc;} .sf-menu li {list-style-type:none;} .sf-menu li li { background:#01346e; height:3em;padding: .75em 1em 1em 1em;} .sf-menu li li li { background: #01346e;} .sf-menu li:hover, .sf-menu li.sfHover,.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background:#01346e url(../images/bluecorner.gif1) top left no-repeat; color:#fff;font-weight:bold; outline: 0;} #home .sf-menu #nav-home, #about .sf-menu #nav-about, #contact .sf-menu #nav-contact, #steam .sf-menu #nav-steam, #hotwater .sf-menu #nav-hotwater, #other .sf-menu #nav-other { background:#fff url(../images/bluecorner.gif) top left no-repeat; color:#01346e;font-weight:bold; outline: 0;} /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 2em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */} .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */} a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/} /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator,a:hover > .sf-sub-indicator,a:active > .sf-sub-indicator,li:hover > a > .sf-sub-indicator,li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/} /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator,.sf-menu ul a:hover > .sf-sub-indicator,.sf-menu ul a:active > .sf-sub-indicator,.sf-menu ul li:hover > a > .sf-sub-indicator,.sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/} /*** shadows for all but IE6 ***/ .sf-shadow ul { background: url('../images/shadow.png') no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px;} .sf-shadow ul.sf-shadow-off { background: transparent;} /*************** Lightbox ********************/ #jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px;} #jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #jquery-lightbox a img { border: none; } #lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto;} #lightbox-container-image { padding: 10px; } #lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;} #lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;} #lightbox-container-image-box > #lightbox-nav { left: 0; } #lightbox-nav a { outline: none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block;} #lightbox-nav-btnPrev { left: 0; float: left;} #lightbox-nav-btnNext { right: 0; float: right;} #lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0;} #lightbox-container-image-data { padding: 0 10px; color: #666;} #lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left;} #lightbox-image-details-caption { font-weight: bold; } #lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em;} #lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em;} /************ image map *******************/ #map-view-container { position: relative; } #map-view-container img {border:none;float:none;} #map-container { float: left; position: relative; } #map-view-container img.map { position: relative; z-index: 100; } #map-view-container img.region { display: none; left: 0px; position: absolute; top: 0px; z-index: 20; } #map-view-container img.regionBg { left: 0px; position: absolute; top: 0px; z-index: 19; } #practice-container { float: left; position: relative; } #practice-container ul { display: none; } #practice-container ul.selected { display: inline; } #practice-container ul li { list-style-type: none; } #practice-container .selected-list ul li { list-style-type: none; } /********* IE6 hacks *****************/ * html img, * html div { behavior: url(/iepngfix.htc) } * html #sidebar, * html #contents {display:inline;} * html #contents div.boxes div.box, * html #contents div.boxes div.firstbox, * html #contents div.boxes div.secondbox {display:inline;margin-right:5px;} * html #contents div.boxes div.box img {margin:0;} * html div.grey {background-color:#e2e2e2 ;padding:2px;color:#000;} * html #sidebar div.grey, * html #sidebar div.grey ul, * html #sidebar div.grey ul li {padding:5px;margin:0px;} * html #sidebar {width:25%;padding:0px;}