/* ========================================================================================
Mars Drinks: Form Layout 
Version:1.0
Author: Lisa Kennedy
Created: 2 June 2008
Last Updated: 4 June 2008
=========================================================================================== */

/* STANDARD FORMATTING 
=========================================================================================== */

body{
	font-family:Arial,Helvetica,Verdana,sans-serif;
	font-size:80%;
	color:#666666;
}

/*** used for clearing a div with no gap ***/
.clear{
	float:none;
	clear:both;
	height:0px;
	line-height:0px;
	font-size:1px;
}

/*** used for clearing a div with a gap ***/
.clearheight{
	float:none;
	clear:both;
}

/* CONTENT AREA - houses content to right of main navigation
=========================================================================================== */
div.content-area{
	width:565px;
	text-align:left;
	margin:17px 0px 17px 17px;
}
	/*title*/
	div.content-area h1{
		font-size:190%;
		font-weight:bold;
		color:#FF6600;
		margin:0px 0px 10px 0px;
		padding:0px;
	}
		/*sub title within main title*/
		div.content-area h1 span{
			font-size:70%;
			color:#acacac;
		}
	
	/*sub title*/
	div.content-area h2{
		font-size:130%;
		font-weight:bold;
		color:#333333;
		margin:0px 0px 10px 0px;
		padding:0px;
	}
		div.content-area h2 span{
			font-weight:normal;
		}
	
	/*paragraph*/
	div.content-area p{
		margin-top:0px;
		line-height:130%;
	}
	
	div.content-area hr{
		color:#d6d2c8;
		background-color:#d6d2c8;
		height:1px;
		border:none;
		margin:4px 0px 10px 0px;
	}


/* GREY BOX HOUSING FORMS
=========================================================================================== */
div.grey-box{
	/*width:768px;CC IE55*/
	width:666px;
	text-align:left;
	border:1px solid #bdbdbd;
	padding:0px 50px;
}
	
	/*main title*/
	div.grey-box h2{
		font-size:180%;
		color:#ACACAC;
		background-color:#eaeaea;
		border-bottom:1px solid #bdbdbd;
		vertical-align:middle;
		margin:0px -50px 10px -50px;
		padding:5px 10px;
	}
		/*pre-agreed prices sub*/
		div.grey-box h2 span{
			font-size:55%;
			color:#666666;
			font-weight:normal;
			margin:0px 5px;
			vertical-align:middle;
		}
	
	/*drink title appearing above each table*/
	div.grey-box h3{
		font-size:160%;
		font-weight:normal;
		text-transform:uppercase;
		vertical-align:middle;
		margin:0px 0px 2px 0px;
		padding:0px;
	}
		div.grey-box h3 span{
			float:right;
			font-size:70%;
			color:#FFFFFF;
			vertical-align:middle;
			padding:3px 5px;
		}

/* TABLES BELOW
=========================================================================================== */

/* CONTENT AREA - customer information table information
=========================================================================================== */	

table.customer-info{
	width:565px;
	margin-bottom:10px;
}
	table.customer-info tbody th{
		color:#ff6600;
		font-weight:bold;
		text-align:left;
		vertical-align:top;
		padding:3px;
	}
	table.customer-info tbody td{
		text-align:left;
		vertical-align:top;
		padding:3px;
	}


/* CONTENT AREA - checkout items + order history
=========================================================================================== */	

table.checkout-items,
table.order-history{
	width:565px;
	border:1px solid #d6d2c8;
	border-collapse:collapse;
	margin-bottom:10px;
}
	/*table headings*/
	table.checkout-items thead th,
	table.order-history thead th{
		color:#FFFFFF;
		font-weight:bold;
		text-align:center;
		background-color:#015595;
		border:1px solid #d6d2c8;
		vertical-align:top;
		padding:5px 8px;
	}
		/*align first table header left*/
		table.checkout-items thead th.left{
			text-align:left;
		}
		
		/*adjust alignment for order-history*/
		table.order-history thead th{
			text-align:left;
		}
		
	
	/*table body data*/
	table.checkout-items tbody th,
	table.order-history tbody th{
		font-weight:bold;
		text-align:left;
		border:1px solid #d6d2c8;
		vertical-align:top;
		padding:5px 8px;
	}
	table.checkout-items tbody td,
	table.order-history tbody td{
		text-align:center;
		border:1px solid #d6d2c8;
		vertical-align:top;
		padding:5px 8px;
	}
		/*alternate row colour*/
		table.checkout-items tbody tr.alt th,
		table.checkout-items tbody tr.alt td,
		table.order-history tbody tr.alt th,
		table.order-history tbody tr.alt td{
			background-color:#f3f3f3;
		}
		
		/*adjust alignment for order-history*/
		table.order-history tbody td{
			text-align:left;
		}
			table.order-history tbody td a{
				color:#015595;
				font-weight:bold;
				text-decoration:underline;
			}

