html {
	overflow: auto;
	}

body {
	font:10pt   helvetica, Arial,  Geneva, Verdana, sans serif  ;
	text-align: left;
	line-height: 140%;
	color: #333;
	margin:0;
	padding: 0;	
	}


h1, h2, h3, h4, h5 {
	padding: 0 0 3px 0;
	}	

h1 {
	font-size: 1.2em;
	width: 100%;
	margin: 0px 0 5px 0;
	}
	
		
	
h2 {
	font-size: 1.1em;
	margin: 0 0 0px 0;
	}
	

h3 {
	clear: left;
	font-size: 1em;
	color: #369;
	margin: 20px 0 5px 0;
	padding: 0px;
	}

h4 {
	font-size: 1em;
	color: #369;
	margin: 4px 0 3px 0;
	padding: 0px
	}

p {
	margin: 0px 0 10px 0;

	}


 img {
	float:left;
	margin: 5px 10px 5px 0;
	border:0px;
	}
		
		/*enables default 'float left' to be overidden */
		.right img {
				float: right;
				margin: 0px 0px 0px 5px;
				border:0px;
				}
				

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #369;	
	}
	
	
a:hover {
	color: #c00;
	}
	
	

em {
	color: #333333;
	font-size: 1em;
	font-weight: normal;
	}



ul{
	list-style-type:none;
	margin:0px;
	text-align: right;
	padding:0px;	
	}	

	
li {
	display:inline;
	padding-right: 20px;
	padding-left: 15px;
	vertical-align:middle;
	border-left: 1px solid #Ffffff;

	}		
	
	
	/* Spacer to allow a clear	 */	
.clearspacer {
	clear: right;
	height: 0px;
	}

		



		


/* strap-line in title bar  */
#strap  {
		padding: 120px 0 0px 0;
		}
	
		
	#strap h1 {
		border-bottom: 0px;
		margin-bottom: 10px;
		}



/* Top menu bar*/

#topBar {
	background-color: #6c3;
	letter-spacing: 1px;
	border: solid 0px #666;
	padding: 2px;
	}


#topBar li a:link, #topBar li a:visited {
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	}
	
#topBar li a:hover {
	color: #c00;
	}


/* holds the main content in left hand column */

#content{
	float:left;
	width: 490px;
	margin: 20px 18px 20px 0px;
	}
	
#contentpage{
	float: left;
	width: 577px;
	margin: 20px 10px 20px 0px;
	padding: 0px 15px 0px 0px;
	border-right: solid 0px #999;
	
	}
	
	
	
	


	/* BITS AND PIECES TO BE USED WITHIN THE CONTENT TEXT  */
	
					
				
			/* this is the link bar that can be inserted within the content e.g. contact baileys, go to top, there are two on the product page */
		
			
			.infobar {
				width: auto;
				clear: left;
				margin: 30px 0 20px;
				padding: 0 0 15px;
				border-bottom: solid 1px #ccc;
				text-align: center;
				}
				
				.infobar li {
				display:inline;
				padding: 5px 5px 5px 15px;
				vertical-align: 20%;
				background-color: #fc3;
				border: solid 1px #ccc;
				text-align: center;
				}
		/* bullets used for top tips???? */
			.bullet {
			}
			
			.bullet ul{
			list-style-type:none;
			text-align: left;
			margin: 0px;
			border: 0px;
			display: block;
			
			}	

			.bullet li{
			font-size:95%;
			background:url(images/click-logo.gif) no-repeat 0px 5px;
			padding: 0px 0 12px 25px;
			margin:2px;
			display: block;
			}
			

	
			/* This is the little 'button' on the left of the garden page saying 'get quote' */
	.getquote {
	margin: 0px 8px 5px 5px;
	border: 1px none #333;
	padding: 5px 7px 8px 7px;
	background-color: #cc0000;
	width: 84px;
	float: right;
	text-align:center;
				
	voice-family:"\"}\"";
	voice-family:inherit;
	width:70px;

	}
	html>body .getquote {
	width:70px;
	}

			
			.getquote a:link, .getquote a:visited {
				font-weight: normal;
				color: #ffffff;
				line-height: 100%;
				letter-spacing: 1px;	
				}
								
			.getquote a:hover {
				color: #000;
				}
				
			/* This is the blue box on the form where you go to buy each product (after going to the map), 
			you click on the amount and this shows in the box */
				
		.quote {
		float:right;
		margin:20px 20px 0px 0px;
		padding: 0px 10px 3px 10px ;
		background-color: #369;
		width: 220px;
		color: #fff;
	
		
		voice-family:"\"}\"";
		voice-family:inherit;
		width:200px; 

		}
		html>body .quote {
		width:200px;
		}
		
		
				/* Right hand bar holding the menu links etc */
