/*** General default settings first ***/
* { margin: 0; padding: 0; }

h2, h3, h4, h5, h6, pre, p, blockquote, ul, ol, dl, fieldset, address, form, table
{ margin: .5em 3%; } 

li, dd { margin-left: 3%; }

fieldset { padding: .5em; }
	
img { border: 0; }

a:link {
color: #336699;
font-weight: 700;
}

a:visited {
color: #993333;
font-weight: 700;
}

a:hover, a:focus {
color: #999933;
font-weight: 700;
text-decoration: none; 
}

a:active {
color: #669999;
font-weight: 700;
}

/*** Getting consistent text sizes across browsers (IE5) ***/
body { font-size: 82%; }
/* Resets 1em to 12px - more or less. The more accurate value of 80% can cause a small gap at the bottom of the mainbox (due to rounding errors?)*/

h2 { font-size: 150%; font-weight: 400; }
h3 { font-size: 125%; font-weight: 700; }
h4 { font-size: 100%; font-weight: 700; }
h5 { font-size: 87.5%; font-weight: 700; }
h6 { font-size: 80%; font-weight: 700; }
/* Headers sized taking body font-size into account to give equivalent to 120%, 100%, 80%, 70%, 64%. */

h1 { 
font-size: 187.5%; 
font-weight: 700;
font-style: italic; 
padding: 0 .5em;
background-color: #084173;
color: #ffffff;
line-height: 1.5em;
}

pre { font-size: 100%; }

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #A5C3DE;
word-spacing: 0.1em;
padding-bottom: 2em;
background-image: url(bkgd-blues.gif);
background-repeat: repeat-x;
background-position: 0 0;
}

/*** Layout stuff ***/
.container {
position: relative;
background-color: #5678a5;
border-right: 1px solid #333366;
border-bottom: 1px solid #333366;
width: 760px;
}

.leftbox {      
position: absolute;
top: 0;
left: 0;
width: 170px;
height: 300px;
background-image: url(home-rore-walk.gif);
background-repeat: no-repeat;
background-position: 0 0;
}

#homelinkbox {
padding: .3em .5em;
border-top: 1px solid #333366;
border-bottom: 1px solid #333366;
}

#leftmenubox #homelinkbox a {
color: #333366;
text-decoration: none;
}

#leftmenubox #homelinkbox p {
color: #333366;
text-align: left;
margin: 0 3%;
}

#leftmenubox {
position: absolute;
top: 105px;
left: 0;
width: 170px; 
}

#leftmenubox p { 
color: #EAEAEA;
text-align: center;
margin: 1em .5em;
}

#leftmenubox a { 
color: #EAEAEA;
text-decoration: none;
}

.header {
margin: 0 0 0 170px;
border-left: 1px solid #333366;
background-color: #A5C3DE;
height: 105px;
}

.menubox {
margin: 0 0 0 170px;
border-top: 1px solid #333366;
border-bottom: 1px solid #333366;
border-left: 1px solid #333366;
background-color: #e7e7ef;
color: #003333;
padding: .3em .5em;
position: relative;
z-index: 50;
}

.mainbox {
position: relative;
margin: 0 0 0 0;
border-left: 1px solid #333366;
background-color: #ffffff; 
color: #003333; 
line-height: 1.4em;
padding-bottom: .8em;
left: 170px;
width: 589px;
}

.thirdcol {
float: left;
width: 33%;
}
.thirdcol p, .thirdcol ul {margin-left: 9%;}
.thirdcol li {margin: .5em 0 .5em 1.5em;}

.halfcol-left {
float: left;
width: 45%;
margin-left: 3%;
word-spacing: 0;
border: 1px solid #333366;
background-color: #E4EEF8;
display: inline; /* to fix IE double-margin bug */
}

.halfcol-right {
float: right;
width: 45%;
margin-right: 3%;
word-spacing: 0;
border: 1px solid #333366;
background-color: #E4EEF8;
display: inline; /* to fix IE double-margin bug */
}

.halfcol-left .imageleft, .halfcol-right .imageleft { margin-top: .5em; }

.lc-col-left {
float: left;
width: 30%;
margin: 8em 0 .5em 3%;
line-height: 1.2em;
display: inline; /* to fix IE double-margin bug */
}

.lc-col-left p { margin: .5em 0; }

.lc-col-right {
float: right;
width: 61%;
margin: .5em 3% .5em 0;
border-left: 1px solid #211C63;
line-height: 1.2em;
display: inline; /* to fix IE double-margin bug */
}

.footer {
margin: 0 0 0 170px;
border-top: 1px solid #333366;
background-color: #084173;
color: #ffffcc;
}
.footer p {
padding-top: 7px;
}

