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

Filename: shop.css
Title: Spec for Shop section of Japan
Author: L Murray
Last Updated: 03 Mar 2009

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

/*==== framework ======================================================*/

/*main content div now first*/
body.shop .content {
	position: relative;
	float: left;
	width: 685px;
}

/*left col now on right*/
body.shop .left_col {
	float: right !important;
	width: 190px;
}


/*==== adjustments to pre-coded form css (main_framework.css) ==========*/

body.flaviapurple div.content_wrapper a:link,
body.flaviapurple div.content_wrapper a:visited{
	/*color:#571c1f;*/
	text-decoration:none;
}
body.flaviapurple div.content_wrapper a:hover{
	text-decoration:underline;
}

a.masterlink:link, a.masterlink:visited{
	background-image:url(../assets/shop/icon_arrow_orange.gif);
}


/*adjust width of banner_head containing page titles*/
body.shop .bannerwide_head{
	width:550px;
}

div.master_form{
	margin-bottom:20px !important;
}

	div.master_form label{
		margin-top:0px !important;
	}
	
	div.master_form li{
		margin-bottom:0.7em !important;
	}

/*for drink pages*/
div.drink_info.cost-details{
	width:515px;
	margin-top:0px;
}

/*==== Basket popup ==========*/
div#showbasket{
	display:none;
}

div.basket-popup{
	position:relative;
	width:266px;
	background:url(../assets/shop/bg_basket_top.gif) no-repeat left top;
	margin:10px auto;
	padding-top:12px;
}
	div.basket-popup ul{
		float:left;
		display:block;
		width:242px;
		min-height:138px;
		background:url(../assets/shop/bg_basket_bottom.gif) no-repeat left bottom;
		padding:0px 12px 12px 12px;
	}
		div.basket-popup ul li{
			float:left;
			display:inline;
			margin:0px;
			padding:0px;
		}
		
		div.basket-popup ul li.bp-close{
			position:relative;
			float:right;
			width:70px;
			text-align:right;
		}
			div.basket-popup ul li.bp-close img{
				vertical-align:middle;
				padding-left:4px;
			}
			div.basket-popup ul li.bp-close a:link,
			div.basket-popup ul li.bp-close a:visited{
				position:absolute;
				z-index:1001;
				display:block;
				width:70px;
				font-size:0.75em;
				color:#CCCCCC;
				text-decoration:none;
				right:0px;
			}
				div.basket-popup ul li.bp-close a:hover{
					text-decoration:underline;
				}
				
		div.basket-popup ul li.bp-packshot{
			position:relative;
			width:70px;
			height:86px;
			padding-top:6px;
			vertical-align:bottom;
		}
			div.basket-popup ul li.bp-packshot img{
				vertical-align:bottom;
			}	
		
		div.basket-popup ul li.bp-info{
			position:relative;
			float:left;
			width:172px;
			height:86px;
			padding-top:6px;
		}
			div.basket-popup ul li.bp-info p{
				position:absolute;
				font-size:0.75em;
				line-height:1.2em;
				margin:0px;
				bottom:0px;
			}
				div.basket-popup ul li.bp-info strong{
					color:#571c1f;
				}
	
	div.basket-popup ul li.bp-button{
		width:242px;
		clear:both;
		padding-top:15px;
	}
	
	div.basket-popup ul li div.button{
		float:left;
		width:130px !important;
		margin:0px;
	}

		/*remove 9 off width for padding*/
		div.basket-popup ul li div.button input{
			width:121px;
		}
	

	div.basket-popup ul li div.button.adjust{
		float:right;
		width:100px !important;
		right:0px;
	}

	
		/*remove 9 off width for padding*/
		div.basket-popup ul li div.button.adjust input{
			width:91px;
		}

/*==== Thickbox CSS for adding to basket functionality ==========*/
/* removed for add to basket to work

#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	width:100%;
	height:100%;
}

.TB_overlayMacFFBGHack {background: url(../scripts/thickbox/macFFBgHack.png) repeat;}
.TB_overlayBG {
	background:#ccc;   
    opacity:.75;   
    filter: alpha(opacity=75);   
    -moz-opacity: 0.75;
}*/

/** html #TB_overlay {  ie6 hack 
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}*/

