/******************************
* WORK-AROUNDS AND FIXES
******************************/
/* Master Reset Trick */
*{
margin:0;
padding:0;
}

/******************************
* THE BODY
******************************/
body{
background-color:#0B527C;
margin:20px 0 0 0;
padding:0;
text-align:center;
font-family:Georgia,Arial,Verdana,Helvetica,sans-serif;
font-size:100%;
background-image:url(../g/bg.jpg);
background-repeat:repeat-x;
}
/******************************
* THE SITE STRUCTURE
******************************/
#container{
width:763px;
\width:765px;/* For IE5 Win */
w\idth:763px;
margin-left:auto;
margin-right:auto;
padding:0;
background:#0B507A;
border:1px solid #246A9B;
}
#header{
padding:10px 10px 6px 10px;
background-color:#0B507A;
border-bottom:1px solid #246A9B;
text-align:left;
height:60px;/* For IE5 Win */
}
#header a:link,#header a:active,#header a:visited{
color:#D5D9DC;
background-color:transparent;
text-decoration:none;
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:90%;
letter-spacing:1px;
}
#header a:hover{
color:#FF9F0F;
}
#content,#mapcontent{
float:left;
width:530px;
padding:0;
background-color:#EAF1F9;
text-align:left;
background-image:url(../g/content-bg.jpg);
background-repeat:repeat-x;
}
#content-wide{
float:left;
width:763px;
padding:0;
background-color:#EAF1F9;
text-align:left;
background-image:url(../g/content-bg.jpg);
background-repeat:repeat-x;
}
/* This is the div for the map pages */
#mapcontent{
width:763px;
text-align: center;
padding-top: 30px;
}
#sidebar{
float:right;
width:233px;
background-color:#0B507A;
}
#imgplacement,#img2,#img3,#img4,#img5,#img6,#img7,#img8{
padding:10px;
background-color:#0B507A;
clear:both;
height:90px;
background-image:url(../g/seaview1.jpg);
background-repeat:no-repeat;
border-top:1px solid #0B507A;
}
#img2{
background-image:url(../g/seaview2.jpg);
}
#img3{
background-image:url(../g/seaview3.jpg);
}
#img4{
background-image:url(../g/seaview4.jpg);
}
#img5{
background-image:url(../g/seaview5.jpg);
}
#img6{
background-image:url(../g/seaview6.jpg);
}
#img7{
	background-image:url(../g/camelb.gif);
}
/* This image box is for the service page,note the border-top none!  */
#img8{
background-image:url(../g/seaview7.jpg);
border-top:0px solid #0B507A;
}
#footer{
padding:8px 20px 8px 20px;
background-color:#0B507A;
height:15px;
font-size:70%;
color:#75C7EF;
}
#footer2{
padding:10px;
background-color:#0B527C;
font-size:65%;
color:#75C7EF;
}
#footer a:link,#footer a:active,#footer a:visited{
color:#75C7EF;
background-color:transparent;
text-decoration:none;
}
#footer a:hover{
color:#FF9F0F;
}
#footer2 a:link,#footer2 a:active,#footer2 a:visited{
color:#75C7EF;
background-color:transparent;
text-decoration:none;
}
#footer2 a:hover{
color:#FF9F0F;
}
/* Seperators */
div.row div.left{
float:left;
text-align:left;
}
div.row div.right{
float:right;
text-align:left;
font-size:95%;
color:#75C7EF;
}
div.row div.right2{
float:right;
text-align:left;
font-size:85%;
color:#DFECF7;
margin-right:5px;
font-family:arial, verdana,helvetica,sans-serif;

}
/******************************
* THE HEADER FONTS
******************************/
h1,h2,h3{
font-weight:bold;
font-family:"Trebuchet MS",Georgia,arial,verdana,helvetica,sans-serif;
}
h1{
margin:30px 0 5px 35px;
font-size:125%;
color:#324A60;
background:url(../g/header-dot.gif) no-repeat bottom left;
padding:5px 0 0 0;
}
h2{
margin:0px 0 5px 35px;
font-size:110%;
color:#324A60;
background:url(../g/header-dot.gif) no-repeat bottom left;
padding:5px 0 0 0;
}
h3{
margin:0px 0 5px 35px;
font-size:100%;
color:#324A60;
padding:5px 0 0 0;
}
/******************************
* THE TEXT
******************************/
p{
margin:0px 40px 10px 36px;
line-height:160%;
color:#0D385A;
font-size:90%;
text-align:left;
}
/* The NAVBAR */
ul#navbar{
list-style:none;
padding:0px;
margin:0px;
text-align:left;
}
ul#navbar li{
display:inline;/* this gets rid of the gaps */
list-style:none;
margin:0;
padding:0;
}
ul#navbar li a{
padding-left:3px;
background:#0B507A;
color:#DAE9F5;
display:block;
width:210px;
\width:233px;/* Box Model Hack */
w\idth:210px;
height:1%;/* (tricks IE into letting you click anywhere on the block,not just the text... apparently:) */
border-bottom:1px solid #246A9B;
text-decoration:none;
padding:3px 0 3px 23px;
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:80%;
letter-spacing:1px;
}
ul#navbar li a:hover{
background:#0D4A70;
color:#FFAE4A;
background-image:url(../g/on.gif);
background-repeat:repeat-y;
background-position:left;
}
/* Sets the active onstate */	
#homeon a#home,
#serviceson a#services,
#sailingon a#sailing,
#depotson a#depots,
#worldon a#world,
#abouton a#about,
#contacton a#contact,
#linkson a#links,
#disclaimeron a#disclaimer
{
background:#0D4A70;
color:#FFAE4A;
background-image:url(../g/on.gif);
background-repeat:repeat-y;
background-position:left;
}
/* Spacer for masthed seperators */
.spacer{
clear:left;
}
/******************************
* SKIP NAV
******************************/
.skip{
position:absolute;
left:-200em;
width:19em;
}
.hide{
display: none;
}
/* The basic lists */
#listcontainer, #listcontainer2{
margin:0;
padding:0;
}
#listcontainer ul, #listcontainer2 ul{
margin-top:3px;
padding:0 25px 10px 60px;
}
#listcontainer li, #listcontainer2 li{
padding:0 5px 0 0;
text-align:left;
font-size:90%;
line-height:150%;
color:#0D385A;
}
#listcontainer a, #listcontainer2 a{
color:#0B507A;
background-color:transparent;
text-decoration: underline;
font-weight:normal;
}
#listcontainer a:hover, #listcontainer2 a:hover{
color:#FF8C00;
background-color:transparent;
text-decoration:none;
font-weight:normal;
}