#footlink a { color: #ffffcc; }

.tidesframe {	
width: 670px;
height: 500px;
border-width: 0;
}

/*** Simple floats ***/
.floatleft { float: left; }
.floatright { float: right; }

/*** Floats for images in the textflow (not inside p tags etc.) ***/
.imageright {
float: right;
clear: right;
margin: 1em 3% .5em 1em;
}

.imageleft {
float: left;
clear: left;
margin: 1em 1em .5em 3%;
}


/*** Text styling ***/
.widetext { letter-spacing: .02em; }

.small-right { font-size: 76%; text-align: right; }

.homesubheading {
font-size: 140%; 
font-weight: 700;
color: #663366;
}

.redtext { 
color: #CC0000;
font-weight: 700;
}

.bluetext { 
color: #211C63;
font-weight: 700;
}

h2.bluetext { 
line-height: 1.3em;
}

table.bluetext td { 
vertical-align: top; 
font-family: Arial, Helvetica, sans-serif;
}
table.bluetext {
margin-left: 6%;
font-size: 80%;
}
table.bluetext p {font-size: 150%;}

/*** Miscellaneous bits and bobs ***/
.usualmargins { margin: .5em 3%; }
.marginhack { margin: 0 3%; } /* To sort out IE5 float bug between header and mainbox */
.spacer { clear: both; } 	
.clearleft { clear: left; }
.center { text-align: center; }
.right { text-align: right; }
.strong {font-weight: 700; }

.hr-blue {
width: 95%;
border-style: none;
height: 10px;
background-color: #084173;
color: #084173;
margin: 0 auto;
}

.skip {
height: 0;
width: 0;
overflow: hidden;
}

.buynow { vertical-align: bottom;}

.bottom-right { /* used for company number in shop */
float: right;
clear: right;
margin: .5em 1.5em .5em .5em;
display: inline; /* to fix IE double-margin bug */
}

.u-path { 
float: left;
clear: left;
font-size: 76%;
margin: .5em .5em .5em 1.5em;
display: inline; /* to fix IE double-margin bug */
}

/*** Discounts table for lunar calendar ***/
table.discounts { 
border-collapse: collapse;
font-size: 80%; 
}

table.discounts p { 
font-size: 120%;
margin: .5em; 
}

.discounts td {
border: 1px solid #a5c3de;
text-align: center;
}

/*** General form styling ***/
label {
display: block;
float: left;
text-align: right;
padding-right: 1em;
}

.formbutton {
display: block;
float: left;
padding-left: 8em;
}

/*** Shop forms and buttons ***/
#vieworder form { 
float: right;
display: inline;
margin: 0;
}

#buy input, #vieworder input {
background-color: #a5c3de;
border-right-color: #084173;
border-bottom-color: #084173;
border-left-color: #b6d4ef;
border-top-color: #b6d4ef;
font-weight: 700;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: .1em;
padding-bottom: .1em;
}
#buy input { 
width: 6em;
margin: 0 1.2em 0 .5em; 
}
#vieworder input { 
width: 8.5em;
margin: .5em 1.5em .5em 0; 
}

#buy fieldset { 
padding: 0 .5em .8em .5em;
border: 1px solid #a5c3de;
max-width: 25em;
}

#buy legend { 
font-weight: 700;
padding: .5em .2em;
}

#buy label {
display: inline;
float: none;
text-align: left;
padding-right: 0;
font-size: 115%; 
}

/*** Suckerfish-style drop-down menu ***/
#nav {
list-style: none;
margin: 0;
}

#nav ul {
list-style: none;
margin: 0;
}

#nav a {
display: block; 
font-weight: 700;
color: #636531;	/* oliveish */
text-decoration: none;
padding-right: 1.5em;
}

#nav li {
position: relative; /* otherwise menu disappears in IE6! */ 
float: left; 
margin: 0;
width: auto; /* To stop Opera 'throwing a wobbly'. Is auto ok?*/
}

#nav li ul {
margin-left: -1000em; 
width: 8em; 
position: absolute;
background-color: #e7e7ef; /* not usually visible */
}

#nav li li a {
padding-right: 0;
font-size: 90%;
font-weight: 400;
}

#nav li li {
background-color: #e7e7ef; 
padding: .2em 0 .2em .5em;
width: 8em; 
border: 1px solid #cccccc;
}

#nav li li:hover, #nav li li.sfhover {
background-color: #ffffff;
border: 1px solid #000000;
}

#nav li:hover ul, #nav li.sfhover ul {
margin-left: 0;
}