/* colour chart
#999 - #111   represents shades of gray 111 - black - 999 - lighter gray
#b0d050 - darker green - used for selected links and verticle bar.
#e0f0c0 - pale green hover over colour - see also js.css
rgb(3,171,219)- horizontal line colour was #40b0d0 
#e0f0c0  - hover over the horizontal button
#ff4d04  - used for headings

*/

body {
	margin: 0;
	font-size: 0.9em;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	background-color: #eee;
	text-align: center;
}

/* General link styles for the whole site, content and all */
a:link, a:active, a:visited {
	text-decoration: none;
	color: #6495ED;
}

a:hover {
	text-decoration: underline;
	color: #ff4d04;
}
/* End General link styles */

p, ul {
	list-style-type: none;
	margin: 1em 0 1em 0;
}

h1, h2, h3, #header h1 span {
	margin: 0 0 .4em 0;
	color: #b0d050;
}

h1, h2 {
	font-size: 1.6em;
	font-weight: bold;
}

h3 {
	font-size: 1.1em;
	font-weight: bold;
}

h3.pay {
	font-size: 1.1em;
	margin: 0 0 0 0;
	text-align: left;


}


h4 {
	font-size: 1.0em;
	font-weight: normal;
}

h5 
{
	font-size: 1.0em;
	margin: 0 0 0 0;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	line-height: 1.0em; 

}

h5.f1
{
	background-color: #e0f0c0;
	background-repeat: repeat;
}

h5.e1
{
	background-color: #e0f0c0; 
	background-repeat: repeat;
	margin: 2px 2px 2px 2px;
	text-align: right;
}


h5.f2
{
	background-color: #b0d050; 
}

h5.f3
{
	text-align: left;
	margin: 2px 0 2px 2px;
}

h5.e3
{
	text-align: right;
	margin: 2px 2px 2px 2px;
}


h5.reg
{
	text-align: left;
	margin: 5px 10px 5px 5px;


}

h5.pform
{
	text-align: right;
	margin: 5px 10px 5px 5px;


}


span.greentext
{
	font-size: 1.1em;
	margin: 0 0 0 0;
	text-align: left;
	color: #b0d050;
	font-weight: bold;
}


/* see also IE.css, I had to set a left margin to show the image. */
ul.features  {
	line-height: 180%;
	font-size: 1.0em;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	font-weight: normal;
	list-style-image: url('../images/tick2.gif')
}

/* 
	'Site container' styles. The site contaier is the thing that constrains wht width of the site, initially 
	here to 990 px. border-right and border-left can ve changed here which affects what is currently the thin
	grey lines dow the side of the container.
	
	This is also where the 'left column' backgroun image is set. In the current case it's a 172x1 pixel solid grey
	image which when repeated vertically make the dark, grey vertical bar that the left nav sits on. The image sits
	right next to the left edge of the site container but the first 5 or so pixels of the left of the image are white.
*/
#siteContainer {
	width: 1000px;
	margin: auto auto;
	text-align: left;
	border-top: none;
	position: relative;
	border-right: 4px #999 solid;
	border-left: 4px solid #999;
	background-color: #fff;
	/*background-image: url(../images/header-and-navigation/left_nav_background.png);*/
	background-repeat: repeat-y;
}

/* 
	Set a 1 pixel wide gradient image, repeating horizontally as the header background 
*/
#header {
	/*background-image: url(../images/header-and-navigation/header_repeat.png);
	background-position: 0 0;
	background-repeat: repeat-x;
	background-color: #b0d050;*/
}

#header img {
	vertical-align: top;
	float: left;
	margin: 4px 0px 4px 4px;
}

#header img.right {
	vertical-align: top;
	float: right;
	margin: 4px 4px 4px 0;
}

#header h1 {
	float: right;
	font-size: .75em;
	color: #666;
	line-height: 1.4em;
	text-align: right;
	padding: 4px 8px 0 0;
	font-weight: bold;
}

#header h2 {
	vertical-align: center;
	float: left;
	font-size: 1.7em;
	color: #b0d050;
	text-align: center;
	padding: 40px 8px 0 105px;
	font-weight: bold;
}

h2.links {
	vertical-align: top;
	float: left;
	font-size: 0.9em;
	text-align: left;
	padding: 10px 10px 10px 40px;
}



/* 
	Styles for keywords in /includes/header.html Currently set as not displayed as you had it originally.
	Remember this type of thing is frowned upon by the search engines and you could get kicked of (if they find out)
	I left the font and padding style in I think just to see what it would look like of it was displayed. You could 
	try it by removinng the display: none line, or changing it to display: block.
*/
h1.kw {
	display: none;
	font-size: 75em;
	color: #aaa;
	line-height: 1.4em;
	text-align: center;
	padding: 6px 10px 6px 10px;
}