/* large navigation buttons */
.navlist a{
background-color:transparent;
padding:35px;
margin:0px;
display:block;
border-bottom:1px solid #0B507A;
color:#324A60;
font-family:"Trebuchet MS",Georgia,arial,verdana,helvetica,sans-serif;
font-size:120%;
font-weight:bold;/* commented backslash hack v2 hide from ie5 mac \*/
height:5%;/* IE Hack,again,see above. */
}
.navlist a:link{
background-color:transparent;
color:#324A60;
text-decoration:none;
}
.navlist a:hover{
background-color:#C9DBF1;
color:#074262;
background-image:url(../g/pointer.gif);
background-repeat:no-repeat;
background-position:right;
text-decoration:none;
}
.navlist span{
color:#303030;
font-size:70%;
font-weight:normal;
}
.navlist a:visited{
text-decoration:none;
}
/******************************
* THE BODYLINKS P
******************************/
p a:link, address a:link{
color:#0B507A;
background-color:transparent;
text-decoration:underline;
font-weight:normal;
}
p a:visited, address a:visited{
color:#455C6D;
background-color:transparent;
text-decoration:underline;
font-weight:normal;
}
p a:hover, address a:hover{
color:#FF8C00;
text-decoration:none;
font-weight:normal;
}
p a:active, address a:active{
color:#545454;
background-color:transparent;
font-weight:normal;
}
/* turns off gaps around images */
img{border:0;}
/******************************
* CONTACT FORMS
******************************/
fieldset{border:0px; color:#0D385A;}
.contactform label.labelfloat{
float:left;
padding:2px 0 10px 38px;
margin-right:1px;
cursor:pointer;
width: 10em;
}
input{
background:#FFFFFF;
border:1px #7F9DB9 solid;
color:#0D385A;
}
.input{ /* style for drop down */
background:#FFFFFF;
border:1px #7F9DB9 solid;
color:#0D385A;
width: 13em;
}

.ieradio{
	border: none;
	background: none;
}


.contactform br{
clear:both;
margin-top:0;
margin-bottom:0;
}
.button{
background:#DAE6F6;
color:#0B527C;
font-size:100%;
border:1px #0B507A solid;
cursor:pointer;
}
.formcon{
background: transparent;
color:#40596A;
padding:0;
margin:0 0 10px 0px;
font-size: 75%;
}
.textarea{
height:120px;
width: 207px;
background:#FFFFFF;
border:1px #7F9DB9 solid;
font:90% Verdana,Arial,Helvetica, sans-serif;
color:#2C404B;
margin-bottom: 2px;
}
/* import export forms */
label.labelfloat2{
float:left;
padding:2px 0 10px 38px;
margin-right:1px;
cursor:pointer;
width: 17em;
}

.importexportform{
	padding-left: 40px;
	font-size: 14px;
	line-height: 27px;
}

.errormsg{
	background-image: url(/g/warning.jpg);
	background-repeat: no-repeat;
	background-position: 5px 7px;
	border-top: solid 1px #CECECE;
	border-right: solid 1px #CECECE;
	border-bottom: solid 1px #CECECE;
	background-color: #fff;
	color: #990000;
	padding: 7px 7px 7px 55px;
	margin: 7px 40px 7px 0px;
	line-height: 20px;
}

.errordetails{
	border: solid 1px #CECECE;
	background-color: #fff;
	color: #990000;
	padding: 3px 7px;
	margin: 7px 40px 7px 0px;
}



/* The world map navigation (panels) */
#maps {
 width: 652px;
 height: 274px;
 background: url(../g/map.gif);
 margin: 10px auto; padding: 0;
 position: relative;
}
#maps li {margin: 0; padding: 0; list-style: none; display: block; position: absolute; border:0px solid #A52A2A;}

