/*
CSS based on code seen at:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

"FREE for anyone to use
You don't have to pay anything. Simply view the source of this page and save the HTML onto your computer. My only suggestion is to put the CSS into a separate file. If you are feeling generous however, link back to this page so other people can find and use this layout too.

Free traffic for your website
If you use this layout for your website send me an email with the link and any other information you have so I can add you to my list of example sites. Once I have a few links I'll publish them on my website and you'll get free traffic!
*/

/* 
Standard Colours:
	20334D - Old Blue	
	D8DF27 - Gold	
	8BC540 - Green	
	16202D - New Blue
	D6E0EB - PaleBlue
	F8F8F8 - LightGrey
*/
/* General styles */

/* IE Fix for elastic layouts */
html
{
	font-size:100%;
}

body
{
	font-size:1em;
	font-family:Arial, Helvetica, sans-serif;
	margin:1%;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:98%;
	background:#FBFBFB;
	min-width:50em;    /* Minimum width of layout - remove line if not required *//* The min-width property does not work in old versions of Internet Explorer */
}

a
{
	color:#369;
}

a:hover
{
	color:#FBFBFB;
	background:#369;
	text-decoration:none;
}

a img 
{
  border: none;
}

h1, h2, h3, h4
{
	margin:1em .5em .2em .2em;
	padding:0;
}

p
{
	margin:.5em .5em .8em 1.5em;
	text-align:justify;
	padding:0;
}

li
{
	text-align:justify;
}

img
{
	margin:.5em;
}

#centered
{
	text-align: center;
}

/* Table Styles */
table
{
	border-collapse: collapse;
	color:#16202D;
	padding: 3px;
	line-height: 1.5;
	vertical-align:text-top;
	font-family: Arial, sans-serif;
}

th, td
{
	padding: 5px;
	vertical-align:text-top;
	text-align: justify;
}

thead th
{
	font-weight: bold;
	line-height: 1.5;
	text-align:center;
}

tbody th
{
	font-weight: bold;
	line-height: 1.5;
	text-align:right
}

caption
{
	text-align:justify;
	font-style:italic;
	font-weight: bold;
	padding:0;
}

/* Titlebar styles */

#titlebar
{
	clear:both;
	float:left;
	width:99%;
	background:#16202D;
	text-align:center;
	border:.1em solid #16202D;
	/* CSS 3 rounded corners */
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
}

#titlebar img, #titlebar a
{
	border:0;
	margin:0;
	background:#16202D;
	text-decoration:none;
}

/* menu styles */

#menu
{
	clear:both;
	float:left;
	width:100%;
}

#menu p, #menu h1, #menu h2
{
	padding:.4em 1.2em 0 1.1em;
	margin:0;
}

#menu h1 a
{
	text-decoration:none;
}

#menu ul
{
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:1.2em 0 0 0;
	padding:0;
}

#menu ul li
{
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}

#menu ul li a
{
	display:block;
	float:left;
	margin:0 0 0 .1em;
	padding:.25em 1.6em;
	text-align:center;
	background:#FBFBFB;
	color:#16202D;
	border-top:.1em solid #16202D;
	border-right:.1em solid #16202D;
	border-left:.1em solid #16202D;
	text-decoration:none;
	position:relative;
	left:1.2em;
	line-height:2em;
	vertical-align:middle;
	font-weight:bold;
	/* CSS 3 rounded corners */
	-moz-border-radius-topleft:.5em;
	-moz-border-radius-topright:.5em;
	-webkit-border-top-left-radius:.5em;
	-webkit-border-top-right-radius:.5em;
}

#menu ul li a:hover
{
	background:#369;
	color:#D8DF27;
}

#menu ul li a.active, #menu ul li a.active:hover
{
	color:#FBFBFB;
	background:#16202D;
	font-weight:bold;
}

#menu ul li a span
{
	display:block;
}

/* sub menu */
#submenu
{
	clear:both;
	float:left;
	width:99%;
	border:.1em solid #16202D;
	background:#16202D;
	padding:.4em 0em;
	text-align:justify;
	-moz-border-radius-topleft:1em;
	-moz-border-radius-topright:1em;
	-webkit-border-top-left-radius:1em;
	-webkit-border-top-right-radius:1em;
}

#submenu ul
{
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}

#submenu ul li
{
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}

#submenu ul li a
{
	display:block;
	float:left;
	margin:0 0 0 .2em;
	padding:.25em 1.5em;
	text-align:center;
	color:#FBFBFB;
	background:#16202D;
	text-decoration:none;
	position:relative;
	left:1.2em;
	vertical-align:top;
	font-weight:bold;
	/* CSS 3 rounded corners */
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
}

#submenu ul li a:hover
{
	color:#D8DF27;
	background:#369;
	/* CSS 3 rounded corners */
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
}

#submenu ul li a.active, #submenu ul li a.active:hover
{
	background:#FBFBFB;
	color:#16202D;
	/* CSS 3 rounded corners */
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
}

/* column container */
.colmask
{
	position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear:both;
	float:left;
	width:99%;				/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
	border-top:.1em solid #16202D;
	border-right:.1em solid #16202D;
	border-left:.1em solid #16202D;
}

/* holy grail 3 column settings */
.holygrail
{
	background:#D6E0EB;    	/* Right column background colour */
}

.holygrail .colmid
{
	float:left;
	width:200%;
	margin-left:-12em; 	/* Width of right column */
	position:relative;
	right:100%;
	background:#FBFBFB;    	/* Centre column background colour */
}

.holygrail ul li
{
	padding:.3em;
}


.holygrail .colleft
{
	float:left;
	width:100%;
	margin-left:-50%;
	position:relative;
	left:24em;         	/* Left column width + right column width */
	background:#D6E0EB;    	/* Left column background colour */
}

.holygrail .col1wrap
{
	float:left;
	width:50%;
	position:relative;
	right:12em;        	/* Width of left column */
	padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
}

.holygrail .col1
{
	margin:.5em 13em .2em 13em;     	/* Centre column side padding:
                           	Left padding = left column width + centre column left padding width
                           	Right padding = right column width + centre column right padding width */
	position:relative;
	left:200%;
	overflow:hidden;
}

.holygrail .col2
{
	float:left;
	float:right;		/* This overrides the float:left above */
	width:10em;        	/* Width of left column content (left column width minus left and right padding) */
	position:relative;
	right:1em;         	/* Width of the left-had side padding on the left column */
}

.holygrail .col3
{
	float:left;
	float:right;			/* This overrides the float:left above */
	width:10em;        	/* Width of right column content (right column width minus left and right padding) */
	margin-right:3em; 	 	/* Width of right column right-hand padding + left column left and right padding */
	position:relative;
	left:50%;
}

.holygrail .col3 a
{
	color:#FBFBFB;
}

/* Footer styles */
#footer
{
	clear:both;
	float:left;
	width:99%;
	background:#FBFBFB;
	border:.1em solid #16202D;
	text-align:center;
	/* CSS 3 rounded corners */
	-moz-border-radius-bottomleft:1em;
	-moz-border-radius-bottomright:1em;
	-webkit-border-bottom-left-radius:1em;
	-webkit-border-bottom-right-radius:1em;
}

#footer p
{
	margin:.2em;
	text-align:center;
}

#nohighlight, #nohighlight a, #nohighlight a img
{
	border:0;
	background:#FBFBFB;
	text-decoration:none;
}