/************************************************************************

	GLOBAL CSS
	==========

	Provides all global styles for the site which more specific sections 
	can be built on using the layered css technique

	Author:		Tom Harman		[www.optixsolutions.co.uk]

	Listing Order:
	==============

	Universal
	Forms
	General Structure / Layout
	Navigation Elements
	Header Elements
	Body Elements
	Footer Elements
	Messages

************************************************************************/

/***********************************************************************
	UNIVERSAL STYLES
************************************************************************/

body {
	background-image: url(../i/layout/back.jpg);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-color: #B9C2DD;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 12px;
}

html, body, form, fieldset, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, abbr, input, select, textarea, table, td, th {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
/*	margin: 0px;
	padding: 0px;*/
}

h3 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 20px;
	color: #5D9FD7;
}
div#content ul {
   margin:0;
	list-style-type: disc;
	list-style-position: inside;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
}
div.wahl{
	float: left;
text-align: left;
	clear: both;
	width: 200px;
}
div#bg2 div#main div#content div.wahl img{
	float: left;

}
div#content h1{
	display: block;
/*	width: 500px;*/
/*	clear: right;
	float: left;*/
	margin-bottom: 10px;
}
/*div#content p, div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, 
div#content h6, div#content table, div#content ul, div#content ol, div#content form {
	margin: 1em 0;
}*/
div#content img.ver_img {
	margin: 0px 0px 0px 10px;
	float: left;
	clear: none;
}
input#fm_verify {
	width: 80px;
	float: left;
}
div#content textarea#comments {
	font-size: 1em;
}

a#tour {
	width: 140px;
	height: 88px;
	margin-left: 7px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
	background: url('../i/layout/360-tour.jpg') no-repeat;
}
a#tourText {
	text-decoration: none;
	color: #5D9FD7;
}
/***********************************************************************
	FORMS
************************************************************************/

fieldset, legend {
	border: none;
}

legend {
	background: transparent;
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;
	padding: 0 .5em;
}

label {
	float: left;
	padding: 0 1em 0 0;
	text-align: right;
}

form fieldset div {
	clear: both;
	display: block;
	margin-bottom: .5em;
	padding: 0;
}

div.submit {
	position:relative;
	float: right;
	clear: both;
	text-align: left;
	width: 273px;
}
div.denotes {
	position:relative;
	float: right;
	clear: both;
	margin-top: 10px;
	text-align: left;
	width: 273px;
}

div.multi input {
	border: 0;
	width: auto;
}
 
form 									{ width: 100%; }

label		 							{ float: left;	height: 22px; width: 45%; }

fieldset div input,
fieldset div select,
fieldset div textarea  			{ width: 45%; }

fieldset div input.small,
fieldset div select.small,
fieldset div textarea.small 	{ width: 25%; }

div.req label, div.req p		{ }

div.multi label 					{ height: 22px; }

/*div.req label:before,div.req p:before{
	content: "* ";

}*/

input:focus, textarea:focus {
	background: #fafafa;
	color: #000;
}

fieldset div input, 
fieldset div select, 
fieldset div textarea  {
	border: 1px solid #aaa;
	color: #333;
	font-weight: normal;
	padding: 1px;
}

div.submit input {
	background: #5d9fd7;
	border: 1px solid #333;
	color: #fff;
	font-weight: bold;
	padding: 1px .7em;
	width: auto;
}

/***********************************************************************
	GENERAL STRUCTURE/LAYOUT
************************************************************************/

div#bg2 {
margin: 0 auto;
/*background-color: Fuchsia;*/
display: block;
clear: both;
/*min-height: 800px;*/
	background-image: url('../i/layout/body-repeat.jpg');
/*	background-position: bottom right;*/
	background-repeat: repeat-y;
	/*background-color: #C5DBE9;*/
/*	padding-bottom: 60px;*/
	width: 743px;
	float: left;
	
}

div.courselist a {
	text-decoration: none;
	color: #000;
}

/***********************************************************************
	HEADER ELEMENTS
************************************************************************/

div#head {
background-image: url(../i/layout/header-header.jpg);
background-repeat: no-repeat;
	margin-top: 0px;
	float: left;
	clear: both;
	height: 168px;
	width: 743px;
}


/***********************************************************************
	BODY ELEMENTS
************************************************************************/