#TB_window {
	display:none;
	z-index: 102;
	position: fixed;
	background:transparent;
	top:50%;
	left:50%;
}

/** html #TB_window {  ie6 hack 
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}*/

#TB_ajaxContent{
	clear:both;
	overflow:auto;
	text-align:left;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

/** html #TB_load {  ie6 hack 
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}*/

/*==== SHOP LANDING PAGE - ADJUSTMENTS TO 3 DRINK OPTIONS (COFFEE/TEA/CHOCOLATE) ==*/

.drink_selector .selector_coffee{
	width:226px !important;
	background-image:url(../assets/pageframework/selectorback_shop_coffee.jpg);
}

.drink_selector .selector_tea{
	width:226px !important;
	background-image:url(../assets/pageframework/selectorback_shop_tea.jpg);
}

.drink_selector .selector_chocolate{
	width:226px !important;
	background-image:url(../assets/pageframework/selectorback_shop_chocolate.jpg);
}

/*==== SB100 floater on shop landing ==========*/
div.sb100-floater{
	position:relative;
	width:680px;
	height:274px;
	background: url(../assets/pageframework/bg_flaviasb100.jpg) no-repeat;
	margin:0px 0px 20px 0px;
}
	div.sb100-floater ul.sb100-bubble{
		position:absolute;
		top:150px;
		left:190px;
		width:140px;
		color:#5a2c34;
		font-weight:bold;
	}
		div.sb100-floater ul.sb100-bubble li{
			list-style:none;
			background:url(../assets/pageframework/bullett_burgundy.gif) no-repeat left 5px;
			font-size:.75em;
			margin-bottom:.5em;
			padding-left:10px;
		}
		
	div.sb100-floater p.sb100-intro{
		position:absolute;
		top:124px;
		left:370px;
		width:290px;
		color:#464646;
	}
	
	div.sb100-floater p.sb100-intro a{
		color: #866607;
		font-weight: bold;
		display: block;
		text-align: right;
		text-decoration: none;
		background: url(../assets/pageframework/bullett_brown.gif) no-repeat center right;
		padding-right: 10px;
	}

/*==== Drink page + Detail ==========*/

ul.basket-fields{
	float:left;
	display:block;
	margin-top:-5px;
}
	ul.basket-fields li{
		float:left;
		display:inline;
		padding-top:5px;
		padding-right:5px;
		margin-bottom:8px;
	}
	
	/*£ price*/
	ul.basket-fields li.pack-price{
		width:80px;
		font-size:1.1em;
	}
		ul li.pack-price strong{
			color:#508e26;
		}
	
	/*pack code no. and info*/
	ul.basket-fields li.pack-contents{
		width:180px;
		font-size:0.75em;
	}
		ul li.pack-contents strong{
			color:#5a2c34;
		}
	
	/*quantity input and label*/
	ul.basket-fields li.pack-qty{
		position:relative;/*ie6*/
		width:65px;
		padding-top:0px;
	}
		ul.basket-fields li.pack-qty input{
			width:25px;
			text-align:center;
			vertical-align:middle;
		}
		
		ul.basket-fields li.pack-qty label{
			font-size:0.75em;
			color:#5a2c34;
			font-weight:bold;
			vertical-align:middle;
			margin:0px 0px 0px 4px !important;
			padding:0px !important;
		}
	
	/*add to basket button*/
	ul.basket-fields li.pack-button{
		padding-top:0px;
	}
		ul.basket-fields li.pack-button div.button{
			float:left !important;
			width:140px;
			margin-top:0px;
		}
			ul.basket-fields li.pack-button div.button input{
				width:131px;
			}
	
	/* Overwrite DOMTAB on detail pg */
	div.content div.domtab div ul.basket-fields{
		margin-bottom:15px;
	}
	div.content div.domtab div ul.basket-fields li{
		margin-bottom:10px;
	}
	
	div.content div.domtab div ul.basket-fields li.pack-button div.button {
		border: none;
		margin:0px !important;
		padding:0px 0px 0px 3px !important;
	}
		

/*==== Login / Register page form ==========*/

