/*general style*/

*{

	margin:0;
	padding:0;

}

i{

	display:none;

}

body{
	padding:0px;
	margin:0px;
	background-color: #fff;
	background-image: url(../img/bk_header.gif);
	background-repeat:repeat-x;
	background-position: left top;
}

p, td, label{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #595959;
	margin-bottom: 10px;

}

img{
	border:0;

}

a{
	text-decoration:none;
	color:#595959;

}

a:hover{
	text-decoration:underline;
	color:#595959;

}
h4 {
	font-size: 16px;
	color: #004b8d;
}
h1 {
	padding-bottom: 10px;
}
h5 {
	padding-bottom: 20px;
}
h6 {
	margin: 38px 0 10px 0;
}
h3 {
	font-size: 16px;
	color: #559aae;
}
h2 {
	font-size: 16px;
	color: #004b8d;
	padding-bottom: 10px;
}
 h2, h3, h4, h5, h6 {
	font-family:Arial, Helvetica, sans-serif;
}
.clear{
	clear: both;
}
/*end general style*/

/*layout*/
#container{
	text-align:left;
	width:980px;
	background-image:url(../img/header_bk.jpg);
	background-repeat:no-repeat;
	background-position:left top;
	padding-left:40px;
	padding-right:20px;
	margin-left: auto;
	margin-right: auto;
	\/*IE 5.x hack*/; 	
	height: auto;
}

#left{
	width: 600px;
	float:left;
}

#right{
	padding-left: 15px;
	width: 300px;
	float:left;
}
/*header*/
#header{
	width:940px;
	height:436px;
	text-align: left;
	position: relative;
	z-index: 0;

}
#logo{
	height: auto;
	width: 306px;
	padding-top: 34px;
	padding-left: 20px;

}
#basket{
	height: 37px;
	background-image:url(../img/buy/basket.gif);
	background-position:top right;
	background-repeat:no-repeat;
	padding-right: 42px;
	position:absolute;
	top: 15px;
	right: 0px;
	z-index: 120;
	width: 220px;
	padding-top: 12px;
}
#basket ul{
	width: auto;
	height:auto;
	list-style-type: none;
}
#basket li {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #595959;
	width: auto;
	margin-right: 5px;
	float: right;
	padding-bottom: 2px;
}
#basket li a{
	color: #595959;
	text-decoration: none;
}
#basket li a:hover{
	color: #595959;
	text-decoration:underline;
}
#basket p{
	font-size:12px;
	width: 100px;
	color: #595959;
	text-align: right;
}
.total{
	color: #b72432
}
#basket a {
	text-decoration: underline;
}
#flash{
	padding-top: 50px;
	height: 275px;
	width: 940px;
}
#butterfly{
	position:absolute;
	top: 12px;
	left: 313px;
	z-index: 100;
}
/*menu*/
#menu{
	width:582px;
	position:absolute;
	z-index: 250;
	top: 72px;
	right: 32px;
	height: 88px;
	
}

#menu ul{
	list-style-type:none;

}

#menu li{
	float:left;

}	

#menu a{
	display:block;

}

#menu a.m01{
	width:80px;
	height: 47px;
	margin-top:32px;
	background-image: url(../img/products_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	
}

#menu a.m02{
	width:102px;
	height:50px;
	margin-top:14px;
	background-image: url(../img/howitworks_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	
}

#menu a.m03{
	width:100px;
	height: 47px;
	margin-top: 2px;
	background-image: url(../img/diduknow_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	
}

#menu a.m04{
	width:105px;
	height: 40px;
	margin-top: 1px;
	background-image: url(../img/feedback_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#menu a.m05{
	width:59px;
	height: 38px;
	margin-top: 4px;
	background-image: url(../img/faq_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#menu a.m06{
	width: 74px;
	height: 42px;
	margin-top: 9px;
	background-image: url(../img/contact_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#menu a.m07{
	width:61px;
	height: 40px;
	margin-top: 48px;
	background-image: url(../img/home_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#menu a:hover, #menu a.active{
	background-position:left bottom;

}
/*content*/
#content{
	text-align:left;
	width: 915px;
	clear: both;
}

#content a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: underline;
}
#content a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: underline;

}
div.border{
	height: 1px;
	margin-top: 10px;
	padding-bottom: 15px;
	background-image: url(../img/dash.gif);
	background-position:left top;
	background-repeat:repeat-x;
}