#linksbar {
	float: right;
	width: 275px;
	margin: 20px 0px;
	
	
	}

				
#linksbarpage {
	float: right;
	width: 198px;
	margin: 20px 0px 20px 15px;

	line-height: 130%;
	
	}
		
		
	/* This is the  box used to contain info on the right hand of index - note, the .box further down page due to cascading problems */			
			


			.boxtext h3{
			clear:none;
			margin: 0;
			font-size:.8em
		
			
			} 
		
		.boxtext {
			font-size: 0.9em;
			line-height: 130%;
			padding: 0px 0px 5px 0px;
			overflow: hidden;
}			
		
			
		.box  a:link, .box  a:visited {
			text-decoration: none;
			font-size: 100%;
			font-weight: bold;
			color: #369;
			}
			
		.box  a:hover {
			color: #f30;
			}	
		
	
	
		.boxlink {
			padding: 5px 0 0 0;
				
			}
		

		.boxlink  a:link, .boxlink  a:visited {
			font-weight: normal;	
			}

	
		.box {
			border-top: 1px solid #999;
			border-bottom: 1px solid #999;
			margin: 0px 0px 30px 0px;
			padding: 0px;
			height:78px;
			width: 262px;
			background:#ffffff;

						
			}
		
		.box img{
			float:left;
			height: 78px;
			width: 78px;
			margin: 0 5px 0 0 ;
			padding: 0px;
			}
		
		/* main text in menu style boxes in the linksbar on the right hand side */
			
	 
			
.pagebox	{
	font-size: 0.95em;
padding:4px  9px;
margin:0px 0 30px 0;
background:#e3e3e3;

color:#000;
	}
	
.pagebox img{
	margin: 10px 0 5px 3px;	 
	border:1px solid #ccc;
	
	}

.important	{
	font-size: 0.95em;
padding:4px  9px;
margin:0px 0 30px 0;
background:#ffcc33;
color:#000;

	}	
	
.important img{
	margin: 10px 0 5px 3px;
	border:1px solid #ccc;

	
	}
	
		
/* this is the footer ;area */


#footer {
	clear:both;
	border-top: solid 1px #666;
	
	font-size: 0.9em;
	background-color: #fff;
	line-height: 120%;
	}
	
.footerbox {
		float:left;
		margin: 8px 25px 8px 0px;
		padding: 0 25px 0 0 ;
		border-right: 1px solid #ccc;
		
		
	}
	
		/* remember weird glitch - if second line of link name longer than first, part of second line wraps roud */	
		
	.footerbox img {
		margin: 0 8px 0 0 ;
		float:left;
		vertical-align: middle;
		;
		
		}
		
		.footerboxlast {
		float:right;
		margin: 8px 10px 8px 0px;
		padding:  0;
		border: 0;
		
		}
		
		.footerboxlast img {
		margin: 0 8px 0 0 ;
		float:left;
		vertical-align: middle;
		
		}		
		
		
	.boxtext img{
				float: right;
			height: 15px;
			width: 15px;
			padding: 0;
			border: 0px;
			margin: 0 5px 0 0;	
			}		
		
	/* keeping 	
		
	#footer ul {	
		text-align: left;	
		}
		
	
	#footer li {	
		border-right: 1px solid #999;
	width: 50px;

			
		}     */
	
	/* this is the second footer area with my details */
#footer1 {
		clear:both;
		position:relative;
		font-size:  0.9em;
		color:#333;
		text-align:center;
		background-color: #fff;
		padding: 15px 10px 10px 10px;
		border-top: solid 1px #666;	
		
		}



/* stuff for form	 */

form {
	margin: 0;
	}

/* Where form items floated right  	 */

	input, textarea, select{
		float:none;
		margin: 5px 2px 5px 0;
		vertical-align: center;
		font-size: 1 em ;
		
		
		}

		label  {
		font-size: 95%;
		margin: 15px 0px 5px 0px;
		border: solid 1px #ccc;
		border:0px;
		
		}

			
/* Where form items no float	 */


.formfloat {
			}
			
										
													
.formfloat input, .formfloat textarea  {
		float:right;

		clear: right;
		
		}
		
.formfloat label  {
		font-size: 95%;
	
		border:0px;
		
		}

															
														
/* end of stuff for form */

 
/* outer container to enable coloured border - THIS IS DOWN THE BOTTOM FOR A REASON (CASCADING FROM BOTTOM MEANS PAGE LOADS BETTER)*/


#container {
	position: relative;
	margin: auto;
	width: 867px;
	padding: 20px 25px 5px 25px;	
	background: #fff url(images/title-background.gif) no-repeat 15px 5px;
	

	
	voice-family:"\"}\"";
	voice-family:inherit;
	width:817px;

	}
	html>body #outer {
	width:817px;
	}