/* CSS Document */
@import url(reset.css);
html {
	overflow-y: scroll;  /* always show scroll so pages dont jump in FF */
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:101%;
	text-align:center;
	background:#fafaf4 url(/img/bg_page.gif) repeat-x top;
}
h1 {
	font-family:Garamond, "Times New Roman", Times, serif;
	font-size:24px;
	font-weight:normal;
}
h2, .total {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
	padding:1em 0 0.2em 0;
	color:#3d4932;
}
h3{ /*h1+p*/
	font-family:Arial, Helvetica, sans-serif;
	/*font-size:0.9em;*/
	font-size:14px;
	font-weight:normal;
	padding:1em 0 0.5em 0;
	line-height:1.3;
}
h4{
	font-size:12px;
	line-height:1.5;
	color:#3b454b;
	font-weight:bold;
	padding:1em 0 0.5em 0;
}
h1 img{
	float:right;	
	margin:-1em 0 0 0.2em;
}
h1+p img{
	float:left;	
}
.category h1+p{
	margin-right:70px;	
	padding-bottom:1em;
}
.category h1+p img{
	position:absolute;
	top:0;
	right:0;
}
p, li, td, th {
/*	font-size:0.8em;*/
	font-size:12px;
	line-height:1.5;
	color:#3b454b;
}
#content th{
	text-align:right;
	font-weight:bold;
	padding-right:10px;
	width:30%;
}
#content p{
	padding-bottom:18px;	
}
li h2{padding:1.3em 0 0.4em 0;}
li h3{padding:0.2em 0;}
/*li li, li p{
	font-size:1em;	
}*/
legend{
	display:none;	
}
blockquote{
	margin-left:80px;	
}
cite{
	font-style:italic;	
}

a:link, #account-nav ul a:visited{
	color:#2f92cf;	
}
a:hover{
	text-decoration:none;	
}
a:visited{
	color:#4366d8;	
}
a img{
	border:none;	
}
/*------------------------------------------------------------------*/
#container, #masthead {
	width:939px;
	margin:0 auto;
	text-align:left;
	position:relative;
}
#container{
	background:#FFF;
	padding-bottom:2em;
}
/* --- Masthead --- */
#masthead{
	padding:13px 0 0 0;	
	background:url(/img/bg_header.gif) repeat-x bottom;
}
#logo a{
	display:block;
	text-indent:-999em;	
	background:url(/img/logo_vpure.gif) no-repeat top left;
	width:163px;
	height:93px;
}
#logo p{
	font-size:0.7em;	
	color:#818285;
}
#phone{/*logo is in pixels, so we can accurately place the phone number with positioning*/
	position:absolute;
	left:170px;
	top:50px;
	color:#727171;
	font-size:1.1em;
	background:url(/img/icon_phone.gif) no-repeat left top;
	padding-left:15px;
	text-shadow: #999 1px 1px 3px;
}
#phone span{
	font-size:0.7em;
	text-shadow:none;
}
#masthead li{
	float:left;	
}
#main-nav li{
	margin:1em 0 0 0;
	padding-right:10px;
	background:url(/img/navigation-ends.gif) no-repeat right top;
	font-size:12px;
	font-weight:bold;
}
#main-nav li:hover{
	background-position:center right;
}
#main-nav a{
	text-decoration:none;
	color:#FFF;
	padding:0 1em 0 1.1em;
	line-height:36px;
	display:block;
	background:url(/img/navigation.gif) no-repeat top left;
}
#main-nav li:hover a{
	background-position:center left;
	color:#3d4932;
}
#main-nav .on, #main-nav .on:hover{
	background-position:bottom right;
	border-left:1px solid #f0f0f0;
}
#main-nav .on a, #main-nav .on:hover a{
	color:#3d4932;	
	background-position:bottom left;
	cursor:default;
}
#payments{
	padding:0.6em 0 0 0.6em;
	margin-right:0.5em;
	width:97%;
	position:absolute;
	right:0;
	top:0;
}
#payments li{
	float:right;	
	padding:0 0 0 0.2em;
	line-height:25px;
}
#payments img{
	vertical-align:middle;	
}
#account-nav{
	position:absolute;
	right:0;
	top:35px;
}
#account-nav li{
	padding:1em 0.5em 0 0.5em;
	font-size:0.75em;
}
#account-nav .on a{
	color:#3B454B!important;
	text-decoration:none;
	cursor:default;
	font-weight:bold;
}
#account-nav ul .on a{
	color:#557b20!important;
}
#account-nav .basket a{
	background: transparent url(/img/icon_basket.gif) no-repeat left;	
	padding:15px 0 3px 32px;
	margin-top:-13px;
	display:block;
}
#account-nav .basket{
	/*background:url(/img/bg_divider.gif) no-repeat right bottom;	*/
	clear:left;
}
#account-nav .normallink{
	padding:1.2em 0.5em 3px 0.5em;	
	background:url(/img/bg_divider.gif) no-repeat left bottom;	
}
#account-nav li li{
	padding:0 0.3em;
}
#account-nav #payments li{
	padding:0 0.2em;	
}
#account-nav li li strong{
	font-size:1.9em;
	vertical-align:middle;
}
#masthead fieldset{
	position:absolute;
	right:0;
	bottom:0;
	padding:5px;
	width:279px;
	height:26px;
	background:#c8c9c7 url(/img/bg_searchform.gif) no-repeat bottom right;	
}
#masthead input{
	width:190px;	
	margin-left:3px;
	vertical-align:middle;
}
#delivery-notice, .delivery-wholesale{
	position:absolute;
	top:13px;
	left:377px;
	width:184px;
	height:61px;