/*adjust width of fieldset for floated side by side forms*/
div.master_form.shop-login fieldset{
	width:320px !important;
}

	/*adjust to keep FF happy*/
	div.master_form.shop-login li{
		clear:both;
	}

	/*place error msg under login fields rather than at sides*/
	div.master_form.shop-login fieldset div.error{
		position:relative !important;
		float: left !important;
		clear: both !important;
		top: auto !important;
		left: 120px !important;
		width: 200px !important;
		margin-top:2px;
	}
	
	/*placement for forgot password link (login/register pg)*/
	div.master_form.shop-login p.info{
		width:200px;
	}

div.master_rightcol.shop-new-cus h3{
	font-size:0.75em;
	font-weight:bold;
	line-height:.8em;
}

/*==== Forgot Password Page ==========*/

div.master_form.forgot-password p.info{
	width:270px;
}
	div.master_form.forgot-password div.button{
		right:243px;
	}

/*==== Register Page ==========*/

div.master_form.register label{
	width:160px;
}

div.master_form.register div.error{
	left:460px;
}

div.master_form.register2 div.button{
	right:192px;
}

div.master_form.register2 input.statement-checkbox{
	display:inline; /*removed float, added inline for SF3, as float hides*/
	padding:0px;
}

div.master_form.register2 label.statement{
	float:none; /*changed for SF3, as float hides*/
	display:inline;
	text-align:left;
	width:300px;
	margin-top:0px;
	margin-bottom:25px;
}

div.master_form.register2 div.error{
	left:460px;
}

/*==== Register Thank You Page ==========*/
div.register-thanks{

}

/*==== My Account Landing Page ==========*/

/*3 icon options*/
ul.account-options{
	float:left;
	display:block;
	margin-bottom:20px;
}
	ul.account-options li{
		position:relative;
		float:left;
		display:inline;
		width:200px;
		height:110px;
		padding-right:25px;
	}
	ul.account-options li h2{
		margin-top:0px !important;
	}
	
	/*my personal details*/
	ul.account-options li.option1{
		background:url(../assets/shop/icon_personal_details.gif) no-repeat left 30px;
	}
	
	/*my password*/
	ul.account-options li.option2{
		background:url(../assets/shop/icon_my_password.gif) no-repeat left 30px;
	}
	
	/*my address*/
	ul.account-options li.option3{
		background:url(../assets/shop/icon_delivery_address.gif) no-repeat left 30px;
	}
	
	/*indent first para*/
	ul.account-options li p.indent{	
		padding-left:55px;
	}
	
	ul.account-options li p a{
		position:absolute;
		right:25px;
		bottom:0px;
		margin-top:20px;
	}

div.my-account.gradient{
	width:685px !important;
	padding-right:0px !important;
}

ul.account-info{
	display:block;
}
	ul.account-info li{
		float:left;
		display:inline;
		width:320px;
		padding-right:40px;
	}
	
	ul.account-info li h2.titlelegend{
		border:none !important;
		padding-bottom:0px !important;
		margin-top:0px !important;
		margin-bottom:10px !important;
	}
	
	ul.account-info li.info2{
		padding-right:0px !important;
	}


/*==== Edit Details Page ==========*/

div.master_form.edit-details2 input.statement-checkbox{
	display:inline; /*removed float, added inline for SF3, as float hides*/
	padding:0px;
}

div.master_form.edit-details2 label.statement{
	float:none; /*changed for SF3, as float hides*/
	display:inline;
	text-align:left;
	width:270px;
	margin-top:0px;
}

div.master_form.edit-details2 div.button{
	right:245px;
}

/*==== New Password Page ==========*/

div.master_form.new-password label{
	width:160px;
}

div.master_form.new-password div.error{
	left:460px;
}

div.master_form.new-password div.button{
	right:192px;
}

/*==== Edit / Add Address Page ==========*/
ul.list-addresses{
	float:left;
	clear:both;
	display:block;
}
	ul.list-addresses li{
		float:left;
		clear:none !important;
		display:inline;
		width:150px;
		margin-bottom:20px;
		padding-right:20px;
	}
	ul.list-addresses li a,
	ul.list-addresses li a:visited{
		display:block;
		color:#3c74a5 !important;
		font-weight:bold;
		text-transform:uppercase;
		background:url(../assets/shop/icon_edit.gif) no-repeat top left;
		padding-left:20px;
		padding-bottom:10px;
	}
		ul.list-addresses li a.link-delete,
		ul.list-addresses li a.link-delete:visited{
			background-image:url(../assets/shop/icon_delete.gif);
		}