/* FLAVIA TABLES
=========================================================================================== */	

div.grey-box table.flavia{
	width:666px;
	font-size:90%;
	table-layout:fixed;
	margin-bottom:30px;
}

	/*title headers*/
	div.grey-box table.flavia thead th{
		color:#FFFFFF;
		text-align:center;
		vertical-align:top;
		padding:4px 5px;
	}
		/*remove first TH background colour*/
		div.grey-box table.flavia .empty{
			width:122px;
			background-color:transparent !important;
		}
		
		/*set description width*/
		div.grey-box table.flavia .w200{
			width:200px;
		}
		
		/*align left*/
		div.grey-box table.flavia .left{
			text-align:left !important;
		}

	/*logo image header*/
	div.grey-box table.flavia tbody th{
		text-align:left;
		vertical-align:top;
		padding:5px 5px 5px 0px;
	}
	
	/*main text content*/
	div.grey-box table.flavia tbody td{
		text-align:center;
		vertical-align:top;
		padding:5px;
	}
		div.grey-box table.flavia tbody td input{
			width:40px;
		}
		
		/*add bottom border after each TR*/
		div.grey-box table.flavia tbody tr th,
		div.grey-box table.flavia tbody tr td{
			border-bottom:1px solid #9a9a9a;
		}

/* KLIX TABLES
=========================================================================================== */	

div.grey-box table.klix{
	width:666px;
	font-size:90%;
	table-layout:fixed;
	margin-bottom:30px;
}

	/*blank header width*/
	div.grey-box table.klix thead td{
		/*width:310px;CC IE55*/
		width:290px; /*290*/
		text-align:left;
		vertical-align:top;
		padding:4px 5px;
	}
	
		/*thick border break to seperate content*/
		div.grey-box table.klix tr.break td{
			background-color:transparent!important;
			border-bottom:2px solid #666666!important;
		}

	/*title headers*/
	div.grey-box table.klix thead th{
		color:#FFFFFF;
		text-align:left;
		border-bottom:none!important;
		vertical-align:top;
		padding:4px 5px;
	}
		/*SET VARIANT TH WIDTH*/
		div.grey-box table.klix thead th.variant{
			/*width:140px;CC IE55*/
			width:130px; /*130*/
		}

	/*logo image header*/
	div.grey-box table.klix tbody th{
		font-size:110%;
		text-align:left;
		vertical-align:top;
		padding:5px 5px 5px 0px;
	}
		div.grey-box table.klix tbody th img{
			float:left;
			/*display:inline;CC IE6*/
			vertical-align:middle;
			margin:0px 5px 5px 0px;
		}
	
	/*main text content*/
	div.grey-box table.klix tbody td{
		text-align:left;
		background-color:#ffffcc;
		border-bottom:1px solid #996633;
		vertical-align:top;
		padding:5px;
	}
		
		div.grey-box table.klix tbody td input{
			width:40px; /*40*/
		}
		
/* GOODS TOTAL
=========================================================================================== */

table.goods{
	float:right;
	width:300px;
	margin-top:20px;
	margin-bottom:20px;
}
	table.goods thead th,
	table.goods thead td{
		font-weight:bold;
		text-align:left;
		vertical-align:top;
		padding:5px 8px;
	}
		table.goods thead th,
		table.goods thead td{
			border-bottom:1px solid #d6d2c8;
		}
		
	table.goods tbody th,
	table.goods tbody td{
		font-weight:normal;
		text-align:left;
		vertical-align:top;
		padding:5px 8px;
	}
		table.goods thead td,
		table.goods tbody td{
			text-align:right;
		}
		
		table.goods tbody tr.line th,
		table.goods tbody tr.line td{
			border-top:1px solid #d6d2c8;
		}
		
		table.goods tbody tr.bg-grey th,
		table.goods tbody tr.bg-grey td{
			background-color:#fbfbfb;
		}
	
	table.goods tfoot th{
		font-weight:bold;
		text-align:left;
		vertical-align:top;
		padding:5px 8px;
	}
	
	table.goods tfoot td{
		text-align:right;
		vertical-align:top;
		padding:5px 8px;
	}
		table.goods tfoot th,
		table.goods tfoot td{
			border-top:1px solid #d6d2c8;
		}
	
