body {
	background:#f7f5f4;
	font-size:11px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	position:relative;
	width:760px;
	margin:0 auto;
	}
/*table datas and headers need the font info re-stated for IE */
td,th {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size:11px;
	vertical-align:top;
	}
/*
/////////////////////////////////
//	General purpose styles
/////////////////////////////////
*/
a 				{	color: #f90;		text-decoration:none; font-weight:bold;}
a:link		{	color: #f90;} 
a:visited	{	color: #e87248;} 
a:hover	{	color: #3599cd;}
a:active	{	color: #fc0;} 

/*this puts a small quad icon after every link in a paragraph inside the container element (ie. not the header)*/
div#container p a.quad {
	background:transparent url(../images/quad_tiny.gif) no-repeat right bottom;
	padding-right:1.2em;
}

.fl {float:left;display:inline;}
.fr {float:right;display:inline;}
.ac {text-align:center;}
.ar {text-align:right;}
.al {text-align:left;}

/*colors : can be appended to inline tags such as <p> or <span> etc... */
.white {color:white;}
.blue {color:#3599cd;}
.orange {color:#ff9900;}

h1, h2, h3, h4, h5 {margin:1em 20px 0.6em 20px;position:relative;color:#002157;}
h1 {font-size:1.8em;}
h2 {font-size:1.45em;}
h3 {font-size:1.25em;}
h4 {font-size:1.1em;}
h5 {font-size:1.1em;}

img {border:0;padding:0;margin:0;}
p {margin:1.0em 20px;padding:0;	line-height:135%;}

ul,ol {margin:0.6em 10px;padding:0;}
li {margin:0.6em 10px 0.6em 35px;padding:0;}

hr {
	height:1px;
	background:#32345b;
	color:#32345b;
	margin:1em 20px;
	border:0;
	}

/*some generic table code to make them look nice*/
table {
	/*same margin as a paragraph*/
	margin:1em 30px;
	/*or centered*/
	margin:1em auto;
	padding:0;
	border-collapse:collapse;
	border-bottom:1px #3599cd solid;
	}
caption {
	margin:0.4em auto;  /*needs same margins as it's parent table */
	font-style:italic;
	color:#333;
}
th {
	color:#176dad;
	text-align:left;
	border-bottom:2px #176dad solid;
	padding:2px 0.5em;
	background:white;
	}
td {
	border-top:1px #3599cd dotted;
	text-align:left;
	padding:2px 0.5em;
	}

/*sets classnames used by javascript setTableRowColors()*/
tr.r0 {background:#f5f5f5;}
tr.r1 {}



/*
/////////////////////////////////
//	.clearfix is used to resolve incompatabilities with floats across IE/Gecko platforms
/////////////////////////////////
*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

.clearfix {display:inline-table;}

/* Hides from IE-mac \*/
html .clearfix {height: 1%;}
/* End hide from IE-mac */


/*
/////////////////////////////////
//	Layout elements for use in fixed and fluid designs
/////////////////////////////////
*/
div#footer {
	border-top:1px white solid;
	background:#333;
	padding:1em 0;
	color:#3599cd;
	font-size:0.9em;
	clear:both;
}
/*general content holder*/
div#container {
	background:white url(../images/bg_content.gif) repeat-x left top;
	position:relative;
	margin:0;
	padding-top:1px;
	width:760px;
}


/*
/////////////////////////////////
//	Content elements
/////////////////////////////////
*/
div#content {
	position:relative;
	width:506px;
	padding:12px 0 24px 0;  /* a small amount of vertical padding to balance things out visually*/
}


div#content h4 {
	border-top:1px #999 solid;
	border-bottom:1px #999 solid;
	padding: 0.2em 0;
}

div#content h4 a {
	background:transparent url(../images/arr_tiny.gif) no-repeat right 50%;
	padding-right:1.2em;
}



/*
/////////////////////////////////
//	Sidebar elements
/////////////////////////////////
*/
div#sidebar {
	position:absolute;
	right:0;
	top:1px;
	width:254px;
	padding:12px 0 24px 0;  /* a small amount of vertical padding to balance things out visually*/
	color:white;
	font-size:0.9em; /*Set rule for all sidebar text to be marginally smaller */
	background:#000034;
}

#sidebar h1, 
#sidebar h2, 
#sidebar h3, 
#sidebar h4, 
#sidebar h5 {
	color:#3599cd;
}
#sidebar h1 span, 
#sidebar h2 span, 
#sidebar h3 span, 
#sidebar h4 span, 
#sidebar h5 span {
	background:transparent url(../images/quad_org_blu.gif) no-repeat right center;
	padding-right:1.5em;
}

/*
/////////////////////////////////
//	Header elements, including menus
/////////////////////////////////
*/

div#header {
	border-top:20px #000034 solid;
	background:white url(../images/bg_header.gif) repeat-x left bottom;
	position:relative;
	text-align:left;
	clear:both;
	width:100%;
}

