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

	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
				Nick Watson
				Tom Fletcher-Jones
				[www.optixsolutions.co.uk]

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

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

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

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

body {
	font-size: .7em;
	background-color: #000000;
	margin-top: 0px;
}
html{
		margin-top:0px;
	padding-top: 0px;
}

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

div#content ul {
	list-style-type: disc;
	list-style-position: inside;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
}

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,{
	margin: 1em 0;
}

/***********************************************************************
	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 {
	clear: both;
	text-align: center;
	width: auto;
}

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		{ font-weight: bold; }

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: #777;
	border: 1px solid #333;
	color: #fff;
	font-weight: bold;
	padding: 1px .7em;
	width: auto;
}

/***********************************************************************
	GENERAL STRUCTURE/LAYOUT
************************************************************************/
div#container{
	width: 760px;
/*	background-color: Blue;*/
	margin:0 auto;
	margin-top: 0px;
	
}
div#header{
	width: 760px;
	height: 55px;
	background-image: url(../i/layout/header-header.jpg);
}
div#top-nav{
	width: 760px;
	height: 311px;
}
div#main{
	width: 760px;
	background-image: url(../i/layout/body-background.jpg);
	background-repeat: repeat-x;
	float: left;
	margin-bottom: 20px;
}
div#main img.bottom-box{

	display: block;
	float: left;
	
}
div#content{
background-image: url(../i/layout/content-top.jpg);
background-repeat: no-repeat;
width: 576px;
background-color: #675E6F;
float: left;
margin-left: 7px;
margin-top: 7px;
display: inline;
color: #ffffff;

}
div#nav-right{
background-image: url(../i/layout/nav-right.jpg);
background-repeat: no-repeat;
width: 162px;
/*height: 390px;*/
	float: right;
	display: inline;
margin-right: 7px;
margin-top: 7px;

}
div#footer{
background-image: url(../i/layout/footer-footer.gif);
background-repeat: no-repeat;
width: 760px;
height: 49px;
margin: 0 auto;
clear: both;
display: block;

}

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

/***********************************************************************
	BODY ELEMENTS
************************************************************************/
div#content h1{
color: #ffffff;
margin:0px;
padding:0px;
margin-left: 10px;
margin-top: 10px;
font-size: 1.3em;

}
div#content h2{
color: #ffffff;
margin:0px;
padding:0px;
margin-left: 10px;
margin-top: 10px;
font-size: 1.1em;

}
div#content p{
color: #ffffff;
margin:0px;
padding:0px;
margin-left: 10px;
margin-top: 10px;
text-align: justify;
width: 410px;

}
div#content a{
color: #A8A5B6;
margin:0px;
padding:0px;
margin-left: 10px;
}
div#content a:hover{
color: #603C82;
margin:0px;
padding:0px;
margin-left: 10px;
}
div#content ul{
margin:0px;
padding:0px;
margin-left: 10px;
}
div#content ul li{
list-style: none;
background-image: url(../i/layout/bullet.gif);
background-repeat: no-repeat;
background-position: 0 3px;
margin:0px;
padding:0px;
margin-left: 30px;
margin-top: 20px;
padding-left: 25px;

}
div#content img{
	float: right;
	margin-top: 55px;
}

div#contact-form form p{
	display: block;
clear: both;
width: 250px;
margin-top: 5px;
/*background-color: Lime;*/
padding-top: 10px;


}

div#contact-form{
float: left;
margin-top: 20px;
margin-left: 150px;
/*margin-right: 70px;*/
width: 270px;
border: 1px dashed #564D5F;
background-image: url(../i/layout/contact-dogear.jpg);
background-repeat: no-repeat;
padding:20px;
}
* html div#contact-form{
float: right;
margin-top: 20px;
/*margin-left: 150px;*/
margin-right: 30px;
width: 270px;
border: 1px dashed #564D5F;
background-image: url(../i/layout/contact-dogear.jpg);
background-repeat: no-repeat;
padding:20px;
}
div#contact-form form{
margin:0px;
padding:0px;
padding-right:1px;
margin-right:1px;
clear: both;
position: relative;
float: left;
width:270px;

/*display: block;
float: left;
position: relative;
width: 270px;*/
}
div.submit{


}
div.submit input#Submit{
	color: #000000;
	width: 123px;
	text-align: center;
	margin-right: 14px;
	float: right;
	clear: both;
	display: block;


}
div#contact-form textarea#comments{
	border:0px;
		background-image: url(../i/layout/form-corner.jpg);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: #DBD5E0;
	overflow: auto;
font-weight: bold;
}
div#contact-form input{
	border:0px;
	background-image: url(../i/layout/form-corner.jpg);
	background-repeat: no-repeat;
		background-position: bottom right;
	background-color: #DBD5E0;
	font-weight: bold;
	
}
div#contact-form h2{
	margin-left: 50px;
}
div#contact-form p{
	margin-left: 50px;	
}
div#contact-form ul.error li{
	color: #ffffff;
}
div#contact-form p.error{
margin-left: 70px;
width: 100px;
background-color:  #B22222;
	color: #ffffff;
	padding-left: 50px;
}
/***********************************************************************
	NAVIGATION
************************************************************************/
div.nav1{
	width: 52px;
	height: 311px;
	margin-right: 1px;

	float: left;
	display: inline;
}

