/* Layout Styling  ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


This is the styling for the layout of your site. Changing anything in this section could stop your website working in some or all of your customers browsers. *PLEASE* ONLY MAKE CHANGES IF YOU KNOW WHAT YOU ARE DOING. Please ensure that you check any changes you make using IE7, IE8, Firefox, Opera and Safari to make sure that those changes don't affect your site in a bad way*/

body {			/*  Sets up the page in the browser and gives it a background*/
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0; 
	margin:0; 
	border:0;
	background-image:url(../graphics/topcenter.jpg);  /* this is the background  */
	background-position:top center;						/*  Starts at the top  */
	background-repeat:repeat-x;						/*  repeats accross  */
	background-color:#ffffff;						/*Background colour*/
	}

#rightcenter {           /*  Places the right graphic  */
	position:absolute;
	width:100%;  
	height:100%; 
	background:url(../graphics/rightcenter.jpg);  /* link to the right center graphic  */
	background-position:center right;
	background-repeat:repeat-y;
	z-index:10;
	}
#topright {
	position:absolute;
	height:100%;
	width:100%;
	background:url(../graphics/topright.jpg);  /* link to the top right graphic  */
	background-position:top right;
	background-repeat:no-repeat;
	z-index:20;
	}
	
#topleft {
	position:absolute;
	height:100%;
	width:100%;
	background:url(../graphics/topleft.jpg);  /* link to the top left graphic  */
	background-position:top left;
	background-repeat:no-repeat;
	z-index:20;
	}
		
#bottomright {
	position:absolute;
	height:100%;
	width:100%;
	background:url(../graphics/bottomright.jpg);  /* link to the bottom right graphic  */
	background-position:bottom right;
	background-repeat:no-repeat;
	z-index:20;
	}
	
#bottomleft {
	position:absolute;
	height:100%;
	width:100%;
	background:url(../graphics/bottomleft.jpg);  /* link to the bottom left graphic  */
	background-position:bottom left;
	background-repeat:no-repeat;
	z-index:20;
	}
	
#leftcenter {
	position:absolute;
	height:100%;
	width:100%;
	background:url(../graphics/leftcenter.jpg);  /* link to the left center graphic  */
	background-position:left center;
	background-repeat:repeat-y;
	z-index:10;
	}
	
#bottomcenter {
	position:absolute;
	height:100%;
	width:100%;
	background:url(../graphics/bottomcenter.jpg);  /* link to the bottom center graphic  */
	background-position:bottom center;
	background-repeat:repeat-x;
	z-index:10;
	}
	
#contentback{
	position:absolute;
	height:100%;
	width:100%;
	background:url(../graphics/contentback.png);  /* link to the bottom center graphic  */
	background-position:bottom right;
	background-repeat:no-repeat;
	z-index:50;
	}
	
#head {				/*  Places the title graphic  */
	position:absolute;
	height:120px;
	top:0px;
	left:20%;
	z-index:20;
	text-align:left;
	}
	
#footer {				/*		The box that holds the text at the bottom	*/
	position:absolute;
	text-align:center;
	bottom:0px;
	right:0px;
	left:0px;
	height:15px;
	z-index:60;
} 

#badges {			/*		The w3c logos and links		*/
	position:absolute;
	bottom:0px;
	right:0px;
	height:20px;
	width:150px;
	z-index:20;
	text-align:right;
}

#logo {		/*				The logo at the top left		*/
	position:absolute;
	top:0px;
	left:10%;
	height:117px;
	width:100px;
	z-index:10;
	background-image:url(../graphics/logo.png);
}

#leftcontent{			/*  Places the content on the left    */
	position:absolute;
	width:180px;
	top:160px;
	left:50px;
	bottom:45px;
	overflow:auto;
	border:none;
	z-index:60;
	}	
	
#content{				/*  Places the main content  */
	position:absolute;
	top:170px;
	bottom:45px;
	left:230px;
	right:250px;
	padding:15px;
	margin:0px;
	max-width:650px;	/*  stops large resolutions showing one long line of content  */
	overflow:auto;
	z-index:60;
	}
	
#contactcontent {
	position:absolute;
	top:200px;
	bottom:45px;
	left:230px;
	right:50px;
	max-width:750px;
	margin:0px;	/*  stops large resolutions showing one long line of content  */
	overflow:auto;
	z-index:60;
}

#rightcontent {
	position:absolute;
	top:170px;
	bottom:45px;
	right:70px;
	padding:5px;
	width:150px;
	overflow:auto;
	z-index:60;
}
	
#menucontainer {			/*Positions the menu on the page*/
	position:absolute;
	top:110px;
	left:20%;
	width:60%;
	z-index:5500;
	cursor:pointer;
	border:none;
}
#tiny {
	position:absolute;
	bottom:-20px;
}

/* End of layout styling -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/* Content Styling ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* This is the styling of the content of your site. If you look at the website pages (index.html etc.) you will see a tab ( <p> or <h1> etc. ) at the beginning of the website's content and a closing tab ( </p> or </h1> etc. ). To change the settings scroll down and find the corresponding styles. For p, which is normal paragraph text, find the styles for p.*/



 h1 {				/*    h1 is the main heading text    */
	font-family:trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	color:#ec008b;
	}
	
 h2 {
	font-family:trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-size:11px;
	font-weight:bold;
	text-align:center;
	color:#ec008b;
	}
	
h3 {
	font-family:trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-size:11px;
	text-align:left;
	color:#0071bc;
	}

#rightcontent p {
	font-family:trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-size:11px;
	text-align:left;
	color:#ec008b;
	}

#rightcontent h1 {
	font-family:trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:bold;
	font-size:11px;
	text-align:center;
	color:#0071bc;
	}
	
h4{
	font-family:trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-size:11px;
	text-align:left;
	color:#ec008b;
	}
	
	
h5 {
	font-family:trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-size:11px;
	text-align:left;
	color:#ec008b;
	}
	
.lefttext {float:left; width:47%; text-align:left; padding:5px;} 		/*  Places text in the left column */
.righttext {float:right; width:40%; text-align:left;padding:5px;}	/*  Places text in the right column */
.righttext h1 {text-align:left;}
.lefttext h1 {text-align:left;}

.clear {clear:both;}
.tiny  h1{ font-size:1px;}

a {
	font: bold 10px trebuchet MS, tahoma, verdana, arial, sans-serif;
	display: block;
	margin: 0px;
	padding: 2px 2px;
	color:#0071bc;
	text-decoration:none;
	
}

a:hover {
	color:#ec008b;
}


}
a:visited {
	color:#0071bc;
}

#leftcontent img {			/*  Puts a border around the images  */
	padding:2px;
	margin-top:5px;
	border-top:1px solid #ec008b;
	border-right:1px solid #0071bc;
	border-bottom:1px solid #0071bc;
	border-left:1px solid #ec008b;
	}	


/* End of the content styling section -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
 /*  Menu styling section ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* This is the styling for the menu bar. Again, be careful. Any changes you make to this might spoil your website. Check any changes you make before sending the page to your server. I've left comments off this styling as you should know what you're doing before changing any of this*/



.menu{
font: bold 12px trebuchet MS, tahoma, verdana, arial, sans-serif;
color:#0071bc;
width: 100%; /*leave this value as is in most cases*/
}

.menu ul{
margin: 0;
padding: 0;
float:left;
width: 100%; /*width of menu*/
border:none; /*dark purple border*/
background:none;
}

.menu ul li{
display: inline;
}

.menu ul li a{
float: left;
color:#0071bc; /*text color*/
padding: 5px 15px;
text-decoration: none;
border-right:none; /*divider between menu items*/
}



.menu ul li a:hover, .indentmenu ul li .current{
color:#ec008b !important; /*text color of selected and active item*/
padding-top: 5px; /*shift text down 1px for selected and active item*/
padding-bottom: 5px; /*shift text down 1px for selected and active item*/
}

.menu a, .menu a:hover, .menu a:visited{font-size:12px;}

.menu a.active
{
   color:#ec008b;
}

#content dt{
	
	text-align:left;
	font:bold 12px trebuchet MS, tahoma, verdana, arial, sans-serif;
	color:maroon;

}
#content dd{
	position:relative;
	left:50px;
	top:-15px;
	font:bold 12px trebuchet MS, tahoma, verdana, arial, sans-serif;
	color:#003333;
	
}
/* This is the end of the menu styling section  -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/