/*logo : span hidden and logo image loaded as background*/
div#header h1.logo {
	position:absolute;
	z-index:100;
	left:1em;
	top:1.5em;
	margin:0;
	width:287px;
	height:27px;
	display:inline; /*necessary due to IE margin bug on floats */
	background:transparent url(../images/bg_logo.gif) no-repeat left top;
}

div#header h1.logo a {
	display:block;
	width:287px;
	height:27px;
}

div#header h1.logo span {
	visibility:hidden;
	margin-left:-2000px;
}

/*header menus*/
ul#navigation {
	text-align:right;
	margin:0;
	padding:0;
	list-style-type:none;
}

ul#navigation li {
	padding:3px 0 10px 0;
	margin:0;
	list-style-type:none;
	position:relative;
}

ul#navigation a {
	margin:0 0.5em;
	padding-right:1.3em;
	background:transparent url(../images/quad_org_wht.gif) no-repeat right center;
}
ul#navigation li.m1 a:hover,
ul#navigation li.m2 a:hover,
ul#navigation li.m3 a:hover {color:#f90;}

ul#navigation li.m1 a.sel,
ul#navigation li.m2 a.sel,
ul#navigation li.m3 a.sel {color:#f90;}

/*first line of nav : has blue angle shadow background*/
ul#navigation li.m1 {
	background:white url(../images/bg_head_m1.gif) no-repeat right bottom;
}
ul#navigation li.m1 a {
	color:white;
	background:none;
}

/*second line of nav*/
ul#navigation li.m2 a {
	color:#000034;
}

ul#navigation li.m3 a {
	font-size:1.3em;
	color:#3599cd;
}


/*
/////////////////////////////////
//	Homepage graphic panel
/////////////////////////////////
*/


div#panel {
	background:white url(../images/bg_panel.gif) repeat-x left top;
	position:relative;
	padding:0;
	margin:0;
	width:100%;
}
/*right aligned graphic */
div#panel div.graphic {
	background:transparent url(../images/panel_people.jpg) no-repeat right top;
	padding:1px;
	margin:0;
	position:relative;
	height:256px; /*256px is the height of the background image, can be taller if more whitespace is ok*/
}
/*left aligned text block*/
div#panel div.body {
	text-align:center;
	margin:60px 360px 60px auto;
	max-width:500px;
	color:#3599cd;
}

/*
/////////////////////////////////
//	Homepage boxes
/////////////////////////////////
*/

div#boxes {
	/*background:#000034 url(../images/bg_boxes.gif) left top;*/
	background-color:#000021;
	position:relative;
	color:#ffffff;
	padding:0;
	margin:0;
	
}

div#boxes .box {
	width:33.2%; /*only 33.2 to allow for a 1px left border on two of the boxes*/
	float:right;
	border-right:1px white solid;
	padding-bottom:1em;
	color:#ffffff;	
}

div#boxes .box.first {
	border:none;
	color:#ffffff;	
}
/* Margin removed and replaced with equivelant padding to allow use of background triangle in top right*/
div#boxes .box h3 {
	color:#3599cd;
	background:#000034 url(../images/bg_boxcorner.gif) no-repeat right top;
	margin:0;
	padding:0.6em 20px;
}
/* Puts a small quad in the box's <h3>*/
div#boxes h3 span {
	background:transparent url(../images/quad_org_blu.gif) no-repeat right center;
	padding-right:1.5em;
}


/*
/////////////////////////////////
//	Form elemtents
/////////////////////////////////
*/

input,
select,
textarea {
	border:1px #3599cd solid;
	padding:2px;
	font-size:11px;
	font-family: Verdana, Helvetica, Arial, sans-serif; /*have to re-state the font details again*/
	color:#005476;
}
	
/*removes border and width properties from checkboxes with class="chbx"*/
#content input.chbx {
	width:auto;
	border:none;
}

/*general rule for width of all inputs and textareas, but not selects*/
#content input,
#content textarea {
	width:26em;
}

/*class="var" used for fields with no fixed width*/
#content input.var,
#content textarea.var {
	width:auto;
}

/*required fields have a different colour and background*/
.req input,
.req select,
.req textarea { 
	background:#eef4f8;
	color:#000;
	}

/*if you are validating forms, you can flag invalid forms fields by giving their parent <p> a class of "invalid" */
p.invalid {
	border-top:2px #ff9900 solid;
	border-bottom:2px #ff9900 solid;
	background:ghostwhite;
	margin-bottom:0.5em;
	padding:0.3em 0;
	color:red;
}

/*general rule for <labels> */
#content label {
	font-style: italic;
	color:dimgray;
	}

/*specifcially for labels with a class of "blk" that we want to layout */
#content label.blk {
	width:11em;
	float:left;
	clear:left;
	text-align:right;
	margin-right:0.3em;
	vertical-align:baseline;
	}
/* put the input and additional textinside a <span class="blk"> so they layout correctly */
#content p span.blk {
	margin-left:11.5em;
	display:block;
	padding:0;
	vertical-align:top;
}

#content p span.hint {
	font-size:0.9em;
	color:#176dad;
}