#maps a {display: block;}

#map1 {left: 0; width: 245px;}
#map2 {left: 245px; width: 108px;}
#map3 {left: 353px; width: 88px; top:0px;}
#map4 {left: 441px; width: 81px;}
#map5 {left: 522px; width: 138px;  top:70px;}
#map6 {left: 12px; width: 225px; top:120px;}
#map7 {left: 480px; width: 181px;  top:180px;}
#map8 {left: 260px; width: 150px;  top:143px;}

#map1 a {height: 174px;}
#map2 a {height: 145px;}
#map3 a {height: 277px;}
#map4 a {height: 280px;}
#map5 a {height: 110px;}
#map6 a {height: 165px;}
#map7 a {height: 100px;}
#map8 a {height: 40px;}

#map1 a:hover {background: url(../g/map.gif) 0 -274px no-repeat;}
#map2 a:hover {background: url(../g/map.gif) -245px -274px no-repeat;}
#map3 a:hover {background: url(../g/map.gif) -353px -274px no-repeat;}
#map4 a:hover {background: url(../g/map.gif) -441px -274px no-repeat;}
#map5 a:hover {background: url(../g/map.gif)  -522px -344px no-repeat;}
#map6 a:hover {background: url(../g/map.gif)  -12px -667px no-repeat;}
#map7 a:hover {background: url(../g/map.gif) -480px -727px no-repeat;}
#map8 a:hover {background: url(../g/map.gif) -260px -690px no-repeat;}

#maps li a{
text-indent:-9999px;
text-decoration:none;
overflow: hidden;
}


/* The uk map navigation (fixed boxes) */
#ukmap {
 width: 500px;
 height: 375px;
 background: url(../g/ukmap.gif);
 margin: 10px auto; padding: 0;
 position: relative;
}
#ukmap li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
#ukmap a {display: block; border: solid 0px #f00;}