/* FORM
=========================================================================================== */

form{
	margin:0px;
	padding:0px;
}

div.grey-box table.form{
	width:666px;
	font-size:100%;
	margin-bottom:30px;
}
	/*label*/
	div.grey-box table.form tbody th{
		width:123px;
		vertical-align:top;
		padding:5px 5px 5px 0px;
	}
	
	div.grey-box table.form tbody td{
		vertical-align:top;
		padding:5px;
	}
	
		/*textarea*/
		div.grey-box table.form tbody td textarea{
			width:100%;
		}
		
		/*submit buttons*/
		div.grey-box table.form tbody td img{
			margin-right:15px;
		}
		
		/*align orange button*/
		div.grey-box table.form tbody td img.right{
			float:right;
			margin-right:0px;
		}
		
/* FLAVIA / KLIX COLOUR CHANGES
=========================================================================================== */	

/* COFFEE
=========================================================================================== */		

div.grey-box h3.coffee{
	color:#663300;
	background-image:url(../img-ec/bg_coffee.jpg);
	background-position:right;
	background-repeat:repeat-y;
}

	/*FLAVIA title headers*/
	div.grey-box table.f-coffee thead th{
		background-color:#663300;
	}
	
	/*KLIX thick border break to seperate content*/
	div.grey-box table.k-coffee tr.break td{
		border-color:#663300!important;
	}
	
	/*KLIX title headers*/	
	div.grey-box table.k-coffee thead th{
		background-color:#663300;
	}
	
	/*KLIX image text*/
	div.grey-box table.k-coffee tbody th{
		color:#663300;
	}
	
	/*KLIX main text content*/
	div.grey-box table.k-coffee tbody td{
		background-color:#ffffcc;
		border-bottom:1px solid #663300;
	}
		

/* CAPPUCCINO
=========================================================================================== */
div.grey-box h3.cappuccino{
	color:#cc6600;
	background-image:url(../img-ec/bg_cappuccino.jpg);
	background-position:right;
	background-repeat:repeat-y;
}

	/*FLAVIA title headers*/
	div.grey-box table.f-cappuccino thead th{
		background-color:#cc6600;
	}
				

/* HOT CHOCOLATE
=========================================================================================== */
div.grey-box h3.hot-chocolate{
	color:#993300;
	background-image:url(../img-ec/bg_hot_chocolate.jpg);
	background-position:right;
	background-repeat:repeat-y;
}

	/*FLAVIA title headers*/
	div.grey-box table.f-hot-chocolate thead th{
		background-color:#993300;
	}
	
	/*KLIX thick border break to seperate content*/
	div.grey-box table.k-hot-chocolate tr.break td{
		border-color:#993300!important;
	}
	
	/*KLIX title headers*/	
	div.grey-box table.k-hot-chocolate thead th{
		background-color:#993300;
	}
	
	/*KLIX image text*/
	div.grey-box table.k-hot-chocolate tbody th{
		color:#993300;
	}
	
	/*KLIX main text content*/
	div.grey-box table.k-hot-chocolate tbody td{
		background-color:#ffcc99;
		border-bottom:1px solid #993300;
	}
			

/* TEAS - essential and speciality
=========================================================================================== */
div.grey-box h3.teas{
	color:#006633;
	background-image:url(../img-ec/bg_teas.jpg);
	background-position:right;
	background-repeat:repeat-y;
}

	/*FLAVIA title headers*/
	div.grey-box table.f-teas thead th{
		background-color:#006633;
	}
	
	/*KLIX thick border break to seperate content*/
	div.grey-box table.k-teas tr.break td{
		border-color:#006633!important;
	}
	
	/*KLIX title headers*/	
	div.grey-box table.k-teas thead th{
		background-color:#006633;
	}
	
	/*KLIX image text*/
	div.grey-box table.k-teas tbody th{
		color:#006633;
	}
	
	/*KLIX main text content*/
	div.grey-box table.k-teas tbody td{
		background-color:#ccffcc;
		border-bottom:1px solid #006633;
	}
			

/* WELLBEING
=========================================================================================== */
div.grey-box h3.wellbeing{
	color:#afcb00;
	background-image:url(../img-ec/bg_wellbeing.jpg);
	background-position:right;
	background-repeat:repeat-y;
}

	/*FLAVIA title headers*/
	div.grey-box table.f-wellbeing thead th{
		background-color:#afcb00;
	}