/*	text-align:center;
	background:#e2e3e3;
	font-size:0.8em;
}
#delivery-notice strong{
	font-weight:normal;
	text-transform:uppercase;
	font-size:2em;
	display:block;*/
}
#delivery-notice p a{
	display:block;
	text-indent:-999em;
	height:61px;
	background:url(/img/freedelivery.gif) no-repeat bottom left;	
}
.delivery-wholesale p{
	color:#C00;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	font-family:Garamond, "Times New Roman", Times, serif;
	line-height:1.2;
}
.delivery-wholesale p strong{
	display:block;
	font-size:30px;
}
/* --- content --- */
#content {
	float:right;
	width:565px;
	border-right:1px solid #f0f0f0;
	padding:2.2em 32px 0 0 ;
}
#content ul{
	list-style:disc;	
}
.ui-tabs-panel p+ul{
	padding-left:15px;
	margin-top:-15px;
}
#products li{
	text-align:center;	
	/*font-size:0.7em;*/
	position:relative;
	list-style:none;
	padding-bottom:2em;
	float:left;
	width:250px;
	margin-right:32px;
}
#products img{
	display:block;	
	margin:0 auto;
}
#products h2{
	font-family:Arial, Helvetica, sans-serif;	
	font-size:1.2em;
	line-height:1.5;
	padding-bottom:0;
}
#products p{
	padding-bottom:0.5em;	
}
/* --- Product specific info --- */
#price{
/*	
	clear:left;
	padding:1em 0.3em 0.5em 0.3em;
	text-align:center;	position:relative;
	position:absolute;
	margin-top:160px;*/
	background:#ebebeb;
	float:left;	
	width:170px;
	margin-top:1em;
}
#price img{
	margin-bottom:1.1em;	
}
#price p{
	padding:0.3em;	
	text-align:center;
}
#price strong{
	color:#900;
	font-weight:bold;
}
#price del{
	font-size:0.9em;	
	position:absolute;
	margin-top:-1.2em;
}
/*.productBadge{
	position:absolute;
	height:56px;
	width:56px;
	text-indent:-999em;
	right:2px;
	top:-60px;
	background:no-repeat top left;
}
.threefortwo{
	background-image:url(/img/badge_threefortwo.png);	
}*/
#description{
	width:380px;
	float:right;
}
#productinfo{
/*	margin-left:190px;	*/
}
#tags{
	font-size:11px;	
}
#content #tellafriend{
	padding-left:18px;
	background:url(/img/icon_envelope.gif) no-repeat left;
	clear:both;
	padding-bottom:0;
}
#happycustomer{
	float:left;	
}
/*For the modal pop ups shopping basket*/
.simplemodal-data {
	padding:20px!important;
	text-align:left;
}
#ModalBasket td{
	padding:0.2em;
	vertical-align:top;
	text-align:left;
	border-top:1px solid #DDD;
}
#ModalBasket img{
	vertical-align:top;	
}
#ModalBasket .button a{
	display:block;
	height:28px;
	text-decoration:none;
	text-indent:-999em;
	float:right;
	width:113px;
	background:url(/img/button_checkout.gif);
	margin-top:1em;
}

