/****************************************************************
COLOUR CODES:
#FFFFFF		WHITE
#CCCCCC		LIGHT GREY
#999999		MEDIUM GREY
#666666		DARK GREY
#222222		VERY DARK GREY
#FF8888		HIGLIGHT LIGHT RED
#CCFF99		HIGLIGHT LIGHT GREEN

REFERENCE:
side-order: top right bottom left;

MODIFICATIONS:
1.	Move the padding for "block_1" to the items within "block_1" themselves
	(this is to allow the contact feedback to fill the full width of the section).
2.	Change the padding statements that were moved in step 1 into margins.
3.	
*****************************************************************/




/************************** HTML ELEMENTS ************************/
html { font-size: 100%; } /* IE hack for text resize functions */

html>body { font-size: 10px; } /* Safari hack for text resize functions */

body {
	background-color: #FFFFFF;
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* Reduce default browser text size to 10px */
	text-align: center; /* This keeps the content centred on the page */
	min-width: 720px; /* Gecko overflow bug fix, make this value same as wrapper width */
}

h1, h2, h3, h4, p {
	margin: 0;
}

p { font-size: 1.1em; }

h1 { font-size: 2.6em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.3em; }

input, select, textarea, th, td { font-size: 1.1em; }

li li, li p, td p, blockquote p { font-size: 1.1em; }

table {
	font-size: 100%;
}

form {
	margin-top: 0;
	margin-bottom: 0;
}

input, textarea {
	background-color: #FFFFFF;
	color: #000000;
}

.mail_error {
	background-color: #FF8888;
	color: #000000;
	font-weight: heavy;
	padding: 20px;
}

.mail_sent {
	background-color: #CCFF99;
	color: #000000;
	font-weight: heavy;
	padding: 20px;
}

img.heading {
	margin-bottom: 14px;
}

a.link {
	color: #FFFFFF;
	padding: 1px;
	text-decoration: none;
}

a.link:hover {
	background-color: #CCCCCC;
	color: #222222;
	text-decoration: none;
}


p.gallery_popup {
	border: 0;
	margin: 0;
	padding: 0;
}

img.gallery_popup {
	border: 5px solid #666666;
	margin: 7px;
	vertical-align: middle;
}

img.gallery_popup:hover {
	border: 5px solid #CCCCCC;
}
/****************************************************************/




/************************* LAYOUT ELEMENTS ***********************/
#wrapper, #header, #header_nav, #footer_nav, #footer {
	width: 720px; /* Width of site */
	margin-left: auto; /* These two statements ensure the wrapper is centred within the body */
	margin-right: auto;
}

#wrapper {
	text-align: left; /* Overrule body level declaration */
}

#header {
	background-image: url(../images/header.png);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-color: #999999;
	color: #FFFFFF;
	height: 129px;
}

#header_nav {
	background-color: #666666;
	border-bottom: 1px solid #999999;
	color: #FFFFFF;
	height: 2.8em;
}

#footer_nav {
	background-color: #666666;
	border-top: 1px solid #999999;
	color: #FFFFFF;
	height: 2.6em;
}

#footer {
	background-color: #999999;
	color: #FFFFFF;
	height: 2.8em;
}

#clients_rotator {
	background-image: url(../images/clients/clients_01.jpg);
	border: 7px solid #666666;
	margin: 20px auto 30px auto;
	width: 260px; height: 195px;
}

#client_list {
	margin: 20px 0 35px 0;
	text-align: right;
}

#client_list img.heading {
	margin: 0 20px 10px 0;
}

#client_list ul {
	list-style-type: none;
	list-style-position: outside;
	border: 0;
	margin: 0;
	padding: 0;
	width: 220px;
}

#client_list a {
	color: #222222;
	display: block;
	padding: 2px 20px 2px 0;
	text-decoration: none;
}

#client_list a:hover {
	background-color: #666666;
	color: #FFFFFF;
	text-decoration: none;
}

#client_list li {
	font-size: 1.2em;
}

#client_panel {
	background-position: top rght;
	background-repeat: no-repeat;
	height: 100%;
}

#client_panel.chp {
	background-image: url(../images/clients_chp.jpg);
	min-height: 565px;
}

#client_panel.compass {
	background-image: url(../images/clients_compass.jpg);
	min-height: 336px;
}

#client_panel.esh {
	background-image: url(../images/clients_esh.jpg);
	min-height: 434px;
}

#client_panel.ssp {
	background-image: url(../images/clients_ssp.jpg);
	min-height: 526px;
}

#client_panel.others {
	background-image: url(../images/clients_others.jpg);
	min-height: 856px;
}

#client_panel img {
	border: 0;
	margin: 0;
	padding: 0;
}

#block_1 p {
	margin-bottom: 17px;
}

#block_1.clients {
	background-color: #999999;
	color: #FFFFFF;
	float: left;
	padding: 20px 40px 20px 40px;
	text-align: center;
	width: 420px;
}

#block_2.clients {
	background-color: #CCCCCC;
	color: #000000;
	float: left;
	width: 220px;
}

#block_1.contact, #block_1.index, #block_1.privacy, #block_1.copyright {
	background-color: #999999;
	color: #FFFFFF;
	float: left;
	padding: 20px;
	width: 320px;
}

#block_2.contact, #block_2.index {
	background-color: #CCCCCC;
	color: #000000;
	float: left;
	width: 360px;
}

#block_2.copyright, #block_2.privacy, #block_2.index {
	background-color: #CCCCCC;
	background-position: top right;
	background-repeat: no-repeat;
}

#block_2.copyright {
	background-image: url(../images/copyright.jpg);
	min-height: 401px;
}

#block_2.privacy {
	background-image: url(../images/privacy.jpg);
	min-height: 401px;
}

#block_2.index {
	background-image: url(../images/index/index_01.jpg);
}

/* Start Mac IE5 filter \*/
#block_1, #block_2 {
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
}

@media all and (min-width: 0px) {
	#block_1, #block_2 {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important; 
	}
	#block_1:before, #block_2:before {
		content: '[DO NOT LEAVE IT IS NOT REAL]';
		display: block;
		background: inherit;
		padding-top: 32767px !important;
		margin-bottom: -32767px !important;
		height: 0;
	}
}
/* End Mac IE5 filter */

#wrapper {
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
}

/* We need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#wrapper {
	/* Normally a Holly-style hack height: 1% would suffice but that causes 
	IE 5.01 to completely collapse the wrapper - instead we float it */
	float: left;
	/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
	(I saw it happen many moons ago) makes the width of wrapper too small 
	the float: none with the comment is ignored by 5.01,
	5.5 and above see it and carry on about their business
	It's probably fine to just remove it, but it's left here 
	just in case that many moons ago problem rears its head again */
	float/**/: none;
}

/* easy clearing */
#wrapper:after {
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

#wrapper {
	display: inline-block;
}

/*\*/
#wrapper {
	display: block;
}

/* end easy clearing */
#footer {
	clear: both;
}

/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output {
	position: relative;
	z-index: 1000;
}
/****************************************************************/




/****************** HEADER NAVIGATION ELEMENTS ******************/
div.header_nav_button_left, div.header_nav_button_centre, div.header_nav_button_right {
	background-color: #666666;
	height: 100%; width: 140px;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 2.3em;
}

div.header_nav_button_left {
	border-left: 1px solid #999999;
	margin-left: 148px;
}

div.header_nav_button_centre {
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
}

div.header_nav_button_right {
	border-right: 1px solid #999999;
}

div.header_nav_button_left a, div.header_nav_button_centre a, div.header_nav_button_right a, div.header_nav_button_left p, div.header_nav_button_centre p, div.header_nav_button_right p {
	background-color: #666666;
	color: #FFFFFF;
	display: block;
	height: 100%; width: 100%;
	overflow: hidden;
	text-decoration: none;
}

div.header_nav_button_left a:hover, div.header_nav_button_centre a:hover, div.header_nav_button_right a:hover {
	background-color: #FFFFFF;
	color: #666666;
}
/***************************************************************/




/****************** FOOTER NAVIGATION ELEMENTS ******************/
div.footer_nav_button_left, div.footer_nav_button_centre, div.footer_nav_button_right {
	background-color: #666666;
	float: left;
	height: 100%;
	font-size: 1em;
	font-weight: normal;
	line-height: 2.5em;
}

div.footer_nav_button_left {
	border-left: 1px solid #999999;
	margin-left: 98px;
	width: 185px;
}

div.footer_nav_button_centre {
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	width: 140px;
}

div.footer_nav_button_right {
	border-right: 1px solid #999999;
	width: 185px;
}

div.footer_nav_button_left a, div.footer_nav_button_centre a, div.footer_nav_button_right a, div.footer_nav_button_left p, div.footer_nav_button_centre p, div.footer_nav_button_right p  {
	background-color: #666666;
	color: #FFFFFF;
	display: block;
	height: 100%; width: 100%;
	overflow: hidden;
	text-decoration: none;
}

div.footer_nav_button_left a:hover, div.footer_nav_button_centre a:hover, div.footer_nav_button_right a:hover {
	background-color: #FFFFFF;
	color: #666666;
}
/***************************************************************/