/**************** 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: #175a8e; text-decoration: none;border-bottom:1px solid #175a8e;}
a:visited         { color: #175a8e; text-decoration: none;border-bottom:1px solid #175a8e;}
a:focus, a:hover, a:active {color: #fff;background-color:#3bafd0;text-decoration: none;border-bottom:1px solid #fff; }

/********* Navigation **********************************/
#navlist {margin:0 auto;width:80%;padding:20px 0;}
#navlist li{display:block;list-style: none;border-bottom:1px solid #dbdbdb;margin-left:0;padding: 0 ;}
#navlist a {font-weight:bold;color:#267166;display:block;text-decoration:none;border-bottom:none;}
#navlist li a { display:block;text-decoration: none; }
#navlist a:link, #navlist a:visited {padding:2% 0 ;color:#6b6868;border-bottom:none;}
#navlist a:visited {color:#333;}
#navlist a:hover, #navlist a:focus, #navlist a:active {background: url(../images/tick.gif) right center no-repeat;color: #3aa2c8;}
#home #nav-home, #jobs #nav-jobs, #industrial #nav-industrial, #design #nav-design, #panels #nav-panels, #controls #nav-controls, #support #nav-support, #studies #nav-studies, #contact #nav-contact {background: url(../images/tick.gif) right center no-repeat;color: #3aa2c8;}/**************** Main sections *********************/

/*********** Main structure ******************************/