/* 
	Horizontal navigation styles 
*/
#horizNavigation {
	clear: both;
	font-size: 1em;
	line-height: 1.25em;
	color: #555;
	background-color: rgb(3,171,219);
	font-weight: none;
	/*background-image: url(../images/header-and-navigation/large_button_repeat.png);*/
	background-position: 0 100%;
	background-repeat: repeat-x;
	border-top: 1px #999 solid;
	border-bottom: 1px #666 solid;
	padding-bottom: 6px;
}

#horizNavigation ul, #horizNavigation li {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#horizNavigation ul:after {
	content: '.';
	visibility: hidden;
}

#horizNavigation li {
	float: left;
}

#horizNavigation a {
	display: block;
	padding: 3px 16px 3px 16px;
	border-right: 1px #666 solid;
}

/* Styles for buttons in the horiz navigation */
#horizNavigation a:link, #horizNavigation a:active, #horizNavigation a:visited {
	/*background-image: url(../images/header-and-navigation/large_button_repeat.png);
	background-position: 0 100%;
	background-repeat: repeat-x;*/
	color: #555;
	text-decoration: none;
}

/* Styles for buttons in the horiz navigation - Current page, current page hover */
#horizNavigation a:hover, #horizNavigation a.over, #horizNavigation a.over:hover {
	color: #333;
	background-color: #b0d050;
	text-decoration: none;
	/* background-image: url(../images/header-and-navigation/large_button_repeat_over.png); */
	background-position: 0 100%;
	background-repeat: repeat-x;
}

/* 
	Hover styles for buttons in the horiz navigation which aren't the current page
	(Or a parent of the current page)
*/
#horizNavigation a:hover {
	background-color: #e0f0c0;
	/*background-image: url(../images/header-and-navigation/large_button_repeat_over_feint.png);*/
}

/* This is the 'drop shadow' under the horiz navigation */
#horizNavigationDropShadow {
	background-image: url(../images/header-and-navigation/content_drop_shadow.png);
	background-repeat: repeat-x;
	height: 10px;
	font-size: .1em;
}

#horizNavigation select {
	font-size: .9em;
	float: right;
	margin: 1px 6px 1px 6px;
	padding: 0;
}
/* End horizontal navigation styles */

/* 
	Left navigation styles
*/

/* Here you can set the width of the left navigation lists and the padding around them */
#leftNavigationContainer {
	clear: both;
	width: 172px;
	/* border-right: 2px #ffc5ad solid;
	padding: 0 0 200px 0; */
	line-height: 1.4em;
	position: relative;
	padding: 0 0 0 0;
	float: left;
}

#leftNavigationContainer ul, #leftNavigationContainer li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	background-color: #fff;
}

#leftNavigationContainer li {
	vertical-align: top;
	margin-bottom: 0px;
	background-color: #fff;
}

#leftNavigationContainer li li {
	margin-bottom: 0;
	background-color: transparent;
}

/* General styles for all buttons */
#leftNavigationContainer ul a, #leftNavigationContainer ul span {
	display: block;
	color: #555;
	font-weight: none;
	text-decoration: none;
	text-align: right;
	/* border: 1px #5e5e5e solid; 
	background-image: url(../images/header-and-navigation/small_button.png); 
	background-position: 0 100%;
	background-repeat: repeat-x; */
	padding: 0 6px 0 6px; 
	line-height: 2.0em; 
}

#leftNavigationContainer ul a:link, #leftNavigationContainer ul a:visited {
	color: #555;
}


#leftNavigationContainer ul a:active {
	color: #b0d050;

}


/* 'Current page' button style */
#leftNavigationContainer ul span.over, #leftNavigationContainer ul a.over, 
#leftNavigationContainer ul span.over:hover, #leftNavigationContainer ul a.over:hover  {
	/* background-image: url(../images/header-and-navigation/small_button_over.png); */
	color:   #333;
	background-color: #b0d050;
}

/* Hover styles for buttons in the left navigation which are not the current page */
#leftNavigationContainer ul span:hover, #leftNavigationContainer ul a:hover {
	/* background-image: url(../images/header-and-navigation/small_button_over_feint.png); */
	background-color: #e0f0c0;
}

#leftNavigationContainer ul ul a, #leftNavigationContainer ul ul span {
	border: none;
	font-weight: normal;
	background-image: none;
	line-height: 1.3em; 

}

#leftNavigationContainer ul ul span {
	color: #555;
}