/* SOUPS
=========================================================================================== */
div.grey-box h3.soups{
	color:#993300;
	background-image:url(../img-ec/bg_soups.jpg);

	background-position:right;
	background-repeat:repeat-y;
}

	
	/*KLIX thick border break to seperate content*/
	div.grey-box table.k-soups tr.break td{
		border-color:#cc0000!important;
	}
	
	/*KLIX title headers*/	
	div.grey-box table.k-soups thead th{
		background-color:#cc0000;
	}
	
	/*KLIX image text*/
	div.grey-box table.k-soups tbody th{
		color:#cc0000;
	}
	
	/*KLIX main text content*/
	div.grey-box table.k-soups tbody td{
		background-color:#ffcccc;
		border-bottom:1px solid #cc0000;
	}		


/* COLD DRINKS
=========================================================================================== */
div.grey-box h3.cold-drinks{
	color:#003399;
	background-image:url(../img-ec/bg_cold_drinks.jpg);
	background-position:right;
	background-repeat:repeat-y;
}

	
	/*KLIX thick border break to seperate content*/
	div.grey-box table.k-cold-drinks tr.break td{
		border-color:#003399!important;
	}
	
	/*KLIX title headers*/	
	div.grey-box table.k-cold-drinks thead th{
		background-color:#003399;
	}
	
	/*KLIX image text*/
	div.grey-box table.k-cold-drinks tbody th{
		color:#003399;
	}
	
	/*KLIX main text content*/
	div.grey-box table.k-cold-drinks tbody td{
		background-color:#99ccff;
		border-bottom:1px solid #003399;
	}	


/* CARBONATED DRINKS
=========================================================================================== */
div.grey-box h3.carbonated-drinks{
	color:#003399;
	background-image:url(../img-ec/bg_carbonated_drinks.jpg);
	background-position:right;
	background-repeat:repeat-y;
}
	
	/*KLIX thick border break to seperate content*/
	div.grey-box table.k-carbonated-drinks tr.break td{
		border-color:#003399!important;
	}
	
	/*KLIX title headers*/	
	div.grey-box table.k-carbonated-drinks thead th{
		background-color:#003399;
	}
	
	/*KLIX image text*/
	div.grey-box table.k-carbonated-drinks tbody th{
		color:#003399;
	}
	
	/*KLIX main text content*/
	div.grey-box table.k-carbonated-drinks tbody td{
		background-color:#99ccff;
		border-bottom:1px solid #003399;
	}	
		
/* ANCILLARY
=========================================================================================== */
div.grey-box h3.ancillary{
	color:#666666;
	background-image:url(../img-ec/bg_ancillary.jpg);
	background-position:right;
	background-repeat:repeat-y;
}

	/*FLAVIA title headers*/
	div.grey-box table.f-ancillary thead th{
		background-color:#666666;
	}

	/*KLIX thick border break to seperate content*/
	div.grey-box table.k-ancillary tr.break td{
		border-color:#666666!important;
	}
	
	/*KLIX title headers*/	
	div.grey-box table.k-ancillary thead th{
		background-color:#666666;
	}
	
	/*KLIX image text*/
	div.grey-box table.k-ancillary tbody th{
		color:#666666;
	}
	
	/*KLIX main text content*/
	div.grey-box table.k-ancillary tbody td{
		background-color:#cccccc;
		border-bottom:1px solid #666666;
	}
	
/* SUNDRY RE-USED ITEMS
=========================================================================================== */

/*paging for order history*/
p.paging{
	display:block;
	color:#828282;
	font-weight:bold;
	text-align:right;
	background-color:#f3f3f3;
	border:1px solid #dadada;
	margin:20px 0px;
	padding:5px 10px;
}
	p.paging a{
		color:#828282;
		text-decoration:underline;
		margin:0px 3px;
	}
	
	p.paging a:hover,
	p.paging a.on{
		color:#fd7920;
		text-decoration:none;
	}

/*required text appearing next to "Order No."*/
span.required{
	font-size:80%;
}

/*align img left*/
img.left{
	float:left;
}

/*align img right*/
img.right{
	float:right;
}

/*applied to form buttons*/
img.gap{
	/*display:inline;CC IE6*/
	margin:0px 15px;
}

.red{
	color:#cc0000;
}

.orange{
	color:#ff6600;
}

.green{
	color:#009900;
}

.light-grey{
	color:#828282;
}