div.terms ul{
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 0px;
}
div.terms li{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #595959;
	text-decoration:none;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
}
div.sitemap ul{
	padding: 20px;
}
div.sitemap li {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #595959;
	text-decoration:none;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
}
/*faq's section*/
#content ol{
	padding-left: 20px;
	padding-top: 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #595959;
	text-decoration: none;
	clear:both;
}
div.faq{
	width: 100%;
	overflow: hidden;
	padding-top:10px;
}
div.faq ul {
	list-style-type: none;
	height: auto;
	clear: both;
}

div.faq ul li {
	text-align: left;
	float: left;
	padding-top: 10px;
	margin-bottom:15px;
	margin-right: 20px;
}
div.answers {
	width: 605px;
}

/*accessories section*/
div.accessories{
	width: 100%;
	overflow: hidden;
	padding-top:10px;
}
div.accessories ul {
	list-style-type: none;
	height: auto;
	clear: both;
}

div.accessories ul li {
	text-align: left;
	float: left;
	padding-top: 10px;
	margin-bottom:15px;
	margin-right: 20px;
}

div.pdetails {
	width: 485px;
}
.price {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #595959;
	padding-top: 5px;
	padding-bottom: 10px;
}
.special {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color: #b72432;
}
/*home*/
div.w2b ul {
	list-style-type: none;
	padding-top: 15px;
	margin-bottom: 15px;

}

div.w2b ul li {
	FLOAT: left;
	WIDTH: auto;
	HEIGHT: auto;
	text-align: left;
	margin: 5px 10px 5px 10px;
	position: relative;

}
/*home*/
div.home ul {
	list-style-type: none;
	padding-top: 15px;
	margin-bottom: 15px;

}

div.home ul li {
	FLOAT: left;
	WIDTH: 290px;
	HEIGHT: 193;
	text-align: left;
	margin-right: 15px;
	position: relative;

}

div.gutter {
	width: 262px;
	height: 184px;
	background-image:url(../img/gutter_bk.gif);
	background-position: left top;
	background-repeat: no-repeat;
	PADDING-RIGHT: 14px; 
	PADDING-LEFT: 14px; 
	padding-top: 9px; 
	text-align: left;
	
}

div.gutter a{
	background-image: url(../img/more_b1.gif);
	background-position: center top;
	background-repeat: no-repeat;
	height: 27px;
	padding-left: 34px;
	padding-top: 8px;
	display: block;
	color:#e9f0f5;
	margin-top: 10px;	
	
}

#solo {
	position: absolute;
	top: 93px;
	right:-10px;
}

#isa {
	position: absolute;
	top: 84px;
	right:-9px;
}
#clever {
	position: absolute;
	top: 103px;
	right: 1px;
}

#soloB1 a{
	position: absolute;
	top: 138px;
	left: 12px;
	display:block;
	background-image:url(../img/order_bk.gif);
	background-repeat: no-repeat;
	background-position: left top;
	color: #FFFFFF;
	height: 23px;
	width: 86px;
	padding-top: 6px;
	padding-left: 23px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}

#soloB1, isaB1, cleverB1 a:hover{
	color: #f4e022;
	text-decoration:underline;
}

#isaB1 a{
	position: absolute;
	top: 138px;
	left: 12px;
	display:block;
	background-image:url(../img/isa_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	color: #FFFFFF;
	height: 23px;
	width: 142px;
	padding-top: 6px;
	padding-left: 23px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}

