/**********************************************************************************************

START EDITING HERE

**********************************************************************************************/


.RobsOverflower { /*Have no idea why this works but taking it out breaks the structure!!*/
	overflow:hidden;
}


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

body {
	font-family:Georgia, "Times New Roman", Times, serif;
	padding:0px;
	margin:0px;
}

#PageWrapper {
	padding:0;
	margin:0px;
	background-color:#fff;
}

@media only screen and (max-width: 980px) {
	.PaddingForMobiles {
		padding-left:10px;
		padding-right:10px;
	}
}


.TopMarginForContent {
	margin-top:20px;
	padding-left:10px;
	padding-right:10px;
}

@media only screen and (min-width: 768px) {
.TopMarginForContent {
	margin-top:20px;
}
}



.TheContentArea {
	background-image:url(../images/contentbg.png); background-repeat:repeat-x; min-height:600px;
}


@media only screen and (min-width: 768px) {
	.TheContentArea {
	float:left; background-image:url(../images/contentbg.png); background-repeat:repeat-x; width:80%; padding-left:10px; min-height:600px;
}
}



/****Margins****/

.standardmargin { /*add this class to any column where a margin-bottom is needed (like a column with an image taller than adjoining text) e.g. class="four columns standardmargin"*/
	margin-bottom:15px;
}

.elementmargin {
	margin-bottom:15px;
}

.NoBottomMargin {
	margin-bottom:0px;
}

/*****Fonts*****/

p, td, div {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	line-height:165%;
	color:#222222;
}


p {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#222222;
	font-size:14px;
	line-height:165%;
	margin-bottom:15px;
}

@media only screen and (min-width: 768px) {
.smaller {
	font-size:11px;
	line-height:175%;
}
}

.SmallCapsFont {
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
}


.MidBrownText {
	color:#5A4233;
}

.PicCaps {/*Apply to <p> tags for picture captions*/
	font-size:11px;
	color:#8C0000;
	margin-top:-10px;
	line-height:130%;
}


.DarkBrownText {
	color:#210501;
}

