/**************************************************************
=CSS reset adapted from Eric Meyer 
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 
**************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td 
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

input, textarea, select 
{
margin: 0;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */
:focus 
{
outline: 0;
}

ol, ul 
{
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table 
{
border-collapse: separate;
border-spacing: 0;
}

caption, th, td 
{
text-align: left;
font-weight: normal;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after 
{
content: "";
}

blockquote, q 
{
quotes: "" "";
}

hr 
{
display: none;
}

img 
{
display: block;
}




/********************
=Core setup 
********************/

html, 
body 
{
background-color: white;
}

#access 
{
position: absolute;
top: 0;
left: -200em;
}



/********************
=Layout 
********************/

/* Common */

#branding, 
#content-header h1, 
#main .wrapper, 
#menu-info 
{
max-width: 100em;
margin: auto;
overflow: hidden;
}

#top h1, 
#menu, 
#top img 
{
float: left;
margin-left: 4%;
}

/* Brand */

#top h1 
{
width: 120px;
height: 21em;
}

#top h1 a 
{
display: block;
width: 120px;
height: 21em;
}

/* Menu-main */

#menu 
{
width: 44%;
}

#menu ul 
{
padding-top: 3.95em;
font-weight: bold;
background: url("../img/services-bg.gif") 70px 66% no-repeat;
}

#menu a, 
#menu strong 
{
display: block;
padding: 0.25em 0.4em;
border: 1px solid #f00;
width: 5.25em; 
background: #f00;
}

#menu a:hover 
{
background: black;
border: 1px solid #ffa3a3;
}

#menu strong 
{
background: #900;
color: #ffa3a3;
border: 1px solid #ffa3a3;
}

	/* Services sub-menu */
	
	#services 
	{
	position: relative;
	}
	
	#services ul
	{
	position: absolute;
	left: 8em;
	top: -5.79em;
	padding-top: 0; 
	border-left: 1px solid #ffa3a3;
	}
	
	#menu #services ul, 
	#menu #services ul strong 
	{
	font-weight: normal;
	}

	#services ul a, 
	#services ul a:hover, 
	#services ul strong 
	{
	border-left: 0;
	width: 16.5em;
	}
	
	/* Top and bottom lines for pseudo parenthesis */
	
	#services .first-child a 
	{
	border-top: 0;
	background: url("../img/services-bg.gif") -75px 0 no-repeat;
	}
	
	#services .first-child span
	{
	display: block;
	padding-top: 1px; 
	}
	
	#services .first-child a:hover
	{
	border-top: 1px solid #ffa3a3;
	background: black;
	background-image: none;
	}

	#services .first-child a:hover span, 
	#services .last-child a:hover span 
	{
	padding: 0; 
	}

	#services .last-child a 
	{
	border-bottom: 0;
	background: url("../img/services-bg.gif") -75px 100% no-repeat;
	}

	#services .last-child span
	{
	display: block;
	padding-bottom: 1px; 
	}
	
	#services .last-child a:hover
	{
	border-bottom: 1px solid #ffa3a3;
	background: black;
	background-image: none;
	}


/* Top image */

#top img 
{
width: 280px;
height: 210px;
}

/* Header */

#content-header h1 span
{
display: block;
padding: 14px 0 13px 20%;
}

/* Main */

#main .wrapper 
{
position: relative;
}

#content 
{
padding: 8px 36% 72px 20%;
min-height: 270px;
background: url("../img/ml-watermark.gif") 70% 66px no-repeat;
}

#map 
{
width: 100%;
height: 350px;
border: 1px solid #999;
}

#menu-sub, 
#content-sub 
{
position: absolute;
top: 22px;
left: 4%;
width: 14%;
}

#content-sub 
{
left: 68%;
width: 280px;
}

/* Menu-info */

#menu-info 
{
position: relative;
}

#menu-info #iso-9001, 
#menu-info #go-top 
{
display: block;
text-indent: -200em;
}

#menu-info #iso-9001 
{
margin: 0 36% 12px 20%;
width: 121px;
height: 71px;
border: 1px solid #999;
background: url("../img/ukas-9001-2000.gif") no-repeat;
}

#menu-info #go-top 
{
padding: 0;
position: absolute; 
top: 91px;
left: 13%;
width: 56px;
height: 56px;
background: url("../img/go-top.gif") no-repeat;
}

#menu-info #go-top:hover 
{
background: url("../img/go-top.gif") 0 -100px no-repeat;
}

#menu-info ul
{
border-top: 1px solid #ccc; 
padding: 0.429em 0;
margin: 0 36% 0 20%;
font-size: 130%;
width: 44%;
overflow: hidden;
}

#menu-info li 
{
float: left;
margin-right: 1px;
}

#menu-info #watershed 
{
padding-bottom: 2em;
}


/* Images */

.swf, 
img.spaced, 
div.img 
{
margin: 18px 0;
}

#dredging-depth 
{
margin-left: -99px;
}

div.img 
{
font-size: 92.86%;
color: #666;
}



/********************
=Colour and style
********************/

#top 
{
background: #c40000 url("../img/top-bg.gif") 50% 0 repeat-y;
}

#content-header 
{
color: white;
background: black;
border-top: 3px solid white;
border-bottom: 3px solid white;
}

/* Links and active menu items */

#top a 
{
color: white;
}

#main 
{
background: url("../img/main-bg.gif") repeat-x;
}

#main a, 
#main a:link
{
color: #f00;
}

#main a:visited 
{
color: #d92121;
}

#menu-info a 
{
color: #999;
}

#content .skip a, 
#menu-sub a, 
#menu-sub strong, 
#content-sub a, 
#content-sub strong 
{
margin-top: 1px;
display: block;
padding: 2px 5px 3px;
}

#menu-info a, 
#menu-info strong 
{
display: block;
padding: 2px 5px 3px;
}

#main a:hover, 
#menu-info a:hover 
{
color: white;
background-color: black;
}

#menu-sub strong, 
#content-sub strong, 
#menu-info strong 
{
color: #666;
background-color: #e5e5e5;
}

#menu strong:hover, 
#menu-sub strong:hover, 
#content-sub strong:hover 
{
cursor: default;
}

/* Dredging fleet */

#dredgers a, 
#dredgers strong
{
padding-top: 76px; 
background: url("../img/thumb-dredgers.gif") no-repeat;
}

#barges a, 
#barges strong
{
padding-top: 169px;
background: url("../img/thumb-barges.gif") no-repeat;
}

#dredgers a:hover 
{
padding-top: 76px; 
background: black url("../img/thumb-dredgers.gif") 0 -200px no-repeat;
}

#barges a:hover
{
background: black url("../img/thumb-barges.gif") 0 -200px no-repeat;
}

#dredgers strong 
{
background: #e5e5e5 url("../img/thumb-dredgers.gif") 0 -400px no-repeat;
}

#barges strong 
{
background: #e5e5e5 url("../img/thumb-barges.gif") 0 -400px no-repeat;
}

#content .skip, 
#main .prompt 
{
font-size: 92.86%;
}



/* Tables */

caption span
{
display: block;
}

th, td 
{
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 2px 4px;
}

thead th, 
tbody td 
{
width: 30%;
}

tbody th, 
#attribute 
{
width: 20%;
}

thead th, 
.row-head
{
font-weight: bold;
}

#attribute, 
.row-head
{
border-left: 1px solid #ccc;
}

thead th, 
tbody.even th, 
tbody.even td 
{
background: #f0f0f0;
}

thead th 
{
border-top: 1px solid #ccc;
}

#attribute
{
text-indent: -200em;
}

tbody td[colspan="2"]
{
text-align: center;
}




/********************
=Typography
********************/

body {
font-family: "Trebuchet MS", Helvetica, Arial, Candara, sans-serif;
font-size: 62.5%; /* Sets everything to 10px assuming defaults */
line-height: 1.286;
color: #333;
}

a, 
a:link 
{
text-decoration: none;
}

#main strong, 
#menu-info strong 
{
font-weight: bold;
}

#main em 
{
font-style: italic;
}


#top, 
#content-header, 
#main 
{
font-size: 100.01%; /* Fix early Firefox rounding errors */
}

#top h1 
{
text-indent: -200em;
background: transparent url("../img/brand.gif") 0 50% no-repeat;
}

#menu, 
#menu-sub, 
#content-sub 
{
font-size: 130%;
}

#menu 
{
line-height: 1;
}

#content 
{
font-size: 140%;
}

/* Headings */

h1, 
h2, 
h3, 
#main caption span, 
#contact legend span
{
font-family: /* "Placard MT",*/ Impact, Charcoal, sans-serif;
font-weight: normal;
text-transform: uppercase;
line-height: 1;
letter-spacing: 1px;
}

#content h2, 
#content h3, 
#main caption span, 
#contact legend span
{
margin-top: 2em;
margin-bottom: 0.667em;
font-size: 128.57%;
color: black;
}

#menu-sub h2, 
#content-sub h2 
{
font-size: 115.38%;
color: black;
padding: 0 0 5px 5px;
}


/* Header */

#content-header h1 span
{
font-size: 244.4%;
letter-spacing: 1px;
}

#content-header h1 span abbr 
{
font-size: 116.667%;
line-height: 0.857;
}

/* CAPS */

.uc 
{
text-transform: uppercase;
}

/* Small caps */

.sc 
{
font-size: 85%;
}

/* Paragraphs */

#content p, 
#content .first-child
{
margin-top: 0.857em;
}

/* Superscript / Subscript */

sup, 
sub
{
font-size: 71.43%;
vertical-align: top;
}

sub 
{
vertical-align: -20%;
display: inline;
}

/* Lists */

#content li 
{
margin-top: 0.429em;
}

#content ul 
{
list-style: disc;
}

	#content ul li 
	{
	margin-left: 1.75em;
	}

#content ol 
{
list-style: decimal;
}

	#content ol li 
	{
	margin-left: 2.5em;
	}

#content .no-list
{
list-style: none;
}

	#content .no-list li
	{
	margin-left: 0;
	}
	
#sitemap #dredging li
{
margin-left: 1.75em;
}

/* Microformatting */

.org 
{
font-weight: bold;
}

.value 
{
white-space: nowrap;
}

#content-sub #contact-details strong 
{
margin-top: 0;
display: inline;
padding: 0;
color: #333;
background-color: transparent;
}

#contact-details li.adr,  
#contact-details #tel li 
{
padding: 0.429em 0 0 5px;
}



/* Forms */

legend span 
{
display: block;
}

input, 
textarea, 
select 
{
font-size: 10pt;
color: #333;
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
}

input.text, 
textarea 
{
padding: 0.25em 0.33em 0.25em;
vertical-align: middle;
}

input.text, 
textarea, 
select 
{
background: #f0f0f0;
}

input.text:focus, 
textarea:focus 
{
border: 2px solid #f00;
background-color: white;
}

input.submit 
{
font-weight: bold;
color: #f00;
text-transform: uppercase;
margin-top: 3px;
}

button:hover, 
input.submit:hover 
{
color: black;
cursor: pointer;
}

label 
{
display: block;
margin-top: 0.3em;
}

#contact label, 
#contact input.submit 
{
margin-top: 0.67em;
}

optgroup 
{
background-color: #e5e5e5;
}

option 
{
background-color: white;
}

li.required 
{
font-weight: bold;
 }
 
li.optional {
color: #666;
}
 
em.required 
{
color: #999;
font-size: 92.86%;
}

#content em.required, 
#content .required input, 
#content .required textarea 
{
font-style: normal;
font-weight: normal;
}

.invalid 
{
font-weight: bold;
color: #f00;
}

#content form 
{
width: 99%;
}

form .full 
{
width: 96%;
}

form .half 
{
width: 48%;
}

input.text, 
select, 
textarea 
{
display: block;
}

form p span 
{
display: block;
font-weight: normal;
}

#contact span 
{
font-weight: normal;
display: block;
color: #808080;
}

#contact label strong 
{
color: #f00;
display: block;
}

p#confirmation 
{
background-color: #e5e5e5;
padding: 6px;
}