/*This form code is for the checkout and contact pages*/
fieldset.checkout{
	/*border-bottom:1px solid #CCC;	*/
	padding:0 1em 1.5em 1em;
	margin:2em -0.4em 20px -0.4em;
	margin:0 -0.4em 20px -0.4em;
	background:url(/img/bg_gradient.gif) top repeat-x;
}
.simplemodal-data .checkout{
	background:none;	
	border:none;
	margin-top:0;
}
/*.checkout legend{
	display:block;	
	margin-top:3em;
}*/
.checkout input, .checkout textarea, .checkout select{
	display:block;	
	width:15em;
}
.check input{
	display:inline;	
	width:auto;
	vertical-align:middle;
}
.postcode{
	width:6em;	
}
.checkout label, #content .label{
	font-size:12px;	
	font-weight:bold;
	color:#333;
	display:block;
	padding:0.8em 0 0 0;
	margin:0;
}
.checkout label.noheading{
	padding:0;
}
.checkout table label{/*.Net controls are in tables... using it to target radio button lists*/
	font-weight:normal;
}
/* --- Extra --- */
#extra {
	float:left;
	width:217px;
	padding:1em 85px 0 15px;
	clear:both;
	border-left:1px solid #f0f0f0;
}
#extra li{
	margin-bottom:2em;	
}
#extra li ul{
	border-top:1px solid #E2E2E2;	
}
#extra li li{
	padding:0 0.7em;
	margin:0;
	border-bottom:1px solid #dcdee5;
	border-left:1px solid #dcdee5;
	border-right:1px solid #E2E2E2;
	background:url(/img/navigation.gif) no-repeat bottom right;
}
#extra li p{
/*	font-size:0.85em;	*/
	font-size:11px;
	line-height:1.4;
}
#extra li li a{
	text-decoration:none;	
	display:block;
	color:#000;
	padding:0.3em 0;
}
#extra li li:hover{
	background:#ebebeb;	
}
.offercode{
	background:#fff0c5;
	padding:0.3em 0 0.3em 0.3em;
}
.offercode input{
	width:125px;	
}
#guarantee{
	background:#ebebeb url(/img/seal.gif) no-repeat top right;
	padding:0.6em 50px 0.6em 0.6em;
}
#sidebarProduct {
	margin-bottom:9em !important;
}
#sidebarProduct h4 {
	padding-left:0.6em;
}
#sidebarProduct img {
	width:70px;
	float:left;
}
#sidebarProduct .button{
	text-align:center;
	float:right;
}
#sidebarProduct .threefortwohome{
	margin-top:10px;
}
.newsletter-signup{
	padding-left:0.6em;
	background:url(/img/newsletter.jpg) no-repeat right top;
}
.newsletter-signup p{
	padding:0 75px 0.4em 0;
}
.newsletter-signup input{
	width:96%;	
}
.newsletter-signup .button{
	float:right;	
}
/* -- Footer -- */
#footer {
	clear:both;
	padding:0.5em 0;
	background:url(/img/bg_footer.png) no-repeat top;
}
#footer ul{
	width:17em;	
	margin:0 auto;
}
#footer li, #footer p{
	color:#7f8f9a;
	font-size:0.7em;
	line-height:1.4;
}
#footer li {
	float:left;
	padding:0 0.15em;
}
#footer p{
	clear:both;	
	padding:0.5em 0;
}
/* -- Decorative shadows -- */
/*These are in spans, positioned off the edge of the container div, to allow the container to still have a white background.  Any other ideas on how to achive this affect without using extra markup? */
#shadow-bottomleft, #shadow-bottomright, #shadow-topleft, #shadow-topright{
	position:absolute;
	display:block;
	width:8px;
	height:470px;
}
#shadow-bottomleft{
	background:url(/img/bg_shadow-bottom-left.png) no-repeat bottom right;
	left:-8px;
	bottom:0;
}
#shadow-bottomright{
	background:url(/img/bg_shadow-bottom-right.png) no-repeat bottom left;
	right:-8px;
	bottom:0;
}
#shadow-topleft{
	background:url(/img/bg_shadow-top-left.png) no-repeat top right;
	left:-8px;
	top:-5px;
}
#shadow-topright{
	background:url(/img/bg_shadow-top-right.png) no-repeat top left;
	right:-8px;
	top:-5px;
}
/* -- Classes -- */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.hidden{
	position:absolute;
	left:-999em;
}
input.button{
	text-indent:-999em;
	border:none;
	height:26px;
	background:#f2f2f2 no-repeat top left;	
}
#masthead input.search{
	background-image:url(/img/button_search.gif);
	width:75px;	
	height:31px;
	margin-left:0;
}
.offercode input.apply{
	background-image:url(/img/button_apply.gif);	
	width:75px;
}
.newsletter-signup input.signup{
	background-image:url(/img/button_signup.gif);	
	width:73px;
	height:31px;
}
input.save{
	background-image:url(/img/button_save.gif);
	width:99px;
	height:30px;
	margin:5px 0 0 120px;
}
#content input.apply{
	background-image:url(/img/button_apply-orange.gif);
	width:104px;
	height:38px;
	margin:10px 0 0 120px;
}
#btnLogIn{
	background:url(/img/button_login-white.gif) no-repeat top left;	
	width:65px;
	height:28px;	
	margin:5px 0 0 200px;
}
.button a{
	display:block;
	height:28px;
	text-decoration:none;
	text-indent:-999em;
}
.buynow a{
	background:#e4780f url(/img/button_buynow.gif) no-repeat top left;
	width:105px;
	height:39px;
	margin:0 auto;
}
.buynow25off a{
	background:#e4780f url(/img/button_buynow_25off.gif) no-repeat top left;
	width:135px;
	height:57px;
	margin:0 auto;
}
.threefortwo a{ /*3 for 2 button on product page*/
	background:url(/img/button_offer-3for2.gif);
	width:165px;
	height:48px;
	margin:0 auto;
}
.threefortwohome a{ /*3 for 2 button on home page*/
	background:url(/img/button_red-small.gif);
	width:135px;
	height:39px;
	margin:0 auto;
}
.btnAddOfferCode{
	width:72px !important;
	height:24px;
	padding-top:5px;
	margin:-3.4em 0 0 190px;
}
.offer{
	display:block;
	position:absolute;
	width:56px;
	height:56px;
	background:url(/img/badge_threefortwo.png) no-repeat top left;
	text-indent:-999em;
	right:85px;
	top:120px;
}
.send a, input.send{
	background-image:url(/img/button_send.gif);
	width:75px;
	height:32px;
}
.send a{margin-left:145px;}
.price{
	color:#000;
	font-size:1.1em;
	padding:0.5em 0;
	font-weight:bold;
}
.category .price{
	display:block;	
	padding-bottom:0;
}
.sale{
	color:#900;
	font-size:1.2em;
}
a.action{
	float:right;	
}
.error, .note, .information{
	background:#FFF url(/img/icon_warning.gif) no-repeat left center;
	padding-left:18px!important;
	font-weight:bold;
	color:#900;
	font-size:12px;
	padding-bottom:0!important;
}
.information{
	color:#3B454B;	
	background-image:url(/img/icon_info.gif);
}
#ModalBasket .information, #basketContainer .information{
	color:#900;	
}
.note{
	color:#557B20;	
	background-image:url(/img/icon_tick.gif);
}
.watermarkOn {
	color:#999;
}
.minor{/*information that is of less importance, but neccessary - use to de-emphasise things*/
	color:#999;
	font-size:11px;
}
.total{
	font-weight:bold;
	text-align:right;
	line-height:40px;
	border-top:1px solid #DCDEE5;
	border-bottom:2px solid #DCDEE5;
	margin-top:1em;
}
.btnPostCodeLookUp {
	display:none;
}
/*-- Checkout -- */
#content .ddDatePickerDayDropDown, #content .ddDatePickerMonthDropDown, #content .ddDatePickerYearDropDown {
	display:inline;
	width:50px;
}
.checkout #rdoLstGender label, 
.checkout #rdoLstGender input, 
.checkout #rdoLstDietaryStatus label, 
.checkout #rdoLstDietaryStatus input, 
.checkout #ctlEditDetails_rdoLstDietaryStatus label, 
.checkout #ctlEditDetails_rdoLstGender label,
.checkout #ctlEditDetails_rdoLstDietaryStatus input
.checkout #ctlEditDetails_rdoLstGender input,
.defaultDelCheckbox input {
	display:inline;
}
.defaultDelCheckbox input {
	width:auto;
}
.checkout #rdoLstGender input, .checkout #rdoLstDietaryStatus input, .checkout #ctlEditDetails_rdoLstGender input, .checkout #ctlEditDetails_rdoLstDietaryStatus input {
	width:auto;
	margin-right:1.5em;
}
/* --- JS --- */
.js .lblStreetName, .js .lookupResults, .js .btnFetchAddress, .js .addressContainer, .js .check, .checkout .btnEnterAddress, .js .btnNoJsSelectDeliveryAddress {
	display:none;
}
.js .checkout .btnEnterAddress {
	display:inline;
	font-weight:normal;
}
#content .postcode {
	display:inline;
	width:6em;
}
.checkout .btnFindAddress {
	display:inline;
	width:auto;
	margin:0 0 -8px;
}