div.master_form.add-address div.button,
div.master_form.edit-address div.button{
	right:240px;
}


/*==== View Basket Page ==========*/
div.master_form.view-basket div.button{
	margin-top:0px;
}

table.tbl-basket{
	width:100%;
	border:1px solid #a3a3a3;
	border-collapse:collapse;
	margin:10px 0px;
}
	table.tbl-basket caption{
		position:absolute;
		top:-1000%;
		left:-1000%;
		height:0px;
		line-height:0px;
	}
	
	/*headings*/
	table.tbl-basket thead th{
		font-size:.8em;
		color:#FFFFFF;
		font-weight:bold;
		text-align:left;
		background:#5a2c34;
		vertical-align:top;
		padding:10px 15px;
	}
	
	table.tbl-basket tbody tr td{
		border-bottom:1px solid #cccccc;
	}
		/*remove border from last TD row before update basket button*/
		table.tbl-basket tbody tr.last-row td{
			border-bottom:none;
		}
	
	table.tbl-basket tbody td{
		font-size:.75em;
		vertical-align:top;
		padding:15px 0px;
	}	
		/*delete icon link*/
		table.tbl-basket tbody td a.link-delete{
			display:block;
			font-size:.8em;
			color:#c73124 !important;
			text-align:center;
			background:url(../assets/shop/icon_delete.gif) no-repeat top center;
			margin-top:0px;
			padding-top:20px;
		}
		
		
		/*adjust columns below as necessary CSS2 + IE6 code*/
		
		/*first col*/
		table.tbl-basket tbody td.basket-col1{width:24px;padding:15px}
		
		/*second col*/
		table.tbl-basket tbody td.basket-col2{
			width:25px !important;
		}
		
		/*third col*/
		table.tbl-basket tbody td.basket-col3{padding:15px;}
		table.tbl-basket tbody td.basket-col3 strong{color:#5a2c34;}
	
		
		/*fourth col*/
		table.tbl-basket tbody td.basket-col4{color:#508e26;text-align:center;}
		
		/*fifth col*/
		table.tbl-basket tbody td.basket-col5{text-align:center;}
		table.tbl-basket tbody td.basket-col5 input{
			width:25px!important;
			text-align:center;
		}
		
		/*sixth col*/
		table.tbl-basket tbody td.basket-col6{
			width:100px;
			color:#508e26 !important;
			text-align:center;
		}
	
	
	table.tbl-basket tfoot tr.line td{
		border-top:1px solid #cccccc;
	}
	
	table.tbl-basket tfoot td{
		padding:10px 20px 5px 20px;
	}
		table.tbl-basket tfoot a,
		table.tbl-basket tfoot a:visited{
			color:#008cc6 !important;
		}
		
		table.tbl-basket tfoot div.button{
			margin-bottom:10px;
		}
		
		table.tbl-basket tfoot td p.txt-right{
			float:right;
			color:#5a2c34;
			text-align:right;
		}
		
		table.tbl-basket tfoot td .flavia-purple{
			color:#5a2c34;
		}
	
		table.tbl-basket tfoot p{
			font-size:.75em;
		}
		
		table.tbl-basket tfoot td.txt-taxes{
			vertical-align:bottom;
		}
		
/*==== Checkout Stage 1 ==========*/
div.master_form.checkout-stage1 ul.list-addresses li{
	width:170px;
	padding-left:20px;
}
	
	div.master_form.checkout-stage1 ul.list-addresses li input{
		float:left;
		display:inline;
		width:auto !important;
		margin:0px 0px 0px -20px !important;
	}
	
	div.master_form.checkout-stage1 ul.list-addresses li label{
		width:auto;
		font-size:0.75em;
		text-align:left;
		font-weight:normal;
		margin:0px;
	}
	
	div.master_form.checkout-stage1 ul.list-addresses li a{
		float:none;
		clear:both;
		display:block;
		font-size:0.7em;
		color:#3671c1;
		font-weight:normal!important;
		text-transform:none!important;
		background:none!important;
		padding-left:0px!important;
	}

div.master_form.checkout-stage1 div.button{
	right:245px;
}

		
/*==== Checkout Stage 2 ==========*/
div.master_form.checkout-stage2 ul.list-addresses li{
	width:280px;
	padding-left:20px;
}
	
	div.master_form.checkout-stage2 ul.list-addresses li input{
		float:left;
		display:inline;
		width:auto !important;
		margin:0px 0px 0px -20px !important;
	}
	
	div.master_form.checkout-stage2 ul.list-addresses li label{
		width:auto;
		font-size:0.75em;
		text-align:left;
		font-weight:normal;
		margin:0px;
		margin-bottom:10px;
	}
	
	div.master_form.checkout-stage2 .txt-green{
		font-size:1em !important;
		margin-top:8px;
	}

/*==== Checkout Stage 3 ==========*/
div.master_form.checkout-stage3 ul.list-addresses li{
	
}
	
	div.master_form.checkout-stage3 ul.list-addresses li label{
		width:auto;
		font-size:0.75em;
		text-align:left;
		font-weight:normal;
		margin:0px;
		margin-bottom:10px;
	}
	
	div.master_form.checkout-stage3 ul.list-addresses li div.button{
		right:auto;
		left:0px;
	}


/*==== Checkout Stage 4 ==========*/
div.checkout-thanks ul{
	margin:20px 0px;
}
	div.checkout-thanks ul ul{
		margin:20px;
	}
	
	div.checkout-thanks ul li{
		list-style:none;
		background:url(../assets/pageframework/bullett_flaviapurple.gif) no-repeat left 5px;
		font-size:.75em;
		margin-bottom:.5em;
		padding-left:10px;
	}
	div.checkout-thanks ul li ul li{
		font-size:100%;
		list-style:square;
		background:none;
		padding-left:0px;
	}

div.checkout-thanks div.button{
	float:left;
	margin-left:0px;
}

	
/*==== paragraphs within forms ========================================*/		

/*appears inside form areas, adjust as necessary by directly targeting*/
p.info{
	margin-left:120px;
	margin-bottom:0em;
}
	
/*==== form field widths ========================================*/

input.tf-185{
	width:185px;
	margin-bottom:5px;
}

input.tf-270{
	width:270px;
	margin-bottom:5px;
}

/*==== form buttons ========================================*/

/*basic green form button*/
div.button{
	position:relative;
	float:right;
	display:inline;
	height:26px;
	background:transparent url(../assets/shop/bg_green_butt_start.gif) no-repeat left top !important;
	margin-top:6px;
	margin-left:10px;
	padding-left:3px;
	right:0px;
}
		
	div.button input{
		float:none;
		width:auto;
		height:26px;
		cursor:pointer;
		font-weight:bold;
		color:#FFFFFF;
		text-align:center !important;
		text-transform:capitalize;
		border:none !important;
		background:transparent url(../assets/shop/bg_green_butt.gif) no-repeat right top !important;
		margin:0px;
		padding:0px 6px 0px 3px;
	}
	
/*for orange button*/
div.button.b-orange{
	background-image:url(../assets/shop/bg_orange_butt_start.gif) !important;
}
	div.button.b-orange input{
		background-image:url(../assets/shop/bg_orange_butt.gif) !important;
	}
	
/*for grey button*/
div.button.b-grey{
	background-image:url(../assets/shop/bg_grey_butt_start.gif) !important;
}
	div.button.b-grey input{
		background-image:url(../assets/shop/bg_grey_butt.gif) !important;
	}

/*==== general additions ========================================*/
h2.titlelegend{
	color: #af292e !important;
	font-size: .9em !important;
	font-weight: bold !important;
	margin: 15px 0px 15px 0px !important;
	border-bottom: 2px solid #ede8e9 !important;
	padding-bottom: 5px !important;
	padding-right:0px !important;
}

/*indicates text inside LEGEND*/
span.required{
	float:right;
	font-size:0.75em;
	color:#4c4c4c;
	font-weight:normal;
	font-style:italic;
}

/*apply green to text*/
.txt-green{
	color:#508e26;
}

div.gradient{
	width:620px;
	background:transparent url(../assets/shop/bg_gradient_horizontal.jpg) no-repeat !important;
	padding:40px 65px 0px 0px;
}

.clear{
	float:none;
	clear:both;
	height:0px;
	line-height:0px;
	font-size:1px;
}