/**************** 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;}
h1,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% Arial, 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 rules *********************/
html, body{ height:100%;  margin:0;  padding:0;  text-align:center;}
body {height:101%; line-height:150%; color: #f7f7f7; text-align: center; background:#302e2e url(../images/greystrip.jpg) left top repeat-x;;}
#container{overflow:hidden;width:98%; max-width:1200px; margin: 1em auto;font-size:76%;background:black ;border:6px solid #515050;text-align:left;border-top:5px solid #707070; }
#header{position:relative; height:120px; border-top:1px solid #707070; background:#262525 url(../images/) left top repeat-x;color: #fff; width:100%;}
#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;} 
#header img.printlogo {display:none;}
#wrapper {border-top:1px solid #000;}
#sidebar{width:20%;float:left;position:relative;}
#sidebar h3 {font-size:110%; font-weight:bold; margin:20px 0 0 10px;clear:both;}
#sidebar p {margin-left:10px;}
#inner{width:80%;float:right;position:relative;background-color:white;}
#extra{ }
#extra p {margin: 5px 10px 8px 10px;font-size:90%;line-height:150%;}
#extra h3 {font-weight:bold; font-size:110%;margin-top:10px;}
.info {background:white url(../images/greyfade.jpg) left bottom repeat-x;margin-right:10px;border-bottom:10px solid #e1e3e2;}
.info h3 {background-color:#59cacb;background-image:url(../images/aquaback.jpg);background-position: left top;background-repeat: repeat-x;display:block;margin:0;padding:0 0 0 10px;color:white;}
strong {color:#fff;}
#hcard {margin: 0 0 20px 10px; padding: 0;width:80%; }
#hcard dl { margin: 0; padding: 0; }
#hcard dt { font-weight: bold; color: #fff;   margin: 0.3em 0 0 0;float:left;width:4.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:98%;}
#slideshow {float:right;width:200px;clear:right;margin:0 0 0 0;background:#000 url(../images/cameraman.jpg) left top no-repeat;}

#content ul {margin:0 0 0 20px;padding:0px;}
#content ul li {list-style-type:square;}
#content{background-color: #000; float: left; display:inline; position: relative; width:79%; margin-bottom:10px;}
#content h1,h2,h3,h4,p,ul,ol {margin-left:20px;margin-right:10px;}
#content h2 {margin-top:10px;}
#content img {float:right; margin:10px 0 -5px 8px;clear:right;}
#footer{height:6em; background: #1c1c1c;color: #FFF;clear:both;font-size:90%; }
#footer span.left {float:left;margin:1em 0 0 10px;width:45%;}
#footer span.right {float:right; margin:1em 10px 0 0;width:45%;text-align:right;}

#footer a{display:inline;padding:0;color: #C6D5FD;border-bottom:none;}
#gallery #content img {float:none;margin:5px;}
#gallerybox {margin-left:20px;}
#gallerybox a, #gallerybox a:link, #gallerybox a:visited {border-bottom:none;}
#gallerybox a:focus, #gallerybox a:hover, #gallerybox a:active {background-color:black;border:none;}
#slideshow img {margin:10px 0 0 0 ;padding:0;}
/**************** General Links ***********************************/
a:link            {color: #efefef; text-decoration: none;border-bottom:1px solid #fff; ;}
a:visited         { color: black; text-decoration: none;border-bottom:1px solid #ccc;}
a:focus, a:hover, a:active {color: white;background-color:#000; border-bottom:1px solid #fff;}
/********************** Navigation ******************/

#navlist{margin:0;}
#navlist li{display:block;list-style: none;margin:0;padding:0;}
#navlist a {font-weight:bold;color:#fff;display:block;text-decoration:none;border-bottom:none;}
#navlist li a { display:block;text-decoration: none; border-left:15px solid #000;}
#navlist a:link, #navlist a:visited {padding:0; color:#fff;border-bottom:none;}
#navlist a:visited {color:#ccc;}
#navlist a:hover, #navlist a:focus, #navlist a:active {border-left:15px solid #302e2f;background:#000 url(../images/navfade.jpg) left center repeat-y;color: #fff;}

#gallery #nav-gallery, #home #nav-home, #features #nav-features,  #contact #nav-contact {border-left:15px solid #302e2f;background:#fff url(../images/navfade.jpg) left center repeat-y;color: #fff;}
 
/***************** Headings ********************/

h2 {font-size:180%; color: #fff; font-weight:normal;margin-top:0;font-family:Arial, Helvetica, sans-serif;}
h3 {font-size:160%; color:#fff;font-weight:normal;font-family:Arial, Helvetica, sans-serif;}
h4 {font-size:150%; color:#fff;font-weight:normal;font-family:Arial, Helvetica, sans-serif; }
/***************** Image Replacement ****************/
h1 {color:white;margin-left:0px; margin-bottom:0;margin-top:0px;padding:0; position:relative; width:352px; height:122px; overflow:hidden; }
h1 span {display:block;position:absolute; left:0; top:0; z-index:1;width:352px; height:122px; margin:0; padding:0; background:url(../images/logo2.jpg) top left no-repeat;}


.clearfix:after {content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; }
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



/*************** Other bits *************/
#addresslist  {}
#addresslist dt {font-weight:bold;color:#000;}
#addresslist dd {font-weight:normal;margin-bottom:8px;margin-left:0;}
sup {font-size:50%;}
/*************** Forms ******************/

#contactform {font-size:100%; color:#fff; margin-left:20px;margin-right:220px;   }
#contactform fieldset { border:none;   }
#contactform legend {   display:none;}
#contactform input {background:#fff;   border:1px solid #777;  width:70%;     padding:5px 3px 5px 3px;   vertical-align:middle;  margin:0 0 5px 0; }
#contactform textarea { background:#FFF;  border:1px solid #777;     width:70%;  margin-left:0;    font-size:110%;   padding:3px ;  vertical-align:middle;  }
#contactform input.button {   border:1px solid #515050;clear:both;   color:white;   font-size:100%;   width:30%;  margin:10px 0 20px 0;   font-weight:bold;    background:#59cacb url(../images/aquaback.jpg) left top repeat-x;    }
#contactform input:hover, #contactform textarea:hover {  border:1px solid #000;background-color:#efefef; }
#contactform input.button:focus, #contactform input.button:hover, #contactform input.button:active  { clear:both; color:white;   font-size:100%;   width:30%;  margin:10px 0 20px 0;   font-weight:bold;    background-color:#ce071e;  }
.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;   }
#contactform p {margin-left:0;}
#contactform input.topic, #contactform label.topic {position:absolute;left:-9999px;}

#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;
   }