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

	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
				[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: url('../i/layout/bg.gif');
	font-family: "Trebuchet MS";
}


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;
}

/***********************************************************************
	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: 900px;
	margin: 0 auto;
}

div#opening-hours {
	margin: 10px 0px;	
}

div#designer-bg {
	width: 530px;
	height: 300px;
	padding: 180px 0px 0px 0px;
	background: url('../i/layout/designer-bg.jpg') top left no-repeat;
}
a#right-image {
	float: right;
	width: 150px;
	background: #E6F195;
	margin: 0px 0px 10px 10px;
	border: solid 1px #E6F195;
	padding: 0px 0px 10px 0px;
}
a#right-image img {
	margin-bottom: 10px;
}
a#right-image span {
	display: block;
	width: 140px;
	padding: 0px 5px;
}
a#right-image:hover span { text-decoration: underline; }
a#download {
	width: 330px;
	height: 126px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
	margin: 25px 0px 0px 0px;
	background: url('../i/layout/download-button.jpg') no-repeat;
}
/***********************************************************************
	HEADER ELEMENTS
************************************************************************/



div#header {
	background: url('../i/layout/headtrans.gif') no-repeat;
	width: 900px;
	height: 300px;
}
div#header a {
	width: 350px;
	height: 300px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
}
div#header2 {
	background: url('../i/layout/headcopy.gif') no-repeat;
	width: 900px;
	height: 300px;
}
div#header2 a {
	width: 350px;
	height: 300px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
}
div#header3 {
	background: url('../i/layout/headdesign.gif') no-repeat;
	width: 900px;
	height: 300px;
}
div#header3 a {
	width: 350px;
	height: 300px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
}
div#header4 {
	background: url('../i/layout/headcontact.gif') no-repeat;
	width: 900px;
	height: 300px;
}
div#header4 a {
	width: 350px;
	height: 300px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
}
div#header5 {
	background: url('../i/layout/headprint.gif') no-repeat;
	width: 900px;
	height: 300px;
}
div#header5 a {
	width: 350px;
	height: 300px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
}
div#header6 {
	background: url('../i/layout/statheader.gif') no-repeat;
	width: 900px;
	height: 300px;
}
div#header6 a {
	width: 350px;
	height: 300px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
}
div#header7 {
	background: url('../i/layout/canvashead.gif') no-repeat;
	width: 900px;
	height: 300px;
}
div#header7 a {
	width: 350px;
	height: 300px;
	display: block;
	text-indent: -999em;
	letter-spacing: 133px;
}
/***********************************************************************
	BODY ELEMENTS
************************************************************************/



div#main {
	background: url('../i/layout/repttrans.gif') repeat-y;
	width: 900px;
}

div#content {
	width: 530px;
	float: right;
	margin-right: 55px;
	color: #656565;

	margin-bottom: 120px
}

div#content h1 {
	color: #0072C5;
	font-size: 1.2em;
	margin-bottom: 10px;
}

div#content h2 {
	color: #d5e14d;
	font-size: 1.8em;
	margin-bottom: 10px;
}

* html div#content {
	margin-right: 30px;

}

div#content p {
	margin-bottom: 10px;
	text-align: justify;
}

div#map{
	float: left;
/*position: absolute;*/
	width: 520px;
	height: 430px;
}
* html div#map{
	float: left;
	width: 520px;
	height: 430px;
	margin-left: 10px;
}
div.directions{
	float: left;
	background-color: #fff;
	border: 2px solid #d1d4c3;	
	margin-top: 10px;
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
	width: 480px;
	margin-bottom: 20px;
}
* html div.directions{
	margin-left: 10px;
}
div.directions form{
	float: left;
	padding:0px;
	margin: 0px;
}
div.directions form label{
	float: left;
	width: auto ;
	padding: 0px;
	padding-right: 10px;
	margin:0px;
}

div.homepage{
float: right;
width: 300px;
}

div.homepage2{
float: left;
width: 190px;
}


/***********************************************************************
	NAVIGATION
************************************************************************/

div#navigation {
	width: 250px;
	margin-left: 38px;
	float: left;
	color: #828282;
	margin-bottom: 10px;
	background: #E6F195;

}
* html div#navigation {
	width: 250px;
	margin-left: 18px;
	float: left;
	color: #828282;
	border-bottom: 10px #fff solid;
/*	background: #E6F195;*/

}

div#navigation ul li {
	width: 245px;
	height: 30px;
	padding-left: 5px;
	padding-top: 5px;
	background: #0072C5;
	border-top: 2px solid #FFF;
	font-weight: bold;
	font-size: 1.4em;
	font-family: "Trebuchet MS";
}

div#navigation ul li:hover {
	background: #CFE008;
}

div#navigation ul li:hover a {
	color: #226495;
}

div#navigation ul li a {
	color: #FFF;
	width: 250px;
	height: 35px;
	display: block;
}

div#navigation h2 {
	font-weight: normal;
	color: #0072C5;
	font-size: 1.2em;
	text-align: center;
	margin-top: 15px;
}

div#navigation p {
	width: 200px;
	margin-top: 2px;
	color: #828282;
	margin-left: 25px;
	font-size: 0.9em;
}

div#navigation form {
	margin-top: 10px;
	margin-bottom: 15px;
}

div#navigation form fieldset label {
	width: 50px;
	color: #0072C5;
}

div#navigation form fieldset input {
	width: 160px;
	padding: 2px;
}
div.pdf-link {
	margin: 10px;
	height: 20px;
	padding-left: 30px;
	font-size: 1.4em;
	background: url('../i/icons/pdf.gif') left no-repeat;
}
div.pdf-link a {
	color: #017AC3;
}



	
/***********************************************************************
	FOOTER ELEMENTS
************************************************************************/

div#contactinfo {
	width: 540px;
	height: 94px;
	margin-bottom: 10px;
	font-family: "Trebuchet MS";
	background: url('../i/layout/footer.gif') no-repeat;
}

div#footer {
	background: url('../i/layout/foottrans.gif') no-repeat;
	float: left;
	width: 900px;
	margin-top: -150px;
	height: 257px;
}

div#section {
	float: right;
	font-size: 2.5em;
	font-weight: bold;
	margin-right: 30px;
	margin-top: -80px;
	color: #D1D1D1;
	font-family: "Trebuchet MS";
}

form#newsletter input {
	position: relative;
	z-index: 999;
}

div#main div#navigation form#newsletter fieldset div.submitme{
	float: left;
/*	margin-left: 62px;*/
	width: 250px;
	
}
div#main div#navigation form#newsletter fieldset div.submitme input{
	width: 166px;
	padding:0px;
	margin:0px;
	float: right;
	margin-right: 22px;
}


div.ddfmwrap{
	float: left;
/*	background-color: #F5F5F5;*/
	width: 522px;
	padding:0px;
	margin:0px;
}
div.ddfmwrap form{
	width: 522px;
}
div.ddfmwrap form.ddfm fieldset p.fieldwrap input{
	width: 200px;
	padding:0px;
	margin:0px;
	margin-bottom: 6px;
}
div.ddfmwrap form.ddfm fieldset p.fieldwrap label{
	width: 200px;
	padding:0px;
	margin:0px;
	padding-right: 10px;
	margin-bottom: 6px;
}
div.ddfmwrap form.ddfm fieldset p.fieldwrap input.fmverify{
	width: 100px;
	padding:0px;
	margin:0px;
	margin-bottom: 6px;
}
div.ddfmwrap form.ddfm fieldset p.fieldwrap textarea{
	width: 200px;
	padding:0px;
	margin:0px;
}
div.ddfmwrap form.ddfm fieldset p.fieldwrap{
	float: left;
	width: 522px;
/*	background-color: Aqua;*/
}
div.ddfmwrap form.ddfm fieldset div.fmradio{
	width: 400px;
}
* html div.ddfmwrap form.ddfm fieldset div.fmradio{
	width: 200px;
}
div.ddfmwrap form.ddfm fieldset div.fmradio p{
	float:left;
	padding-left: 20px;
	margin-left: 200px;
}
* html div.ddfmwrap form.ddfm fieldset div.fmradio p{
	float:left;
	padding-left: 20px;
	margin-left: 100px;

	width: 150px;
	padding-bottom: 5px;
}
div#content div.ddfmwrap form.ddfm fieldset div.submit input{
	float:left;
	width: 100px;
	margin-left: 200px;
}
/***********************************************************************
	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;
}