html{height:100%; }
body {height:101%; line-height:150%; color: #333; text-align: center; background:#fff url(../images/greystripe.jpg) top left repeat-x;}
#skip {font-size:80%;  height:4em; text-align:center; color:white; width:29%;  margin:0;position:absolute;top:0;right:0.5em;z-index:10;background:#f5f5f5 url(../images/rounded2.gif) bottom left no-repeat;}
#skip li {display:inline;  list-style-type: none;  padding: 0 2% 0 2%; margin-left:0;}
#skip li a:link, #skip li a:visited  {border:none; color:#000; padding:5px;   }
#skip li a:focus, #skip li a:hover, #skip  a:active { border:none;color:#fff;    padding:5px;}
img.printlogo {display:none;}
#container {font-size:76%;  margin:0 auto;text-align:left; max-width:1000px;}
#contents {width:63%;float:left;margin:20px 1% 10px 2%;padding:0 0 0 0;}
#contents img {float:right;margin:18px 15px 8px 8px;clear:right;}
#contents img.icon {float:none;border:none;padding:0;margin:0;}
#sidebar {width:29%;float:right;margin:10px 2% 10px 1%;;}
h1 {font-size:160%; color: #175a8e;font-weight:normal;margin:11px 0 0 0;}
h2 {font-size:200%; color:#175a8e;font-weight:normal; margin: 0px 0 10px 0;background:#fff url(../images/circleicon.gif) left center no-repeat;padding-left:25px;font-family:"century gothic", "trebuchet ms", serif;}
h3, h3.roundel {font-size:140%; color:#175a8e;font-weight:normal; margin: 10px 0 10px 0;background:#fff url(../images/circleicon.gif) left center no-repeat;padding-left:25px;}
#sidebar h3 {margin-bottom:10px;background-color:white; margin-top:10px;}
h4 {font-size:120%; color:#175a8e;margin: 15px 0 0 0;padding-left:20px;}

#left p {margin:40px 0px 0 10px;text-align:right;line-height:130%;font-size:190%; color: #white; font-weight:normal;font-family:  "Trebuchet MS", Verdana, Arial, sans-serif;}

#left {width:64%;float:left;color:white;}
  #left span.cite {font-weight:normal;font-size:70%;}
   #left img.button {float:right;margin:15px 0 0 0; padding:0;background:none;border:none;}
#right {position:absolute; right:0;top:96px;width:39%;height:242px;}
#right img {float:right;}
#right #master0 {float:right;margin-right:8%;}
#header {width:100%;position:relative;border-top:1px solid white;height:332px;}
#sidebar div.box {margin: 0 0 10px 0; border-top:1px dashed #eaebeb;clear:both; }
  #sidebar div.box img {float:left;margin:10px 10px 10px 0;}
  #sidebar div.box h3 {margin:0 0 0 0;font-size:130%;padding:3px 0;font-weight:bold;}
  #sidebar div.box p  {padding:0 0 0 0;clear:none;margin:0.5em 0;}
  #sidebar .box img.icon {float:none;border:none;padding:0;margin:0;}

div.grey {background:#f5f5f5 url(../images/rounded.gif) top right no-repeat;}
#sidebar div.grey {background:#f5f5f5 url(../images/roundedl.gif) top left no-repeat;}
span.offleft {position:absolute;left:-999px;}
h1 img {border:none;}

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:20px; }
ul.list li {list-style:none; background: url(../images/doc.gif) 0 0.5em no-repeat;padding-left:15px;}
ul.list {margin-left:5px;}
#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:0px;}
#footer .right {float:right; width:40%; text-align:right;margin-right:0px;}
 #hcard { margin: 0 0 0 0; padding: 0; }
 #hcard dl { margin: 0; padding: 0; }
 #hcard dt { font-weight: bold;  margin: 0.3em 0 0 0;float:left;width:5em;clear:left;}
 #hcard dd {  padding: 0; margin: 0.3em 0 0 0; float:left;width:11em;}
#hcard dt.first, #hcard dd.first {float:none; width:100%;}

#contents div.box {margin:  0px;clear:both; }
  #contents div.box img {float:left;margin:0px 10px 0px 0;}
  #contents div.box h3 {background-color:transparent;background-image:none;margin:0px 0 0 0;font-size:130%;padding:3px 0;font-weight:bold;}
  #contents div.box p  {padding:0 0 0 0;clear:none;margin:0.5em 0;}
#contents .grey p {margin-left:20px;margin-right:20px;margin-bottom:10px;margin-top:10px;}
#contents .grey {padding:10px 0;margin:10px 0 ;overflow:hidden;}
#contents img.leftimg {float:left;margin:8px;}
#contents .grey h3 {background-image:none;background-color:#f5f5f5;}
#vid {margin:0 auto;width:446px;}
#vid img {padding:0;margin:0;}

div.dbimages-config {border:1px solid #ccc;width:180px;float:left;text-align:center;margin-right:10px;margin-bottom:10px;}
div.dbimages {border:1px solid #ccc;width:114px;float:left;text-align:center;margin-right:10px;margin-bottom:10px;margin-left:10px;}
#contents div.dbimages img {margin:5px auto;display:block;float:none;}
#contents img.icon {float:none;border:none;margin:0;padding:0;vertical-align: middle;}

/*************** Forms ******************/

#enquiry {padding:20px;font-size:100%; color:#000; width:80%;   }
#enquiry fieldset { border:none;   }
#enquiry legend {   display:none;}
#enquiry input {background:#fff;   border:1px solid #ccc;  width:100%;     padding:5px 3px 5px 3px;   vertical-align:middle;  margin:0 0 5px 0; }
#enquiry textarea { background:#FFF;  border:1px solid #ccc;     width:70%;  margin-left:0;    font-size:110%;   padding:3px ;  vertical-align:middle;  }
#enquiry input.button {   border:1px solid #fff;clear:both;   color:white;   font-size:100%;   width:30%;  margin:10px 0 20px 0;   font-weight:bold;    background:#2e8cb0 url(../images/aquabutton.jpg) left top repeat-x;    }
#enquiry input:hover, #contactform textarea:hover {  border:1px solid #008db9;background-color:#efefef; }
#enquiry input.button:focus, #enquiry input.button:hover, #enquiry input.button:active  { clear:both; color:white;   font-size:100%;   width:30%;  margin:10px 0 20px 0;   font-weight:bold;   background:#2e8cb0 url(../images/aquabutton.jpg) left top repeat-x;   }
.required { color:#c2537a;    font-weight:normal;  margin-left:10px; }
.validationerrors ol {color:#000;   margin-left:15px; padding-left:10px;   margin-bottom:10px;  }
#enquiryErrorID  a:focus, #enquiryErrorID  a:hover, #enquiryErrorID  a:active  { background-color:#538b37;  color:white;   }
div.grey #enquiry1 p {margin:3px 0;}
div.grey ol {margin-left:25px;color:#b31659; font-weight:bold;}
#enquiry1 p.inline {display:inline;}
#enquiry1 {font-size:100%; color:#000; margin-left:10px;width:90%;   }
#enquiry1 fieldset { border:1px solid #f5f5f5;  padding:12px 8px;margin-bottom:10px; }
#enquiry1 fieldset #main {border:none;}
#enquiry1 legend {   color:#f5f5f5;font-weight:bold;margin-bottom:5px;}
#enquiry1 input {background:#fff;   border:1px solid #aaa;  width:70%;     padding:5px 3px 5px 3px;   vertical-align:middle;  margin:0 0 5px 0; }
#enquiry1 select {border:1px solid #2c3079; margin:2px 0 5px 0;}
#enquiry1 textarea { background:#FFF;  border:1px solid #aaa;     width:70%;  margin-left:0;    font-size:110%;   padding:3px ;  vertical-align:middle;  }
#enquiry1 input.submit{   border:1px solid #fff;clear:both;   color:white;   font-size:100%;   width:30%;  margin:10px 0 20px 0;   font-weight:bold;    background:#2e8cb0 url(../images/aquabutton.jpg) left top repeat-x;    }
#enquiry1 input:hover, #enquiry1 textarea:hover {  border:1px solid #2e8cb0;background-color:#efefef; }
#enquiry1 input.submit:focus, #enquiry1 input.submit:hover, #enquiry1 input.submit:active  { clear:both; color:white;   font-size:100%;   width:30%;  margin:10px 0 20px 0;   font-weight:bold;   background:#2e8cb0 url(../images/aquabutton.jpg) left top repeat-x;   }
#enquiry1 input.radio {width:2em;border:none;}
#enquiry1 input.topic, #enquiry1 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;  }
#enquiry1 input.shorttext {width:20%;}
/***************** Image Replacement ****************/

/* General IR statements */
.replace {clear:both;position: relative;  overflow: hidden; margin: 0em 0 10px 0;padding: 0;  font-size: 100%; }
.replace em {     display: block;   position: absolute;  top: 0;  /* left: 0; */ z-index: 1;    /* for opera5 (?) and o6/mac */     }
/* General IR statements for IE5.x mac only */
* html>body .replace {  position: static; overflow: visible;   font-size: 10px;  /* for ie5.x/mac */  }
* html>body .replace em  { position: static; }
* html>body .replace a {text-decoration: none;  /* ie5.0-5.1.x/mac  must have this value or the underline shows through the image. */   }
/* Each pair of statements per instance of IR */
#myh1, #myh1 em {font-color:#555;padding-bottom:0; background-color:#ggg;     width:473px;     height:109px; background: url(../images/logo.gif) top left no-repeat;}
* html>body #myh1 em { /* for ie5.x/mac only */ margin-bottom: -109px;  /* Required to bring text underneath image. Use the negative height of the image here.*/  }


/***************** 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 */

/***************** Lightbox ****************/
#lightbox{
   position: absolute;
   left: 0;
   width: 100%;
   z-index: 100;
   text-align: center;
   line-height: 0;
   }

#lightbox a img{ border: none; }

#outerImageContainer{
   position: relative;
   background-color: #fff;
   width: 250px;
   height: 250px;
   margin: 0 auto;
   }

#imageContainer{
   padding: 10px;
   }

#loading{
   position: absolute;
   top: 40%;
   left: 0%;
   height: 25%;
   width: 100%;
   text-align: center;
   line-height: 0;
   }
#hoverNav{
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 10;
   }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
   width: 49%;
   height: 100%;
   background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
   display: block;
   }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
   font: 10px Verdana, Helvetica, sans-serif;
   background-color: #fff;
   margin: 0 auto;
   line-height: 1.4em;
   overflow: auto;
   width: 100%
   }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;   }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;   }

#overlay{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 90;
   width: 100%;
   height: 500px;
   background-color: #000;
   }

/***************** IE hacks **************************/

* html img, * html div { behavior: url(/iepngfix.htc) }

* html #left a {width:288px;}
* html #container {width:760px}
* html #contents, * html #sidebar, * html #left, * html #right {display:inline;}
* html #contents {margin:0px 0 5px 0;width:490px;}
* html h2 {margin-top:20px;}
* html #sidebar {margin-right:0;margin-top:10px;margin-left:5px;width:224px;}
* html #right {width:246px;}
* html #skip li {display:block;float:left;}
* html #right #master0 {float:right;margin-right:0;}
* html #mid {height:287px;width:100%;}

* html #contents {margin-top:0px;}
* html #sidebar {margin-top:0px;}