#ukbox1b {left: 155px; top: 95px; width: 150px; height: 50px;} /* box position and size */
#ukbox2b {left: 265px; top: 150px; width: 250px; height: 80px;}
#ukbox3b {left: 194px; top: 240px; width: 150px; height: 50px;}
#ukbox4b {left: 380px; top: 235px; width: 150px; height: 100px;}
#ukbox5b {left: 332px; top: 278px; width: 80px; height: 50px;}
#ukbox1b a {height: 50px;} /* size of box */
#ukbox2b a {height: 80px;}
#ukbox3b a {height: 50px;}
#ukbox4b a {height: 100px;}
#ukbox5b a {height: 100px;}


#ukbox1b a:hover {background: transparent url(../g/ukmap.gif) -155px -471px no-repeat;} /* box position and image swap */
#ukbox2b  a:hover {background: transparent url(../g/ukmap.gif) -265px -526px no-repeat;}
#ukbox3b a:hover {background: transparent url(../g/ukmap.gif) -194px -616px no-repeat;}
#ukbox4b a:hover {background: transparent url(../g/ukmap.gif) -380px -611px no-repeat;}
#ukbox5b a:hover {background: transparent url(../g/ukmap.gif) -332px -654px no-repeat;}

#ukmap li a{
text-indent:-9999px;
text-decoration:none;
}

/******************************
* DEPOT ADDRESS INFO
******************************/
address{
margin:0px 35px 10px 37px;
line-height:145%;
font-size:75%;
font-style: normal;
text-align: left;
color:#0D385A;
}
address span{
display:block
}

.import-export{
color:#0B527C;
font-size:70%;
}
.logo{margin: 15px 2px 10px 2px;}


/* 13.02.07 updates */
.tableStyle1 {
font-size: 80%;
	width: 90%;
	margin: 1em 0 1em 5%;
	border: solid #1097E5;
	border-width: 1px 0 0 1px;
	border-collapse: collapse;
}

.tableStyle1 th, .tableStyle1 td {
	border: solid 1px #0B527C;
	border-width: 0 1px 1px 0;
	padding: 0.2em;
}
.blueScheme, .blueScheme th, .blueScheme td {
border-color: #9CBAEB;
}
.blueScheme .even {
background-color: #B8D2EA;
}
.blueScheme td{
padding: 3px 7px;;
}
.blueScheme .header{
background-color: #0B527C;
color: #fff;
padding: 3px 7px;;
}
.tableStyle2 {
font-size: 80%;
	width: 90%;
	margin: 1em 0 1em 5%;
	border: solid #9CBAEB;
	border-width: 1px 0 0 1px;
	border-collapse: collapse;
	background-color: #0B507A;
	color: #FEFEFE;
}
.tableStyle2 th, .tableStyle2 td {
border: solid 1px #9CBAEB;
border-width: 0 1px 1px 0;
padding: 0.4em;
}

/* Updates for clocks sept 07 */
.c1, .c2, .c3{
color: #FF9F12;
font-weight: bold;
background:url(../g/time.gif) no-repeat 0 50%;
padding: 0 0 0 20px;
line-height: 20px;
}
#clockwrap{
background-color: #0C4A6F;
border:1px solid #0F73AC;
padding:10px 10px 10px 20px;
margin:5px 5px 10px 5px;
font-size: 70%;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
color: #EAF1F9;
}
.printonly{display: none;}
/* Slide Panel */
#panel{
height: 47px;
background-color: #0C4A6F;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
border-bottom:1px solid #246A9B;
}
#banner a:focus {
outline: none;
}
.slide {
margin: 0;
padding: 0;
}
.btn-slide {
padding: 0 0px 0 0;
margin: 0 auto;
display: inline;
color: #fff;
text-decoration: none;
}
/* liScroll style declarations */
.tickercontainer{ /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 15px;
width: 720px;
overflow: hidden;
height: 47px;
color: #EAF1F9;
background-color: transparent;
margin: 0 10px 0 10px;
}
ul.newsticker { /* that's your list */
position: relative;
list-style-type: none;
margin: 0;
padding:0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin:0;
padding:0;
white-space: nowrap;
text-indent: 5px;
}
ul.newsticker a {
padding: 0;
color: #ffcc66;
margin: 0 2px 0 2px;
} 
ul.newsticker a:hover {
color: #eea100;
} 
/*...thats all folks...*/
