﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
	<title>The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. 
	iPhone compatible.</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
	<meta name="keywords" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
	<meta name="robots" content="index, follow" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	/* <!-- */
	/* General styles */
	body {
		margin:0;
		font: 0.8125em Arial, sans-serif; line-height: 1; color: #000000;
		padding:0;
		border:0;			/* This removes the border around 

the viewport in old versions of IE */
		width:100%;
		min-width:600px;    	/* Minimum width of layout - remove line if 

not required */
						/* The min-width property does not 

work in old versions of Internet Explorer */
	}
	a {
		color:#000;
		background-color: transparent;
	}
	a:hover {
		color:#fff;
		text-decoration:none;
		background-color: transparent;
	}
	h1, h2, h3, h4 {
		margin:1.2em 0 .2em 0;
		padding:0;
		font-family: Arial, serif; color: #000000;
	}
	
	
	p {
		margin:0.4em 0 .9em 0;
		padding: 0;
		font: 1em Arial, sans-serif; line-height: 1; color: #333;
	}
	ul {
		margin:.4em 0 1.0em 0;
		padding-left: 50px;
		font: 1.0em Arial, sans-serif; line-height: 1; color: #333;
	}
	ol {
		margin:.4em 0 .9em 0;
		padding-left: 50px;
		font: 0.9em Arial, sans-serif; line-height: 1; color: #000000;
	}
	img {
		margin:0px 0 5px;
	}
	dt {
		font: 0.9em Arial, sans-serif; line-height: 3; color: #000000; weight: bold;
	}
	dd {
		font: 0.8em Arial, sans-serif; line-height: 1; color: #333;
		padding-bottom: 5px;
	}
			
	/* Header styles */
	#header {
		clear:both;
		float:left;
		width:100%;
		background-image:url('images/water2_bak2.jpg');
	}
	#header {
		border-bottom:1px solid #000;
	}
	#header h1 {font: 2.5em Georgia, "Times New Roman", serif; letter-spacing: 1px;}
	#header h4 {font: .8em Georgia, "Times New Roman", serif; letter-spacing: 1px; font-style: italic;}
	#header h1,
	#header h4{
		text-align:center;
		background-color: transparent;
	}
	#header p,
	#header h1,
	#header h2 {
		padding:.4em 15px 0 15px;
		margin:0;
	}
	#header ul {
		clear:left;
		float:left;
		width:100%;
		list-style:none;
		margin:10px 0 0 0;
		padding:0;
	}
	#header ul li {
		display:inline;
		list-style:none;
		margin:0;
		padding:0;
	}
	#header ul li a {
		display:block;
		float:left;
		margin:0 0 0 1px;
		padding:3px 10px;
		text-align:center;
		background:#eee;
		color:#000;
		text-decoration:none;
		position:relative;
		left:15px;
		line-height:1.3em;
	}
	#header ul li a:hover {
		background:#369;
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover {
		color:#fff;
		background:#000;
		font-weight:bold;
	}
	#header ul li a span {
		display:block;
	}
	/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging 

divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	 .colleft {
		float:left;
		width:100%;
		position:relative;
		background:#fff;
		border-bottom:1px solid #000;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;
		overflow:hidden;
	}
	/* 2 Column (right menu) settings */
	.rightmenu {
				background:#87b1ce url('/images/water2_bak.jpg') repeat-x;
				}
	.rightmenu .colleft {
		right:25%;			/* right column width */
		background-image:url('images/background_safe_blue.gif');
		/*				left column background colour */
	}
	.rightmenu .col1 {
		width:71%;			/* left column content width (left 

column width minus left and right padding) */
		left:27%;			/* (right column width) plus (left 

column left padding) */
	}



	.rightmenu p {
		margin:.4em 0 .9em 0;
		padding:0;
		font: 0.85em Arial, sans-serif; line-height: 1.2; color: #000000;
	}

	.rightmenu ul li {
		margin:.4em 0 .9em 0;
		padding:0;
		font: 0.8125em Arial, sans-serif; line-height: 1.0; color: #000000;
	}


	.rightmenu a {
		text-decoration: none;
		font-weight: bold;
	}

	.rightmenu .col2 {
		width:21%;			/* right column content width (right 

column width minus left and right padding) */
		left:31%;			/* (right column width) plus (left 

column left and right padding) plus (right column left padding) */
	}
	/* Footer styles */
	#footer {
		clear:both;
		float:center;
		width:100%;
		border-top:0px solid #000;
		background:#87b1ce;
		border-bottom:1px solid #000;
		
	}
	#footer p {
		padding:10px;
		margin:0;
		font-size: 0.7em;
		border-bottom: 1px;
	}
	#footer a {
		text-decoration: none;
	}



	/* --> */
	
/* Main menu settings */
#centeredmenu {
   clear:both;
   float:left;
   margin:0;
   padding:0;
   border:1px solid #000; /* black line below menu */
   width:100%;
   font-family:Georgia, serif; /* Menu font */
   font-size:110%; /* Menu text size */
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   position:relative;
}

/* Top menu items */
#centeredmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
}
#centeredmenu ul li {
   margin:0 0 0 1px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:1px;
}
#centeredmenu ul li a {
   display:block;
   margin:0;
   padding:.6em .5em .4em;
   font-size:1em;
   line-height:1em;
   background:#eeeeee;
   text-decoration:none;
   color:#000000;
   font-weight:normal;
   border-bottom:2px solid #000;
}
#centeredmenu ul li.active a {
   color:#fff;
   background:#3399FF;
}
#centeredmenu ul li a:hover#font-family {
   background:#3399FF; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
   background:#000066; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   top:2em;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
}
#centeredmenu img{
	margin:0;
	padding:0;
	border:0;
	}	
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-size:.85em;
   font-weight: normal; /* resets the bold set for the top level menu items */
   background:#eeeeee;
   color:#000;
   line-height:1em; /* overwrite line-height value from top menu */
   border:2px solid #ddd outset; /* sub menu item horizontal lines */
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background:#000066; /* Sub menu items background colour */
   color:#fff;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}	
	
	
	
	
	
	
	
	
	</style>
</head>
</html>