div.nav2{
	width: 126px;
	height: 311px;
	background-image: url(../i/layout/supplyBW.jpg);
	background-repeat: no-repeat;

	float: left;
	display: inline;
}
div.nav2 a{

float: left;
width: 126px;
height: 311px;
}
div.nav2 a:hover{
background-image: url(../i/layout/supply.jpg);
float: left;
width: 126px;
height: 311px;
}
div.nav3{
	width: 59px;
	height: 311px;
	background-image: url(../i/layout/1.jpg);
		background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav4{
	width: 134px;
	height: 311px;
	background-image: url(../i/layout/supportBW.jpg);
	background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav4 a{

float: left;
width: 134px;
height: 311px;
}
div.nav4 a:hover{
background-image: url(../i/layout/support.jpg);
float: left;
width: 134px;
height: 311px;
}
div.nav5{
	width: 47px;
	height: 311px;
	background-image: url(../i/layout/2.jpg);
	background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav6{
	width: 118px;
	height: 311px;
	background-image: url(../i/layout/improveBW.jpg);
		background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav6 a{

float: left;
width: 118px;
height: 311px;
}
div.nav6 a:hover{
background-image: url(../i/layout/improve.jpg);
float: left;
width: 118px;
height: 311px;
}
div.nav7{
	width: 46px;
	height: 311px;
	background-image: url(../i/layout/3.jpg);
		background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav8{
	width: 136px;
	height: 311px;
	background-image: url(../i/layout/contactBW.jpg);
		background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav8 a{

float: left;
width: 136px;
height: 311px;
}
div.nav8 a:hover{
background-image: url(../i/layout/contact.jpg);
float: left;
width: 136px;
height: 311px;
}
div.nav9{
	width: 34px;
	height: 311px;
	background-image: url(../i/layout/4.jpg);
		background-repeat: no-repeat;
	float: left;
	display: inline;
}

div.nav1s{
	width: 52px;
	height: 311px;
	margin-right: 1px;
	float: left;
	display: inline;
}
div.nav2-contact{
	width: 146px;
	height: 311px;
	background-image: url(../i/layout/contact-highlight.jpg);
	background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav2-improve{
	width: 146px;
	height: 311px;
	background-image: url(../i/layout/improve-highlight.jpg);
	background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav2-supply{
	width: 146px;
	height: 311px;
	background-image: url(../i/layout/supply-highlight.jpg);
	background-repeat: no-repeat;
	float: left;
	display: inline;
}
div.nav2-support{
	width: 146px;
	height: 311px;
	background-image: url(../i/layout/support-highlight.jpg);
	background-repeat: no-repeat;
	float: left;
	display: inline;
}
/*div.nav3s{
	width: 39px;
	height: 311px;
	background-image: url(../i/layout/highlight-seperator.jpg);
		background-repeat: no-repeat;
	float: left;
	display: inline;
}*/
div.nav4s{
	width: 561px;
	margin:0px;
	padding:0px;
	/*width: 500px;*/
	height: 311px;
	background-image: url(../i/layout/mouseonley.jpg);
	background-repeat: no-repeat;

	float: left;
	display: inline;

}
div.nav4s ul{
margin-top: 7px;
/*margin-right: 118px;*/
float: left;


}
div.nav4s ul li{
width:88px;
	float: left;
	display: inline;
	margin-right: 1px;
	text-align: center;
}
div.nav4s ul li a{
width:88px;
float: left;
	color: #ffffff;
}
div.nav4s ul li a:hover{
	color: #666666;	
}
div.testimonial{
width: 500px;
float: left;
display: block;
margin-top: 30px;

}
div.testimonial img{
margin: 0 auto;
	margin-bottom: 20px;
}
div.testimonial p{
text-align: center;
color: #ffffff;
width: 500px;
}



div#bullet-nav{
height: 220px;
margin-bottom: 20px;
}
div#bullet-nav ul{
	color: #ffffff;
	margin-left: 40px;
	margin-top: 20px;
}
div#bullet-nav ul li{
	color: #ffffff;	
	margin-top: 5px;
	
}
div#bullet-nav ul li a{

		color: #ffffff;
		background-image: url(../i/layout/bullet.gif);
		background-repeat: no-repeat;
		background-position: 0 3px ;
		padding-left: 15px;
		width: 50px;
}
div#bullet-nav ul li a:hover{
		color: #B7A1E6;
		background-image: url(../i/layout/bullet-roll.gif);
		background-repeat: no-repeat;
		background-position: 0 3px;
		padding-left: 15px;
}
div#dogear{
background-image: url(../i/layout/dog-ear.jpg);
background-position: bottom;
background-repeat: no-repeat;
min-height: 150px;
padding-bottom: 30px;
}
* html div#dogear{
background-image: url(../i/layout/dog-ear.jpg);
background-position: bottom;
background-repeat: no-repeat;
height: 200px;
padding-bottom: 10px;
}
div#dogear p{
text-align: center;
color: #000000;
font-size: .8em;
margin-bottom: 5px;
margin-left: 14px;
margin-right: 14px;
}
/*div#dogear p.bottom{
text-align: center;
color: #000000;
font-size: .8em;
float: left;

margin-left: 12px;
margin-right: 12px;
}*/
div#dogear img{
	
	text-align: center;
	margin: 0 auto;
	margin-bottom: 10px;
}
/***********************************************************************
	FOOTER ELEMENTS
************************************************************************/
div#address{
margin-top: 45px;
color: #ffffff;	
}
div#address p{
	text-align: center;
}
div#address a{
	color: #ffffff;
}
div#address a:hover{
	color: #666666;
}
/***********************************************************************
	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;
}