a:link { color:#0A7CBA; text-decoration:none; }
a:visited { color:#0A7CBA; text-decoration:none; }
a:hover { color:#8C0000; text-decoration:none; }
a:active { color:#8C0000; text-decoration:none; }

.white {
	color:#fff;
}

h1 {
	font-size:36px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0px;
	margin-bottom:15px;
	color:#8C0000;
	line-height:130%;
}

h1 a:link {color:#8C0000;}
h1 a:visited {color:#8C0000;}
h1 a:hover {color:#0a7cba;}
h1 a:active {color:#0a7cba;}

h2 {
	font-size:24px;
	font-weight:normal;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
	margin:0px;
	margin-bottom:15px;
	color:#5a4233;
	line-height:130%;
}

h2 a:link {color:#5a4233;}
h2 a:visited {color:#5a4233;}
h2 a:hover {color:#0a7cba;}
h2 a:active {color:#0a7cba;}

h3 {
	font-size:20px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0px;
	margin-bottom:15px;
	color:#8C0000;
	line-height:130%;
}

h3 a:link {color:#8C0000;}
h3 a:visited {color:#8C0000;}
h3 a:hover {color:#0a7cba;}
h3 a:active {color:#0a7cba;}

h3.ProductGroupHeading {
	background-color:#F8F7F1;
	border-top:1px solid #8C0000;	
	border-bottom:1px solid #8C0000;
	padding:6px 10px 6px 10px;
	margin-bottom:20px;
	margin-top:20px;
}

h4 {
	font-size:16px;
	font-weight:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0px;
	margin-bottom:15px;
	color:#8C0000;
	line-height:130%;
}

h4 a:link {color:#8C0000;}
h4 a:visited {color:#8C0000;}
h4 a:hover {color:#0a7cba;}
h4 a:active {color:#0a7cba;}

h5 {
	font-size:14px;
	font-weight:normal;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
	margin:0;
	color:#0A7CBA;
	line-height:130%;
	background-color:#EDECDB;
	padding:6px;
	cursor:pointer;
}

h5 a:link {color:#0A7CBA;}
h5 a:visited {color:#0A7CBA;}
h5 a:hover {color:#8C0000;}
h5 a:active {color:#8C0000;}


ul, li, ul li ul {
	margin:0px; padding:0px; text-indent:0px;
}

.TheContentArea  ul {
	list-style-image:url(../images/bullet.png);
	list-style-position:inside;
	font-size:14px;
	margin-bottom:15px;
}

.TheContentArea li { font-size:14px;}



/*other bits*/




/******************Form styles**********************/
form {font-family:Georgia, "Times New Roman", Times, serif; margin:0px;}

label { font-family:Georgia, "Times New Roman", Times, serif; font-size: 13px; cursor: pointer; display: block; margin-top:0px; margin-bottom: 3px; }

/*input*/
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea

{border:1px solid #0A7CBA; background-color:#FFF; color:#000; font-size:13px; }

@media only screen and (min-width: 768px) {
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea

{padding: 3px; height: 25px; }
}

/*focus*/
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus { 

background: #DFE1EC; outline: none !important; border:1px solid #0A7CBA; }

textarea {
	resize:vertical;
	min-height:100px;
}



/*button*/
.button  { color: white; background-color: #0a7cba; font-family: 'CompatilFactLTW01-BoldS', sans-serif; border:none; font-weight:normal; }
.button:hover { color: white; background-color: #0a7cba; font-family: 'CompatilFactLTW01-BoldS', sans-serif; border:none; font-weight:normal; }
.button:active { color: white; background-color: #096A9F; font-family: 'CompatilFactLTW01-BoldS', sans-serif; border:none; font-weight:normal; }
.button:focus { color: white; background-color: #096A9F; font-family: 'CompatilFactLTW01-BoldS', sans-serif; border:none; font-weight:normal; }

.button.small { font-size: 13px; padding: 6px 14px 7px; }


/*Checkbox*/
input[type='checkbox'] {margin-right:5px;}


hr {
    border: 0;
    height: 1px;
    background: #999;
	margin:15px 0px 15px 0px;
}

.CentreAll {
	text-align:center;}
	

@media only screen and (min-width: 768px) {	
	
.NextButton {
	vertical-align:middle;
	float:right;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
}

.NextButton img {
	vertical-align:middle;
}	

}

.GoToCheckout {
	font-size:28px;
	margin-top:15px;
	text-align:center;
	padding:5px;
	border:1px solid #0A7CBA;
}

@media only screen and (min-width: 768px) {	
.GoToCheckout {
	font-size:14px;
	margin-top:0px;
	padding:0px;
	border:none;
}
}


/*Tooltip*/

.helptip {
	margin-left:7px;
	cursor:pointer;
	vertical-align:middle;
	margin-top:-4px;
	float:right;
}

.closeTT {
	float:right; margin:0 0 5px 5px;
	cursor:pointer;

}

#tooltip {
	background-color:#FFF; color:#000; position:absolute; z-index:9999999; display:none; padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; max-width:250px;
	border:2px groove #888;
}

.smallhintformobile {
	font-size:11px;
}


/*Price and add to basket row*/
.PriceAddBasketRow {
	background-color:overflow:hidden; padding:5px 0px 5px 0px; margin-bottom:15px;
}

@media only screen and (min-width: 768px) {	
.PriceAddBasketRow {
	background-color:#EDECDB; overflow:hidden; padding:10px 5px 5px 5px; margin-bottom:15px;
}
}




/****Desktop header****/
.DeskTopHeaderContainer {
	background-color:#5a4233; background-image:url(../images/menu_bg_centre.png); background-repeat:repeat-x; height:151px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) { /*Provices a bit of padding when no background at edges*/
	.DeskTopHeaderContainer {
	background-color:#5a4233; background-image:url(../images/menu_bg_centre.png); background-repeat:repeat-x; height:151px;
	padding-right:10px; padding-left:10px;
}
}


/*Header info bubbles*/

#BasketBubble {
	height:115px;
	width:271px;
	padding:12px 15px 55px 15px;
	background-image:url(../images/basketbubble.png);
	background-repeat:no-repeat;
	position:absolute;
	right:25px;
	top:42px;
	z-index:2000;
	color:#5A4233;
	
}

#Ingredients p {
	font-size:11px;
}

/*View basket display*/

.producthead {
	background-color:#8C0000;
	padding:4px;
	color:#fff;
	font-weight:bold;
	overflow:hidden;
	border-top:1px solid #666;
}

.productrow {
	overflow:hidden;
	padding:4px;
	border-bottom:1px solid #666;
	border-left:1px solid #666;
	border-right:1px solid #666;
}

.product-vb-quan {
	width:15%;
	float:left;
}

.product-vb-info {
	width:55%;
	float:left;
}

.product-vb-price {
	width:15%;
	float:left;
	text-align:right;
}

.product-vb-remove {
	width:15%;
	float:left;
	text-align:right;
}


/*Checkout options page*/
.CheckoutOptionBox {
	border:1px solid #999;
	padding:10px;
	background-image:url(../images/checkoutoptionbox.gif);
	background-repeat:repeat-x;
	position:relative;
	overflow:hidden;
	margin-bottom:20px;
	background-color:#fff;
}



@media only screen and (min-width: 768px) {
	.CheckoutOptionBox {
		min-height:270px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 877px) {
	.CheckoutOptionBox {
		min-height:350px;
	}
}	
	
	

.WhiteOptionHeader {
	color:#fff;
	margin-bottom:15px;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
}

.PositionButton {
	position:absolute;
	bottom:10px;
	right:10px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
.CheckoutOptionBox {
	border:1px solid #999;
	padding:10px;
	background-image:none;
	background-repeat:repeat-x;
	position:relative;
	overflow:hidden;
	margin-bottom:20px;
	background-color:#fff;
}	

.WhiteOptionHeader {
	color:#8C0000;
	margin-bottom:15px;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
}
}


/*Desktop Top menu*/
#dtmenu {
	background-color:#fff;
	height:32px;
	padding-top:0px;
	background-image:url(../images/menu_bg_menu.png);
	background-position:13px 0px;
	background-repeat:repeat-x;
	margin-bottom:0;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
	#dtmenu {
		padding-left:15px;
	}
}

#dtmenu li, #dtmenu li a {
	border:none;
	height:32px;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
	line-height:32px;
	-webkit-box-shadow:none;
	moz-box-shadow:none;
	box-shadow:none;
}

.AccountButtons {
	background-color:#210501;
	display:block;
}

.accounticon {
	background-image:url(../images/buttonicon-myaccount.png);
	background-repeat:no-repeat;
	background-position:23px center;
}


.basketicon {
	background-image:url(../images/buttonicon-basket.png);
	background-repeat:no-repeat;
	background-position:13px center;
}

#dtmenu>li>a:first-child {
	font-size:15px;
	padding:0px 25px 0px 0px;
}

#dtmenu>li>a.AccountButtons:first-child {
	font-size:15px;
	padding:0px 7px 0px 39px;
}

#dtmenu>li>a.noicon:first-child {
	font-size:15px;
	padding:0px 13px 0px 7px;
	background-image:url(../images/accountbutton-seperator.gif);
	background-position:left center;
	background-repeat:no-repeat;
}


#dtmenu>li.submenu>a:first-child:after {
	display:none;
}

#dtmenu>li.submenu>a:first-child {
	padding-right:25px;
}

#dtmenu>li.submenu>a {
	position:relative;
}

#dtmenu>li.submenu>a span {
	position:absolute;
	font-size:12px;
	top:-1px;
	right:25px;
}

#dtmenu>li:last-child {
	border:none;
	-webkit-box-shadow:none;
	moz-box-shadow:none;
	box-shadow:none;	
}

/*#dtmenu>li.submenu>a.flyout-toggle {
	padding:0;
	border:none;
}*/

#dtmenu a:link {text-decoration:none; color:#000; border-bottom:none;}
#dtmenu a:visited {text-decoration:none; color:#000; border-bottom:none; }
#dtmenu a:hover {text-decoration:none; color:#8C0000; border-bottom:none; }
#dtmenu a:active {text-decoration:none; color:#8C0000; border-bottom:none; }

#dtmenu a.AccountButtons:link {text-decoration:none; color:#FFF; border-bottom:none; padding-left:10px;}
#dtmenu a.AccountButtons:visited {text-decoration:none; color:#FFF; border-bottom:none; padding-left:10px; }
#dtmenu a.AccountButtons:hover {text-decoration:none; color:#DDD; border-bottom:none; padding-left:10px; }
#dtmenu a.AccountButtons:active {text-decoration:none; color:#DDD; border-bottom:none; padding-left:10px; }

.SubMenuWrap {
	top: 28px;
	border:none;
	left:0;
	-webkit-box-shadow:  0px 2px 10px 0px #999;
	box-shadow:  0px 2px 10px 0px #999;
	
}


ul.SubMenuWrap li a, #dtmenu li ul li a {
	border:none;
	background-color:#EDECDB;
	-webkit-box-shadow:none;
	moz-box-shadow:none;
	box-shadow:none;
	font-size:15px;
	padding:0px 10px;
	line-height:31px;
}

ul.SubMenuWrap li a:link, #dtmenu li ul li a:link {color:#000; border-bottom:1px solid #ddd; background-image:none; display:block; background-color:#EDECDB;}
ul.SubMenuWrap li a:visited, #dtmenu li ul li a:visited {color:#000; border-bottom:1px solid #ddd; background-image:none; display:block; background-color:#EDECDB;}
.gears-no-touch ul.SubMenuWrap li a:hover, .gears-no-touch #dtmenu li ul li a:hover {color:#8C0000; border-bottom:1px solid #ddd; background-image:none; display:block; background-color:#EDECDB;}
ul.SubMenuWrap li a:active, #dtmenu li ul li a:active {color:#8C0000; border-bottom:1px solid #ddd; background-image:none; display:block; background-color:#EDECDB;}


ul.SubMenuWrap li, #dtmenu li ul li {
	border-left:none;
	list-style-image:none;
	list-style-type:none;
	list-style-position:outside;
}

#dtmenu > li:hover { background:none;}

/*EXTRA Styles for menu since we stopped using Foundation menu*/
#dtmenu li {
	display:block;
	float:left;
	clear:none;
	position:relative;
}
#dtmenu li.submenu ul.SubMenuWrap {
	display:none;
	width:225px;
	position:absolute;
	top:32px;
	left:0;
	z-index:9999999999999999999999999999;
	padding:0;
}

#dtmenu li.submenu ul.SubMenuWrap li {
	float:left;
	clear:both;
	width:225px;
}

#dtmenu li.submenu ul.SubMenuWrap li a {
	text-align:left;
}

/*End EXTRA Styles for menu since we stopped using Foundation menu*/

#MenuExtend {
	width:100%;
	position:absolute;
	left:0;
	height:183px; /*menu height + header height*/
	background-image:url(../images/menu_bg.png);
	background-position:bottom left;
	background-color:#5a4233;
	background-repeat:repeat-x;
	}

/*so menu doesn't break onto two lines in smaller desktop browser*/
@media only screen and (min-width: 960px) and (max-width: 1080px) {
#dtmenu>li>a:first-child {
	font-size:15px;	
	padding-right:30px;
}
ul.SubMenuWrap li a, #dtmenu li ul li a {
	font-size:12px;
}
#dtmenu>li.submenu>a span {
	top:0;
}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	
.accounticon {
	background-image:none;
}


.basketicon {
	background-image:none;
}	

#dtmenu>li>a.AccountButtons:first-child {
	font-size:15px;
	padding:0px 20px 0px 7px;
}
	
#dtmenu>li>a:first-child, #dtmenu>li>a.AccountButtons:first-child, #dtmenu>li>a.noicon:first-child {
	font-size:11px;	
	padding-right:20px;
}
ul.SubMenuWrap li a, #dtmenu li ul li a {
	font-size:11px;
}
#dtmenu>li.submenu>a span {
	top:0;
}

#dtmenu>li.submenu>a:first-child {
	padding-right:20px;
}

}

/*END Desktop Top menu*/


/*Top buttons in mobile menu*/
.mobileMenuButton {
	float:left;
	width:33%;
	font-size:17px;
	height:40px;
	padding-left:2px;
	line-height:40px;
	color:#fff;
	cursor:pointer;
	border:1px solid #210501;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
	background-image:url(../images/light-mobbutton.png);
	background-position:right center;
	background-color:#333;
}

.DarkButton {
	background-image:url(../images/dark-mobbutton.png);
}

@media only screen and (max-width: 359px) {
/* This turns off the three menu lines if the screen goes below 360 pixels as teh word Site Menu clsahes with them on smaller screens. */	
.mobileMenuButton {
	background-image:none;
}
.DarkButton {
	background-image:none;
}
}

.mobileMenuProductListing {
	float:left;
	width:100%;
	font-size:17px;
	height:40px;
	padding-left:2px;
	line-height:40px;
	color:#fff;
	cursor:pointer;
	border:1px solid #210501;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
	background-image:none;
	background-color:#5a4233;
}


/*Mobile menu 1*/
#accordian1 {margin:0px; list-style-image:none;}

#accordion1 li a {display:block; width:100%; background-color:#EDECDB; color:#210501; margin:0px; font-size:18px; padding:2px 5px 5px 5px; }

#accordion1 li ul li a {display:block; width:100%; background-color:#FFF; color:#024079; margin:0px; font-size:18px; padding:2px 5px 5px 5px; border-bottom:1px solid #024079; }

/*Mobile menu 2*/
#accordian2 {margin:0px; list-style-image:none;}

#accordion2 li a {display:block; width:100%; background-color:#EDECDB; color:#210501; margin:0px; font-size:18px; padding:2px 5px 5px 5px; }

#accordion2 li ul li a {display:block; width:100%; background-color:#5a4233; color:#FFF; margin:0px; font-size:18px; padding:2px 5px 5px 5px; border-bottom:none; }

/*Mobile menu 3*/
#accordian3 {margin:0px; list-style-image:none;}

#accordion3 li a {display:block; width:100%; background-color:#210501; color:#FFF; margin:0px; font-size:18px; padding:5px 2px 5px 5px; border-bottom:1px solid #EDECDB; }

#accordion3 li ul li a {display:block; width:100%; background-color:#FFF; color:#024079; margin:0px; font-size:18px; padding:2px 5px 5px 5px; border-bottom:1px solid #EDECDB; }

/*Mobile menu product_listing.cfm*/
#accordianProductListing {margin:0px; list-style-image:none;}

#accordionProductListing li a {display:block; width:100%; background-color:#EDECDB; color:#210501; margin:0px; font-size:18px; padding:2px 5px 5px 5px; }

#accordionProductListing li ul li a {display:block; width:100%; background-color:#FFF; color:#024079; margin:0px; font-size:18px; padding:2px 5px 5px 5px; border-bottom:1px solid #024079; }






/*********Images*********/

.FlexibleImage { /*For placing inside a flexible sized div*/
	max-width:100%;
}

.NonFlexibleImage {
	margin-right:15px;
	margin-left:15px;
	margint-bottom:15px;
}

.imgright {
	float:right;
	margin-right:0px;
}

.imgleft {
	float:left;
	margin-left:0px;
}

.imgclear {
	clear:both;
}

.imggreyborer {
	border:1px solid #666;
}

.BorderBlack {
	border:1px solid #000;
}


/*Panels (to replace right hand columns)*/

.panel { background: #EDECDA; border: solid 8px #220601; margin: 0 0 22px 0; padding: 10px;} 

.panel h3 {font-size:24px;}

/**************Background for some panels**********/

.BeigeWhiteBackground {
	background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#EDECDB));
background: -webkit-linear-gradient(#ffffff, #EDECDB);
background: -moz-linear-gradient(#ffffff, #EDECDB);
background: -ms-linear-gradient(#ffffff, #EDECDB);
background: -o-linear-gradient(#ffffff, #EDECDB);
background: linear-gradient(#ffffff, #EDECDB);
-pie-background: linear-gradient(#ffffff, #EDECDB);

behavior: url(CSS3PIE/PIE.htc); 
position:relative;

}


/*****Lightbox*****(added to overwrite Foundation's Lighbox setting which doesn't have a high enough z-index*/

/*Modals*/
.imageModal {
	text-align:center;
}

.reveal-modal {
z-index:100000;
}

.reveal-modal-bg {
	z-index:99999;
}

/*Rotator*/

.InsideRotator {
overflow:hidden;
position:relative;
}


/*Footer*/

#Footer {
	padding-top:0px; background-image:url(../images/footer_shadow.png); background-position:top left; background-repeat:repeat-x; line-height:150%; margin-top:30px; padding-bottom:20px; color:#FFF;
}

@media only screen and (min-width: 768px) {
#Footer {
	padding-top:25px;
}
}

#Footer .columns {
	margin:0px;
	padding:0px;
	margin-bottom:10px;
	font-size:13px;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
	color:#FFF;
}

@media only screen and (min-width: 768px) {
#Footer .columns {
	margin-bottom:10px;
	font-size:13px;
	font-family: 'CompatilFactLTW01-BoldS', sans-serif;
	color:#FFF;
	
}
}

@media only screen and (min-width: 768px) {
.footertextalign {
	text-align:right;
}
}

#Footer .columns a:link {color:#FFF; font-family: 'CompatilFactLTW01-BoldS', sans-serif;}
#Footer .columns a:visited {color:#FFF; font-family: 'CompatilFactLTW01-BoldS', sans-serif;}
#Footer .columns a:hover {color:#FFF; font-family: 'CompatilFactLTW01-BoldS', sans-serif; text-decoration:underline;}
#Footer .columns a:active {color:#FFF; font-family: 'CompatilFactLTW01-BoldS', sans-serif; text-decoration:underline;}

#FooterExtend {
	background-image:url(../images/footer_shadow.png); background-position:top left; background-repeat:repeat-x; width:100%; position:absolute; bottom:0; left:0; z-index:-9999;
}

/*END footer*/