#cleverB1 a{
	position: absolute;
	top: 138px;
	left: 12px;
	display:block;
	background-image:url(../img/clever_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	color: #FFFFFF;
	height: 23px;
	width: 166px;
	padding-top: 6px;
	padding-left: 23px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
#toggle-form {
	background-image:url(../img/more_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 31px;
	width: 204px;
	padding-top: 8px;
	padding-left: 23px;
	display: block;
	color:#FFFFFF;
	
}

.buttons div{
	padding: 0px;
}

div.details a:hover{
	text-decoration: underline;	
	color: #FFFFFF;
	
}

/*Contact*/
div.address ul {
	list-style-type: none;
	overflow: hidden;
	width: 915px;
}

div.address ul li {
	FLOAT: left;
	WIDTH: 300px;
	HEIGHT: 200px;
	text-align: left;
}

/*Contact*/
div.formElm {
	clear: both;
	padding-top: 5px;
	
}

* html div.formElm {
	padding-top: 2px;

}

div.formElm label, div.emptyLabel {
	display: block;
	float: left;
	width/**/: 140px !important; /*for moz browser*/
	width: 130px; /* for IE */
	font-size: 12px;
	padding-top: 5px;
	color: #595959;

}

div.tickElm label, div.emptyLabel {
	display: block;
	float: left;
	width/**/: 280px !important; /*for moz browser*/
	width: 280px; /* for IE */
	font-size: 12px;
	padding-top: 5px;
	color: #595959;

}

div.formElm input.textf {
	display: block;
	float: left;
	width: 135px;
	font-size: 12px;
	color: #fbfbfb;

}

input.send_button {
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	cursor: pointer;
	color: #e9e9e9;
	text-align: center;
	padding-left: 4px;
	padding-right: 3px;
	padding-bottom: 4px;
	padding-top: 5px;
	font-size: 12px;
	border: 0px solid #fff;
	width: 104px;
	height: 43px;
	float: left;
	margin-right: 8px;
	background-color: #fff;
	background-image: url(../img/send_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	font-weight: bold;
}
input.submit_button {
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	cursor: pointer;
	color: #fff;
	text-align: center;
	padding-left: 4px;
	padding-right: 3px;
	padding-bottom: 4px;
	padding-top: 5px;
	font-size: 12px;
	border: 0px solid #fff;
	width: 111px;
	height: 36px;
	float: left;
	margin-right: 8px;
	background-image: url(../img/submit_b1.gif);
	background-repeat: no-repeat;
	background-color: #fff;
	background-position: left top;
	font-weight: bold;
}
input.browse_button {
	cursor: pointer;
	text-align: left;
	border: 0px solid #fff;
	width: 53px;
	height: 21px;
	background-image: url(../img/browse_b1.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
div.submitButtons {
	padding-top: 15px;
	padding-bottom: 20px;
	clear: both;

}

div.contactForm {
	padding-top: 20px;
	width: 590px;
	height: 320px;
	padding-left: 10px;

}
div.feedbackForm {
	padding-top: 20px;
	width: 280px;

}
textarea.textF {
	float: left;

}

div.contactForm input.textF, div.contactForm textarea.textF{
	width: 300px;

}

div.contactForm textarea.textF{
	height: 60px;

}

div.contactFormSubmit {
	padding-left: 135px;
	padding-top: 10px;

}
div.feedbackFormSubmit {
	padding-left: 120px;
	padding-top:5px;

}
div.browseSubmit {
	padding-left: 135px;
	padding-top: 10px;

}

/*How it works section*/
div.steps ul {
	list-style-type: none;
	width: 560px;
	height: auto;
	clear: both;
	overflow:visible;
	text-decoration:none;
}

div.steps ul li {
	text-align: left;
	list-style-type: none;
	float: left;
	padding-bottom:15px;
	padding-right: 15px;
	text-decoration: none;
}
div.guide{
	padding-top: 25px;
	width: 280px;
}
div.feedback{
	padding-top: 5px;
	width: 400px;
}

/*products*/
div.products ul {
	list-style-type: none;
	padding-top: 20px;
	width: 915px;
}

div.products li {
	float: left;
	list-style: none;
	width: 197px;
	height: 178px;
	margin-right: 8px;
	background-image: url(../img/prolist_bk.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 250px;
	padding-top: 15px;	
	position: relative;
}

#buttons a{
	display:block;
	background-image:url(../img/b1bk.gif);
	background-repeat: no-repeat;
	background-position: left top;
	color: #FFFFFF;
	height: 22px;
	width: 97px;
	padding-top: 7px;
	padding-left: 23px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	margin-top: 5px;
	text-decoration: none;
}
#soloim {
	position: absolute;
	top: 15px;
	left:-10px;
}
#multiim {
	position: absolute;
	top: -38px;
	left:-3px;
}
#filterim {
	position: absolute;
	top: 14px;
	left: 18px;
}
#wasteim {
	position: absolute;
	top: 28px;
	left: 10px;
}
/*product details*/