/**********************************************************************
If the set height of your container/background div means that longer pages
overlap the  bottom, this sorts it out so the page extends for the extra 
content whilst keeping the page long enough to hold anything in the
sidebar/nav bar etc. make sense? 
***********************************************************************/
html 

     body 
     { 
          height: 100%; 
     } 
 
     #background/* change this the name of your topmost div, your container/background or whatever*/
     { 

		  background-image: url('../i/layout/backg.jpg');
		  background-position: center;
		  background-repeat: repeat-y;
		  margin-left: auto;
		  margin-right: auto;
		  width: 743px;
     }
/*********************************************************************
Below is Tom Harmans original code in its entirety for this feature,
just incase i have left out something vital and its just working by
accident. I'll update it as and when i figure out how the hell it works.

html 
     { 
          height: 100%; 
     } 
 
     body 
     { 
          height: 100%; 
     } 
 
     #container
     { 
          position: relative; 
          min-height: 95.5%;
		  padding-bottom:3em; 
     }
	   
     * html #container
     { 
          height: 95.5%;
     } 
 
 #footer {
 	height: 2em;
 }
 
     #footer 
     { 
          position: relative; 
          margin: -2.0em auto 0 auto; 
     }
**********************************************************************/
div.center-image{
	text-align: center;
}
div#main{
	width: 743px;
	float: left;
	display: block;
	position: relative;
/*	background-color: Aqua;*/
	padding:0px;
}
div.image-center {
	text-align: center;
}

div#content {
	background-image: url(../i/layout/txtbg.jpg);
	background-repeat: no-repeat;
	background-color: #ffffff;
	float: right;
	padding:0px;
	margin:0px;
	padding: 0px;
	margin-right: 14px;
	width: 554px;
	/*	clear: both;*/
	padding:10px;
	padding-right: 0px;
}
* html div#content {
	background-image: url(../i/layout/txtbg.jpg);
	background-repeat: no-repeat;
/*	background-color: Aqua;*/
	float: right;
	padding:0px;
	margin:0px;
	margin-right: 7px;
/*	width: 490px;*/
	/*	clear: both;*/
	padding:10px;
	padding-right: 0px;
}

div#content p{
text-align: justify;
margin-right: 5px;
}

div#content img{
float: right;
display: inline;

clear: both;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 15px;
}
div#content img.left{
float: left;
display: inline;

clear: both;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 15px;
}
div#content a img{
float: right;
	border: none;
	margin-right: 5px;
}
div.image-row{
	float: left;
	display: inline;
/*	background-color: Fuchsia;*/
	width: 500px;
	text-align: center;
}
div.index-images{
	width: 220px;
	float: right;
/*	display: inline;*/
	margin-right: 5px;
	margin-left: 5px;
/*	background-color: Aqua;*/
}
div.index-images img{
	margin-left: 10px;
}
div.furniture-block{
background-color: #C7CDE3;
float: left;
border: 1px solid #666666;
padding: 10px;
width: 500px;
margin-bottom: 10px;
}

div#main div#content div.furniture-block div.image-row img{
	float: left;	
	display: inline;
	clear: none;
/*	position: relative;*/
/*	background-color: Fuchsia;*/
	margin: 0px;
	padding: 0px;
	margin-right: 10px;
	margin-top: 10px;
	/*margin-left: 10px;
	margin-bottom: 10px;*/
}
div.wahl-block{
background-color: #C7CDE3;
float: left;
border: 1px solid #666666;
padding: 10px;
width: 520px;
margin-bottom: 10px;
}
* html div.wahl-block{
background-color: #C7CDE3;
float: left;
border: 1px dashed #666666;
padding: 10px;
width: 520px;
margin-bottom: 10px;
}
div.education-block{
background-color: #C7CDE3;
float: left;
border: 1px solid #666666;
padding: 10px;
width: 400px;
margin-bottom: 10px;
}
* html div.education-block{
background-color: #C7CDE3;
float: left;
border: 1px dashed #666666;
padding: 10px;
width: 400px;
margin-bottom: 10px;
}
div.edu-block{
background-color: #C7CDE3;
float: left;
border: 1px solid #666666;
padding: 10px;
width: 400px;
margin-bottom: 10px;
}
* html div.edu-block{
background-color: #C7CDE3;
float: left;
border: 1px dashed #666666;
padding: 10px;
width: 400px;
margin-bottom: 10px;
}
div#main div#content div.education-block div.image-row img{
	float: left;	
	display: inline;
	clear: none;
/*	position: relative;*/
/*	background-color: Fuchsia;*/
	margin: 0px;
	padding: 0px;
	margin-right: 10px;
	margin-top: 10px;
	/*margin-left: 10px;
	margin-bottom: 10px;*/
}
div#main div#content div.edu-block div.image-row img{
	float: left;	
	display: inline;
	clear: none;
