/* Colours
Background: #262626 or really darker #0d0d0d
Dark Grey: #222
Light Grey: #868686
Red: C91015
Pink: #f4d2d0
Dark Blue #172743
Blue: #396ca3 or #356DA8
Cyan: #46acd3
Light Blue: #99E5FF
Sand: #dacf66
Yellow: #fed80e
Green: #6DFF03
Dark Green: 02AA07
Light Green: 8FFF94
Pink-Purple: DAA3CC
*/


/* Neutralise styling:  */
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,img,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1em;
	vertical-align: baseline;}

/* Eliminate border around link images */
a img, :link img, :visited img {border: 0;}

input, select, textarea { font-size: 100%; }

html {height: 1%; }
/* Resets 1em to 10px */
body {font: 62.5% "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
color: #fff; background: #356DA8 url("../img/bkg.jpg") left top no-repeat; text-align: center; margin: 0 auto;}

/* Font sizes and line heights
Keeping the baseline grid */
p, li, li li, dd, td, th { font-size: 1.3em; line-height: 1.5;}
p { margin-bottom: 1.8em; }
li, dd { margin: 0.6em 0;}
h2 { font-size: 2.8em; color:#fed80e; margin-bottom:0.45em;}
h3 { font-size: 1.9em; line-height: 1em; margin: 0.5em 0; color: #8FFF94; font-weight: lighter; font-style:italic; border-bottom: 1px dotted #8FFF94; }
h4 { font-size: 1.4em; line-height: 1.5em; text-transform: uppercase; color: #f4d2d0; font-weight: bolder;}
ul, ol { margin-bottom: 0.9em; }
blockquote { border: 1px solid #444; padding: 0.8em 1em; margin-bottom: 1.8em;}
blockquote p { margin-bottom: 0; }
blockquote:last-child { margin-bottom: 0; }
strong {background: #46acd3;}
em {color: #DAA3CC;}

/* Apply left margin: Only to the few elements that need it: */
li, dd, blockquote {margin-left: 1.8em;}

/* Miscellaneous conveniences: */
form label { cursor: pointer; }
acronym, abbr {border-bottom:1px dotted; cursor:help;}
fieldset { border: none;}
code {font-family: 'Courier New', Courier, Fixed;}
table {border-collapse: collapse; border-spacing: 0; margin-top: 1em;}
th {text-align: left; text-transform: uppercase; width: 24.3em; color: #DAA3CC;}
table td {margin-right: 10px;}
.clear {clear:both;}
.left { float: left; margin: 0 3.6em 1.8em 0; }
.right { float: right; margin: 0 0 1.8em 1.8em; }

dt {font-size: 1.8em; font-weight: bold; color: #f4d2d0;}

/* Links */
a { color: #fff;}
a:hover {color: #fed80e;}
dt a {color: #6DFF03; }
dt a:hover {color: #172743;}

#footer a:hover {color: #8FFF94;}

/* Layout and Positioning 
-----------------------------------*/
#wrapper {width: 80em; height: 524px; margin: 0 auto; text-align: left;}
#content {padding-bottom: 1em; float: left;}

#footer {clear: both;}
#footer p {text-align: center;}


/* header, Logo and utility links
-----------------------------------*/
#header {position: relative;}
#header h1, #header #linkhelp, #header #linkmes { text-indent: -5000px;}
#header ul {list-style: none; }
#header #logo {position: relative; width: 100%;}
#header #logo ul {margin-bottom: 0;}
#header #logo li {margin: 0;}
#header h1 {position: absolute; left:24em;  top: 4em;  background: url("../img/meskids.gif") center top no-repeat;}
#header h1 a {display: block; width: 315px; height: 56px;}

#header #linkhelp {position: absolute; top: 0; right: 1em; background: url("../img/lifering.gif") right top no-repeat;}
#header #linkhelp a {display: block; width: 104px; height: 98px;}
#header #linkmes {position: absolute; top: 0; left: 2em; background: url("../img/anchor.gif") right top no-repeat;}
#header #linkmes a {display: block; width: 104px; height: 98px;}

/* Links on home page 
-----------------------------------*/
#home #content {position: relative;}
#home #ocean {width: 800px; height: 524px; margin-top: 20px; position: relative;}
#home #ocean img {position: absolute; border: 1px solid #fff; z-index: 1;}
#home #ocean ul {list-style: none; z-index: 10;}
#home #ocean a {position: absolute; width: 10.2em; height: 120px; text-decoration: none; display: block; z-index: 100;}
#home #linkmes {top: 0; left: 28px;}
#home #linkhelp {top: 0; left: 635px;}
#home #linkgames {top: 400px; left: 180px;}
#home #linkknow {top: 157px; left: 312px;}
#home #linkaction {top: 176px; left: 175px;}
#home #linkresources {top: 390px; left: 635px;}
#home #linkchallenge {top: 272px; left: 434px;}
#home #ocean a:hover {}
#home #ocean a .note {position: absolute; bottom: -1.7em; width: 9.4em; padding: 0.2em 0.5em; background: #C91015; color:#fff; left: -5000px; font-weight: bold;}
#home #ocean a:hover .note {left: -1px;}
#home #ocean a { background: url(noimg.png);}
#home #ocean a:hover {background-position: 0 0;}

/* Inner pages
-----------------------------------*/
#inner #content {padding-top: 2em;}
#inner #sidecol {float: left; width: 18em;}
#inner #main {margin-left: 20em;}



/* Main Primary Navigation on inner pages
-----------------------------------*/
#nav ul {float: left; width: 80em; background: #46acd3; margin-top: 9em;}
#nav li {float: left; margin: 0; padding: 0;}
#nav a {float: left; display: block; background: #46acd3; padding: 0.25em 0.7em; text-decoration: none; font-size: 120%;;}
#nav a:hover {background: #C91015; color: #fff;}

/* Secondary Navigation on inner pages
-----------------------------------*/
#sidecol li {margin: 0.1em 0; list-style: none;}
#sidecol li a {color: #fff; display: block; padding: 0.3em 0.3em 0.3em 32px; text-decoration: none; font-size: 1.1em; }
#sidecol li a:hover {}
#sidecol li a:visited {background: url("../img/check.png") left 2px no-repeat;}

/* specific miscellanous elements
-----------------------------------*/
#coastalzones th {}
#coastalzones td {border-bottom: 1px dotted #daa3cc; padding: 5px 0;}
#coastalzones td.arrow {vertical-align: middle;}