/* Current page and hover styles for second level links in the left navigation */
#leftNavigationContainer ul ul a:hover, #leftNavigationContainer ul ul a.over,
#leftNavigationContainer ul ul a.over:hover, #leftNavigationContainer ul ul a.over.down {
	/* background-image: url(../images/header-and-navigation/orange_arrow.png); 
	background-color: transparent;
	background-repeat: no-repeat;*/
	background-position: 100% 48%; 
	background-color: #b0d050;
	color: #333;
}


/* Hover styles for buttons in the left navigation which are not the current page */
#leftNavigationContainer ul ul span:hover, #leftNavigationContainer ul ul a:hover {
	/* background-image: url(../images/header-and-navigation/small_button_over_feint.png); */
	background-color: #e0f0c0;

}

#leftNavigationContainer ul ul span.over {
	background-image: none;
	background-color: transparent;
	color: #e0f0c0;
}

/* seems redundent

#leftNavigationContainer ul ul span.over {
	color: #555; !important;
}
*/

/* Left navigation top-level ul styles. Includes the gradient baground which repeats vertically */
#leftNavigationContainer ul ul {
	font-size: .9em;
	color: #b0d050; 
	/* border: 1px #5e5e5e solid; */
	border-top: none;
	line-height: 1.3em;
	padding: 5px 10px 5px 0;
	/* background-image: url(../images/header-and-navigation/left_nav_repeat.png); 
	background-repeat: repeat-y; */
}

#leftNavigationContainer ul ul ul {
	border: none;
	margin: 1px 0 2px 10px;
	padding: 0;
}

#leftNavigationContainer ul ul ul ul {
	font-size: 1em;
}

#content {
	margin: 0 15px 10px 172px;
	border-left: 2px #b0d050 solid;
	padding: 0 0 100px 6px;

}

#footerDropShadow {
	background-repeat: repeat-x;
	background-position: 0 100%;
	height: 11px;
	font-size: .1em;
	clear: both;
}	

#footer {
	clear: both;
	text-align: center;
	background-image: url(../images/header-and-navigation/footer_repeat.png);
	background-repeat: repeat-x;
	background-color: #c5c5c5;
	font-size: .8em;
	line-height: 1.5em;
	border-top: 5px #fff solid;
}	

#footer p {
	border-top: 1px #959595 solid;
	border-bottom: 1px #959595 solid;
	padding: 5px 10px 5px 10px;
	margin: 0;
}

#countrySelect {
	text-align: right;
	position: absolute;
	float: right;
	right: 0;
	font-size: 1em;
	font-weight: normal;
	margin: 2px 6px 0 6px;
	cursor: pointer;
	background-image: url(../images/header-and-navigation/1pixeltransparent.png);
}

/*
#b0d050 - darker green - used for selected links and verticle bar.
#e0f0c0 - pale green hover over colour - see also js.css
*/
#countrySelect p {
	top: 1px;
	position: relative;
	display: inline;
	background-color: #f8f8f8;
	border: 1px #ccc solid;
	padding: 0px 6px 0px 6px;
	line-height: 1.2em;
	color: #000;
}

#countrySelect ul, #countrySelect li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #fff;
}

#countrySelect ul {
	position: relative;
	right: 0;
	display: block;
	text-align: left;
	border: 1px #999 solid;
	margin-top: 6px;
	padding-bottom: 4px;
	background-color: #f8f8f8;
}

#countrySelect li {
	padding: 4px 4px 0 4px;
	background-image: none;
	float: none;
	background-color: #f8f8f8;
	display: block;
}

#countrySelect a:link, #countrySelect a:visited, #countrySelect a:active, #countrySelect a:hover {
	background-image: none;
	padding: 0 3px 0 3px;
	border: 1px #f8f8f8 solid;
	color: #000;
	background-color: #f8f8f8;
}


#countrySelect a:hover {
	background-image: none;
	padding: 0 3px 0 3px;
	border: none;
	color: #000;
	border: 1px #b0d050 solid;
	background-color: #e0f0c0;
}

#countrySelect ul:after {
	content: '.';
	display: none;
}

/* image controls */


#box
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:0px solid black;
text-align:right;
}

#box img.right
{
float:left;
margin:0 0 10px 23px;
border:0px solid black;
text-align:right;
}

#box img.center
{
float:left;
margin:10px 0 0 0;
border:0px solid black;
text-align:centre;
}

#box img.left
{
float: right;
margin: 0 250px 0 0;
border: 0px solid black;
}

#box2
{
float:right;
width:120px;
margin:0 0 0 0;
padding:0px;
border:4px solid black;
text-align:top;
}


#box2 img.left
{
float: right;
margin: 0 250px 0 0;
border: 0px solid black;
}

#links
{
float:right;
margin:10px 10px 10px 10px;
padding:15px;
border:2px solid black;
text-align:right;
}