/*	position: relative;*/
/*	background-color: Fuchsia;*/
	margin: 0px;
	padding: 0px;
	margin-right: 10px;
	margin-top: 10px;
	/*margin-left: 10px;
	margin-bottom: 10px;*/
}
div#content h1.education{
	width: 400px;
}
div#content h2.education{
	width: 400px;
}
div#content p.education{
	width: 400px;
}
div.education-images{
	float: right;
	width: 114px;
	margin:0px;
	padding: 0px;
	margin-left: 0px;
	margin-right: 12px;
}
div.education-images p{
	width: 400px;
}

div#main div#content div.image-row a img{
	float: left;	
	display: inline;
	clear: none;
/*	position: relative;*/
/*	background-color: Fuchsia;*/
	margin: 0px;
	padding: 0px;
	margin-right: 10px;
	margin-top: 10px;
	/*margin-left: 10px;
	margin-bottom: 10px;*/
}

div.image-title-holder{
	width:500px;
	float: left;
	padding: 0px;
	margin:0px;
	
}
div#main div#content div.image-title-holder img.image-title{
	float: left;
/*	border: 1px solid #666666;*/
}
div#main div#content div.approved-block div.image-title-holder img{
	float: left;
	margin: 0 auto;
/*	border: 1px solid #666666;*/
}


div.image-title-holder-small{
	width:500px;
	float: left;
	padding: 0px;
	margin:0px;
	margin-bottom: 10px;
	
}
div#main div#content div.image-title-holder-small img.image-title{
	float: left;
/*	border: 1px solid #666666;*/
}
div#main div#content div.approved-block div.image-title-holder-small img{
	float: left;
/*	border: 1px solid #666666;*/
}
/*div#main div#content img.image-title{
	float: left;
	display: block;
	clear: right;
	margin-right: 300px;
}*/
div#main div#content p{
/*	float: left;*/
}

div.approved-block{
background-color: #ffffff;
float: left;
border: 1px dashed #666666;
padding: 10px;
width: 522px;
margin-bottom: 10px;
}
div.approved-block h1{
	clear: both;	
}
div.approved-block p{
	clear: both;	
	width: 500px;
	float: left;
	margin-bottom: 10px;
}
div.approved-block p.bullet{
background-image: url(../i/layout/list-bullet.gif);
background-position: 0 3px;
background-repeat: no-repeat;
	clear: both;
	padding-left: 30px;
	padding-right: 20px;		
	width: 477px;
	margin-top: 5px;
}
div#content p.bullet{
/*float: left;*/
background-image: url(../i/layout/list-bullet.gif);
background-position: 0 3px;
background-repeat: no-repeat;
	/*clear: both;*/
	padding-left: 30px;
	padding-right: 20px;		
/*	width: 487px;*/
	margin-top: 5px;

}
/*div.hairaisers-list p.bullett{
	width: 337px;
	background-color: Aqua;
	float: left;
	display: inline;
	clear: none;
}*/

div#main div#content div.approved-block div.image-row img{
	float: left;	
	display: inline;
	clear: none;
	margin: 0px;
	padding: 0px;
	margin-right: 10px;
	margin-top: 10px;
}

div#main div#content div.approved-block img.approved-logo{
	float: left;
	margin:0px;
	padding:0px;
	display: block;
	margin-right: 200px;
clear: both;
}
div#main div#content div.approved-block img.approved-thumb{
	float: left;
	margin:0px;
	padding:0px;
}
div#main div#content div.approved-block p{
	float: left;
}
div#main div#content div.approved-block div.approved-list{
	float: left;
	width: 400px;	
}

span.emailnav a {
	font-size: 0.9em;
	color: #5D9FD7;
	text-decoration: none;
	float: left;
	margin-left: 4px;
}

span.emailnav a:hover {
	color: #003399;
}

div.furniture-container{
	background: Aqua;
}

div.furniture{
	float: left;
}



div.furniture img{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
}

div.background div.approved img{

	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
}


img#no-border{
	border: none;
}


div#background div.bunch-o-logos{
	text-align: center;
}

div#background div.bunch-o-logos img{
	border: none
}

p#image-indent-left img {
/*	vertical-align: left;*/
	float: left;
	padding-right: 10px;
}

p#image-indent-right img {
/*	vertical-align: right;*/
	float: right;
	padding-left: 10px;
}

p#hairaisers {
	text-decoration: underline;
}

div.contact-details {
	margin-top: 20px;
	position: relative;
	float: right;
	width: 273px;
}

