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

h2, h3, h4, h5, h6, pre, p, blockquote, ul, ol, dl, fieldset, address, form
{ 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: 700; }
h3 { font-size: 125%; font-weight: 700; }
h4 { font-size: 100%; font-weight: 700; }
h5 { font-size: 100%; font-weight: 400; }
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;
padding: 0 1em;
background-color: #dde9ff;
color: #cd071d;
line-height: 1.5em;
letter-spacing: .06em;
}

pre { font-size: 100%; }

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #b2d2e1;
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: #b2d2e1;
border-right: 1px solid #333366;
border-bottom: 1px solid #333366;
width: 960px;
}

.leftbox {      
position: absolute;
top: 0;
left: 0;
width: 170px;
height: 700px;
background-image: url(../ocean/exhibition/digibooth/images/moonoverseasidepanelblue.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

.homelinkbox {
position: absolute;
top: 105px;
left: 0;
width: 170px;
padding: .3em .5em;

}

.homelinkbox a {
color: #333333;
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; 
left: 170px;
width: 789px;
}
.imagemargin {
margin: .5em 0em .5em 1em;
}

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

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

.quoteboxl {
/* Apply to p tag etc. */
float: left;
clear: left;
width: 50em; 
margin-left: 8em;
padding: .5em;
display: inline; /* To fix IE double margin bug */
border: 3px solid #999999; 

text-align: justify;
color: #660000;
background-color: #FFFFFF;
line-height: 1.5em;
}

.eggsbox {width: 56em; margin: 0 0; }

.skate {
/* Apply to p tag etc. */
float: left;
/*clear: left;*/
width: 22em; 
/*margin-left: 1em;*/
padding: 1em;
display: inline; /* To fix IE double margin bug */
border: 3px solid #999999; 
/*text-align: justify;*/
color: #660000;
background-color: #E1EFFA;
line-height: 1.5em;
}

.skateright {
/* Apply to p tag etc. */
float: right;
/*clear: left;*/
width: 22em; 
/*margin-left: 1em;*/
padding: 1em;
display: inline; /* To fix IE double margin bug */
border: 3px solid #999999; 
/*text-align: justify;*/
color: #660000;
background-color: #E1EFFA;
line-height: 1.5em;
}
.shark {
/* Apply to p tag etc. */
float: right;
clear: right;
width: 22em; 
margin-left: 1em;
padding: 1em;
display: inline; /* To fix IE double margin bug */
border: 3px solid #999999; 
/*text-align: justify;*/
color: #660000;
background-color: #E1EFFA;
line-height: 1.5em;
}

/*** Hack to correct IEwin pixel-jog bug ***/
/* Hide hack from IEmac \*/
* html .skate {width: 24em;}
* html .skateright {width: 24em;}
/* End hide hack from IEmac */

.narwal {
/* Apply to p tag etc. */
float: left;
/*clear: left;*/
width: 30em; 
margin-left: 1em;
padding: 1em;
display: inline; /* To fix IE double margin bug */
border: 3px solid #999999; 
text-align: justify;
color: #660000;
background-color: #E1EFFA;
line-height: 1.5em;
}
.quoteboxcredits {
/* Apply to p tag etc. */
float: left;
clear: left;
width: 44em; 
margin-left: 8em;
padding: .5em;
display: inline; /* To fix IE double margin bug */
border: 3px solid #999999; 

text-align: center;
color: #660000;
background-color: #FFFFFF;
line-height: 1.5em;
}

.quoteboxr {
/* Apply to p tag etc. */
float: right;
clear: right;
width: 30em; 
margin-left: 1em;
padding: .5em;
display: inline; /* To fix IE double margin bug */
border: 3px solid #999999; 
font-family: Georgia, "New Century Schoolbook", Times, serif;
text-align: justify;
color: #660000;
background-color: #FFFFFF;
line-height: 1.2em;
}

.quoteboxseaweed {
/* Apply to p tag etc. */
float: right;
clear: right;
width: 10em; 
height: 33em;
margin-left: 1em;
padding: .5em;
display: inline; /* To fix IE double margin bug */
border: 3px solid #999999; 
font-family: Georgia, "New Century Schoolbook", Times, serif;
text-align justify;
color: #660000;
background-color: #E1EFFA;
line-height: 1.2em;
}

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


/*** Hack to stop IEwin breaking the layout if a floated right element reaches the bottom of the div ***/
/* Hide hack from IEmac \*/
* html .header {height: 1%;}
* html .menubox {height: 1%;}
* html .mainbox {height: 1%;}
* html .footer {height: 1%;}
/* End hide hack from IEmac */


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

/*** Hack to correct IEwin pixel-jog bug ***/
/* Hide hack from IEmac \*/
* html .floatright {margin-right: -3px;}
* html .floatleft {margin-left: -3px;}
/* End hide hack from IEmac */

/*** 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%;
}

.portfolioimage {
float: left;
margin: .5em 1em .5em 1em;
font-family: Georgia, "New Century Schoolbook", Times, serif;
text-align: center;
color: #000000;
}
.portfolioimage h3 { 
margin: .5em 0;
}

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

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


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

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

/*** Form styling ***/
label {
display: block;
float: left;
width: 7em;
text-align: right;
padding-right: 1em;
}

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

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

/*** Menu stuff vertical ***/
.nav2 span {display:none;} 

a.nav2:link, a.nav2:visited { 
display: block; 
position: relative; 
width: 160px; 
margin-bottom: 1em;
margin-left: 0em;
text-align: center; 
text-decoration: none; 
color: #547684; 
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
} 



.hoverimage {
position: relative;
float: left;
margin: .5em 0em .5em 1em;
text-align: center; 
color: #660000;
}
.hoverimage p { margin: .2em 0.2em;
text-align: left; }

.hoverimage span { display: none; }

a.hoverimage:hover { border-top: #fff 0 solid; }
/* to get IE to show the rollover */

a.hoverimage:hover span {
position: absolute;
display: block;
top: 10px;
left: 10px;
width: 180px;
height: 180px;
background-image: url(images/nav-bkgd.gif); 
}

a.hoverimage:link, a.hoverimage:visited, a.hoverimage:hover, a.hoverimage:focus, a.hoverimage:active {
color: #000000;
font-weight: 700;
text-decoration: none; 
}

.hoverimagelitter {
position: relative;
float: left;
margin: .5em 0em .5em 1em;
text-align: center;
font-size:16px;
color: #660000;
}
.hoverimagelitter p { margin: .5em 1em;
text-align: left; }

.hoverimagelitter span { display: none; }

a.hoverimagelitter:hover { border-top: #fff 0 solid; }
/* to get IE to show the rollover */

a.hoverimagelitter:hover span {
position: absolute;
display: block;
top: 10px;
left: 10px;
width: 130px;
height: 130px;
background-image: url(images/nav-bkgd.gif); 
}

a.hoverimagelitter:link, a.hoverimagelitter:visited, a.hoverimagelitter:hover, a.hoverimagelitter:focus, a.hoverimagelitter:active {
color: #000000;
font-weight: 700;
text-decoration: none; 
}

.box500{
width: 500px;
margin-left: 100px;
} 

.box600{
width: 600px;
border: 3px solid #999999; 
position: relative; 
} 
.hoverimage2 {
position: relative;
float: left;
text-align: center; 
color: #660000;
margin: .5em 0em .5em 1em;
}
.hoverimage2 p { margin: .5em;
text-align: left; }

.hoverimage2 span { display: none; }

a.hoverimage2:hover { border-top: 0 solid #000000; }
/* to get IE to show the rollover */

a.hoverimage2:hover span {
position: absolute;
display: block;
top: -140px;
left: -260px;
width: 250px;
background-color:#E1EFFA;
}

a.hoverimage2:link, a.hoverimage2:visited, a.hoverimage2:hover, a.hoverimage2:focus, a.hoverimage2:active {
color: #000000;
font-weight: 400;
text-decoration: none; 
}

.topleft{
position: absolute;
width: 340px;
padding: 10px 0;
border-bottom: 5px solid #000000;
background-color: #000099;
color: #ffffff;
text-align: center;
z-index:2;
}

.topright{
position: absolute;
width: 600px;
left: 340px;
padding: 10px 0;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
background-color: #336600;
color: #ffffff;
text-align: center;
z-index:2;
}

.nav3 span {display:none;} 

a.nav3:link, a.nav3:visited { 
text-decoration: none; 
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
color: #000000; 
font-size:125%; line-height:1.5em
} 

a.nav3:focus, a.nav3:hover, a.nav3:active {
border: 0; /* A hack to get IE5 to show the popups */
} 

a.nav3:focus span, a.nav3:hover span {
display: block;
position: absolute;
top: 240px;
left: 420px;
width: 160px;
background-color:#E1EFFA;
padding: 5px;
border: 2px solid #000000;
text-align: left;
color: #000000;
line-height: 1.3em;
font-weight: 400;
z-index: 1000;
}