#pleft {
	padding-left: 70px;
	text-align: right;
	margin-right: 60px;
	float:left;
	width: 370px;
}

#pright {
	width: 400px;
	text-align: left;
	float:left;
}
div.spec{
	margin-top: 30px;
}
di.spec ul{
	list-style: none;
}

div.spec li{
	background-image:url(../img/bullet_paw.gif);
	background-position:left top;
	background-repeat: no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #595959;
	width: 330px;
	margin-bottom: 5px;
	padding-left: 20px;
	list-style: none;
	
}
/*footer*/

#footcon{
	clear: both;
	width: 100%;
	background-image:url(../img/footer_bkg.gif);
	background-position: left top;
	background-repeat:repeat-x;
	padding-top: 81px;
	height: 80px;
}

#footer{
	width: 980px;
	text-align: left;
	margin: 0px auto;
	height: 80px;
	\/*IE 5.x hack*/; 	
	position:relative;

}
#footer ul {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #7b7b7b;
	padding-top: 25px;
	list-style: none;
}

#footer p{
	float: left;
}

#footer ul li {
	margin: 0px;
	list-style: none;
	float: left;
	padding-top: 0px;
	padding-right: 5px;
	padding-left: 0px;
	width: auto;
	color: #2b5c90;
}

#footer ul li a {
	display: block;
	text-decoration: none;
	padding-left: 0px;
	padding-right: 0px;
	color: #2b5c90;

}

#footer ul li a:hover {
	text-decoration: underline;
	color: #2b5c90;

}
div.copyright{
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	width: 280px;
	bottom: 20px;
	left: 317px;
	position: absolute;
}

/*contactslide*/
#vertical_slide, {
	background: #D0C8C8;
	color: #8A7575;
	padding: 10px;
	border: 5px solid #F3F1F1;
	font-weight: bold;
}

div.marginbottom {
	margin-bottom: 10px;
}

/* howitworks slide*/	
	
/* Try not to change the below settings, as they don't affect the appearance, just the operation of the slide  */
#wrap {
	clear:left;
	height:236px;
	width:522px;
	display:block;
	overflow:hidden;
	position:relative;
}


#carousel {
	width:10000px;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0;
}

#carousel li {
	display:block;
	height:236px;
	width:545px;
	margin:0;
	padding:0;
	float:left;
	display:inline;
}

/* 

	.step: This class will control the content of the scrolling steps between the 'Previous' and 'Next' arrows.
	Edit this to your hearts content, but ensure height:233px stays in tact.  The background can be change to 
	your needs too Si.

*/
.step {
	background:url(../img/step-background.gif) repeat-x;
	color:#38B1CB;
	height:233px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* 

	I've targeted elements based on the .class specifier so that all the steps look the same to demonstrate
	In your case, for creating different steps, give the <li>'s ID's as well as Classes, <li class="step> id="step-one".
	Then use #step-one h2 { blah:deblah; } for your styling of elements contained within the <li>
	
*/
.step img { 
	float:left;
	margin-right:15px;
	margin-top: 12px;
}

.step p {  
	margin-top: 10px;
	float:left;
	font-size:12px;
	color:#333333;
	width:245px;
	line-height:15px;
}

/* 

	The container is what holds the sliding mechanism *and* the two Previous / Next images (set as anchors)
	The 'step-background.jpg' is applied again here so that between sliding steps, there is no dreaded 'white' background
	during the transition.

*/

#slider { 
	margin-top:25px;
	position:relative;
	width:590px;
	background:url(../img/step-background.gif) repeat-x;
	height:230px;
}

/* As the #container div is relative positioning, I've used absolute positioning to position the anchor images for Next and Previous  */
#slider a#previous { 
	position:absolute;
	left:0;
}

#slider a#next {
	position:absolute;
	right:0;
}

/* This positions the #wrap div 40px to the right of the container div, to move it clear of the 'Previous' image (40px width :) ) */
#slider #wrap {
	position:absolute;
	left:34px;
}