div.contact-details a{
	color:	#5D9FD7;
	text-decoration: none;
}
div.contact-details a:hover{
	color:	 #B0C4DE;
	text-decoration: none;
}
div.sitemap{


}
div.sitemap ul{
	padding: 5px;
}
div.sitemap ul li{
	list-style-type: none;
	text-indent: 1em;
/*		background-image: url(../i/layout/list-bullet_blue.gif);*/
	background-position: left;
	background-repeat: no-repeat;
}
div.sitemap a{
margin-left: 10px;
		color: #5D9FD7;
	text-decoration: none;
}
/***********************************************************************
	NAVIGATION
************************************************************************/

div#nav {
	float: left;
	clear: both;

	margin-left: 0px;
	padding-left: 0px;
	margin-top: 10px;
	width: 160px;
	text-align: center;

}
div#nav h3{
	padding-left: 9px;
}

div#nav-top {
	margin-left: 10px;
/*	border-right: dashed;
	border-width: thin;
	border-right-color: #777;*/
}
* html div#nav-top {
/*	margin-left: 10px;*/
/*	border-right: dashed;
	border-width: thin;
	border-right-color: #777;*/
}

div#nav-top form fieldset {
	border: none;
	margin-bottom: 0px;
	padding-bottom: 0px;
	font-size: 10px;
}

div#links {

padding-left: 0px;
margin-left: 0px;

}

div#links ul{
	color: #5D9FD7;
	font-size: 11px;
	list-style: none;
	line-height: 13px;
	text-align: left;
/*	text-indent: -15px;*/
	margin-left: 0px;
	padding-left: 16px;

}

div#links ul li{
	color: #5D9FD7;
	text-decoration: none;
		margin-left: 0px;
	padding-left: 0px;

}
div#links ul li a{
		color: #5D9FD7;
	text-decoration: none;
	background-image: url(../i/layout/list-bullet.gif);
	background-repeat: no-repeat;
	background-position: 0 3px;
	width: 120px;
	height: 15px;
	padding-left: 25px;
}
div#links ul li a:hover{
		color: #5D9FD7;
	text-decoration: none;
	background-image: url(../i/layout/list-bullet_blue.gif);
	background-repeat: no-repeat;
	background-position: 0 3px;
	width: 120px;
	height: 15px;
	padding-left: 25px;
}



div.bullets ul{
	color: #000000;
	font-size: 11px;

	text-align: left;
	padding-left:10px;
}

div.bullets ul li{
	list-style-type: none;
	text-indent: 1em;
		background-image: url(../i/layout/list-bullet.gif);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 15px;
}

div.approved-list ul{
	color: #000000;
	font-size: 11px;
	text-align: left;
	padding-left:10px;
}
div.approved-list ul li{
	list-style-type: none;
/*	text-indent: 1em;*/
		background-image: url(../i/layout/list-bullet.gif);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 40px;
	width: 450px;
	margin-top: 10px;
	margin-bottom: 10px;

}

div#subtext{
	
	color: #000000;
	font-size: 11px;
	text-align: left;
	padding-left:10px;
}

div#subtext li strong {
	display: block;
	width: 140px;
}

div#subtext li{
list-style: url('../i/layout/list-bullet_blue.gif');
padding-left:10px;
}

/***********************************************************************
	FOOTER ELEMENTS
************************************************************************/
div.footer-bag{
clear:both;
display: block;
}
div#footer {
	background-image: url('../i/layout/footer-footer.jpg');
	background-repeat: no-repeat;
	height: 56px;
	margin: 0 auto;
	width: 743px;
}

div#legal {
	width:743px;
	margin-left: auto;
	margin-right: auto;
	color: #ffffff;
}

div#siteinfo-credits, div#siteinfo-legal {
	color: #666666;
	position: relative;
	margin-top: 9px;
	padding-left: 30px;
}

div#siteinfo-credits a, div#siteinfo-legal a {
	color: #666666;
	text-decoration: underline;
	padding-right: 30px;
}

div#siteinfo-credits a:hover, div#siteinfo-legal a:hover {
	color: #444;
}

div#siteinfo-credits {
	float: right;
	right: 15px;
}

div#siteinfo-legal {
	float: left;
	left: 15px;
}

/***********************************************************************
	MESSAGES
************************************************************************/

.error, .notice, .message { 
	color: #b22;
	font-weight: bold;
}

.error ol li {
	font-weight: normal;
	list-style-type: lower-roman;
	list-style-position: inside;
	margin-left: 0;
	padding-left: 1em;
	text-indent: 1em;
}


object.logos{
	margin-left: 7px;
}





/***********************lightbox***************************/
#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {