/*-- CONTENTS -------------------------------------------

	=1:		[CSS RESET]
	=2:		[COMMON]
	=3:		[SITE]

---------------------------------------------------------*/


/*------=1:	[CSS RESET] -----------------------------*/

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {vertical-align:baseline;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:100%;outline:0;padding:0;margin:0;border:0;}
a{text-decoration:none;}
:focus{outline:0;}
body{background:white;line-height:1;color:black;font-size:10pt;}
ol, ul{list-style:none;}
/* tables still need cellspacing="0" in the markup */
table{border-collapse:collapse;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q{quotes:"" "";}


/*------=2:	[COMMON] -----------------------------*/

.altText{position:absolute;left:-9999px;}
.seoText{text-indent: -9999px;}
.floatLeft{float:left;display:inline;}
.floatRight{float:right;}
.clearLeft{clear:left;}
.clearRight{clear:right;}
.clearBoth{clear:both;}

body, #backFooter {
	background: #349c01;
}

#pageBack {
	width: 100%;
}

	#whiteBack {
		background: #fff url('../images/fade-back.jpg') 0 329px repeat-x;
		min-height: 760px;
	}
	
	.small #whiteBack {
		background: #fff url('../images/fade-back2.jpg') 0 185px repeat-x;
		min-height: 560px;
	}

	#backHeader {
		background: url('../images/header-large-back.jpg') top center;
		position: absolute;
		width: 100%;
		height: 329px;
		top: 0;
		left: 0;
		z-index: 0;
	}

	#contentMain {
		position: relative;
		width: 850px;
		min-height: 400px;
		margin: 0 auto;
	}
	
		#contentHeader {
			background: url('../images/header-large.jpg') top center;
			position: relative;
			height: 329px;
		}
		
			#contentHeader h1 {
			text-indent: -9999px;	
			}
		
			#navigation {
				background: url('../images/links.gif') 0 0 no-repeat;
				position: absolute;
				bottom: 1px;
				width: 804px;
				height: 23px;
				left: 23px;
			}
			
				#navigation li {
					background: url('../images/links.gif') no-repeat;
					display: block;
					float: left;
					display: inline;
					height: 23px;
					margin-right: 12px;
					cursor: pointer;
				}
			
				#navigation li a {
					display: block;
					width: 100%;
					height: 100%;
					text-indent: -9999px;
				}
				
				#navigation li.home {
					background-position: 0 -0;
					width: 64px;
				}
				
				#navigation li.home:hover {
					background-position: 0 -23px;
				}
				
				#navigation li.getquote {
					background-position: -76px 0;
					width: 110px;
				}
				
				#navigation li.getquote:hover {
					background-position: -76px -23px;
				}
				
				#navigation li.learn {
					background-position: -198px 0;
					width: 262px;
				}
				
				#navigation li.learn:hover {
					background-position: -198px -23px;
				}
				
				#navigation li.guide {
					background-position: -470px 0;
					width: 124px;
				}
				
				#navigation li.guide:hover {
					background-position: -470px -23px;
				}
				
				#navigation li.about {
					background-position: -609px 0;
					width: 85px;
				}
				
				#navigation li.about:hover {
					background-position: -609px -23px;
				}
				
		
				
				#navigation li.suppliers {
					background-position: -708px 0;
					width: 89px;
					margin-right: 0;
				}
				
				#navigation li.suppliers:hover {
					background-position: -708px -23px;
				}
		
			#headerText {
				position: absolute;
				top: 92px;
				left: 273px;
				width: 345px;
				height: 160px;
				font: normal 14px/18px Arial, Helvetica, sans-serif;
				color: #2b2e35;
				letter-spacing: -1px;
			}
		
				#headerText h2 {
					font: normal 21px/24px Arial, Helvetica, sans-serif;
				}
		
			#checkPostcode {
				background: url('../images/sprite-sheet.png') -1px 0 no-repeat;
				position: absolute;
				width: 184px;
				height: 127px;
				top: 126px;
				left: 624px;
			}
			
				.small #checkPostcode {
					background-position: -337px 0;
					top: 5px;
					left: 654px;
				}
			
				#checkPostcode .text {
					background: #fff;
					border: 0;
					position: absolute;
					top: 52px;
					left: 18px;
					width: 149px;
					height: 24px;
					font: normal 16px/20px Arial, Helvetica, sans-serif;
				} 
				
				#checkPostcode .submit {
					background: url('../images/sprite-sheet.png') -186px 0 no-repeat;
					border: 0;
					position: absolute;
					top: 86px;
					left: 17px;
					width: 151px;
					height: 32px;
					cursor: pointer;
				}
				
				#checkPostcode .submit:hover {
					background-position: -186px -32px;
				}

	.small #backHeader {
		background: url('../images/header-small.jpg') top center;
		height: 185px;
	}
	
		.small #contentHeader {
			background: url(null);
			height: 185px;
		}
		
	#largeGreenBoxes {
		padding: 38px 0 0 0;
		margin: 0 auto;
		width: 799px;
		height: 170px;
	}
		#largeGreenBoxes a {
			background: url('../images/sprite-sheet.png') no-repeat;
			width: 251px;
			height: 170px;
			display: block;
			float: left;
			display: inline;
			cursor: pointer;
			text-indent: -9999px;
		}
	
		#largeGreenBoxes a.learn {
			background-position: 0px -127px;
			margin-right: 20px;
		}
	
		#largeGreenBoxes a.learn:hover {
			background-position: 0px -297px;
		}
	
		#largeGreenBoxes a.tellus {
			background-position: -251px -127px;
			margin-right: 20px;
		}
	
		#largeGreenBoxes a.tellus:hover {
			background-position: -251px -297px;
		}

		#largeGreenBoxes a.compare {
			background-position: -502px -127px;
		}

		#largeGreenBoxes a.compare:hover {
			background-position: -502px -297px;
		}
		
	.fadeBox {
		background: url('../images/fade-box.png') no-repeat;
		width: 677px;
		min-height: 205px;
		margin: 38px auto;
		padding: 30px 50px 30px 50px;
		font: normal 14px/18px Arial, Helvetica, sans-serif;
	}
	
		.fadeBox h2 {
			color: #168500;
			font: bold 21px/24px Arial, Helvetica, sans-serif;
			padding-bottom: 5px;
			
		}
		
		.fadeBox p {
			padding: 10px 0 10px 0;
		}
		
		.fadeBox ul {
			list-style: none;
			list-style-position:inside;
			margin:10px 0 15px 0;
			padding:15;
		}
		.fadeBox ul li { 
			background-image: url('../images/bullet.gif');
			background-repeat: no-repeat;
			background-position: 0 0.4em;
			margin-left:20px;
			padding: 6px 3px 6px 20px; 
		}
	

#backFooter {
	background: #349c01 url(../images/footer-back.jpg) no-repeat top center;
	clear: both;
	width: 100%;
	height: 165px;
}
	
	#contentFooter {
		background: url(../images/footer.jpg) no-repeat  top;
		position: relative;
		width: 850px;
		margin: 0 auto;
		height: 40px;
		padding-top: 108px;
		font: normal 12px/16px Arial, Helvetica, sans-serif;
		text-align: center;
}
	
	
/*------=3:	[SITE] -----------------------------*/