/* CSS Document */

/* Global Defaults/Resets
----------------------------------------------- */
html,body,div,img,h1,h2,h3,h4,h5,h6,ul,p,blockquote,form,fieldset,table,th,td,fieldset,legend {margin:0;padding:0;border:0;}
html {overflow-y:scroll; height: 100%;}
body {font-size:87.5%;}
table{border-collapse:collapse;}
td {vertical-align: top; padding: 3px 0;}
a {outline:none; border-style: none; -moz-outline-style: none;}
p,ul,ol {margin-bottom:15px;}
ul ol, ul ul, ol ul, ol ol {margin-top:10px;}
li {margin-left:20px;}

/* site defaults */
body { width: 100%; height: 100%; padding: 0; margin: 0; background: #6D6E65; }
input,textarea,select{ font-family: Arial, san-serif; }
a { color: #F4AA00; text-decoration: none; }
a:active, a:hover, a:focus 	{ color: #F4AA00; text-decoration: underline; }
a img { border: 0;}
hr { clear: both; margin: 15px 0; height: 1px; border: 0; color: #B4B4B3; background: #B4B4B3; }
hr.orange { color: #F4AA00; background: #F4AA00; }

/* forms */
input[type=submit] { color: white; background-color: #F8B236; border: 1px solid #CC9449; }

/* edit.com visible styles */
body, td, .NormalText, p { font-weight: normal; text-decoration: none; font-style: normal; color: #6D6E65; font-size: 12px; font-family:  "Century Gothic",CenturyGothic,Helvetica,sans-serif; }

.OrangeHeader	{ color: #F4AA00; font-size: 18px; text-transform: uppercase; line-height: 18px; }
.OliveHeader	{ color: #999936; font-size: 18px; text-transform: uppercase; line-height: 18px; }
.WhiteHeader	{ color: #FFFFFF; font-size: 16px; font-weight: bold; text-transform: uppercase; line-height: 18px; }
.BlackHeader	{ color: #000000; font-size: 16px; font-weight: bold; text-transform: uppercase; line-height: 18px; }
.OliveSubHeader { color:#999936; font-size: 14px; margin-top: 0; }
.GrayHeader		{ color: #8D8A68; font-size: 18px; text-transform: uppercase; line-height: 18px; }
.Strike			{ text-decoration: line-through; }
.Caps			{ text-transform: uppercase; }
.CapsOff		{ text-transform: none; }

.Red		{ color: #AF4926; }
.Maroon		{ color: #B64A09; }
.Orange		{ color: #F4AA00; }
.Beige		{ color: #E7E2AA; }
.Green		{ color: #8B8E4B; }
.Olive		{ color: #999936; }
.Purple		{ color: #4E064C; }
.Black		{ color: #000000; }
.White		{ color: #FFFFFF; }
.LightGray	{ color: #B4B4B3; }
.Gray		{ color: #8D8A68; }
.DarkGray	{ color: #6D6E65; }

.SmallText	{ font-size: 10px; }
.MediumText	{ font-size: 16px; line-height: 1em; }
.LargeText	{ font-size: 24px; line-height: 1em; }
.ExtraLargeText	{ font-size: 44px; line-height: 1em; }

IMG.FloatLeft 	{ float: left; margin: 0 5px 35px 0; }
IMG.FloatRight 	{ float: right; margin: 0 0 5px 5px; }
IMG.BeigeBorder { border: 1px solid #E7E2AA; }
IMG.OrangeBorder{ border: 1px solid #F4AA00; }
IMG.OliveBorder { border: 1px solid #999936; }
IMG.BlackBorder { border: 1px solid #000000; }
IMG.WhiteBorder { border: 1px solid #FFFFFF; }
IMG.CatHeaderImage { border: 0; width: 729px; height: 256px; }

TD.BeigeBG	{ background: #E7E2AA; }
TD.OrangeBG	{ background: #F4AA00; color: #FFF; }
TD.OliveBG	{ background: #999936; }

a.BlackLink			{ color: #000000; text-decoration: underline; }
a.BlackLink:link,
a.BlackLink:visited	{ color: #000000; text-decoration: underline; }
a.BlackLink:active,
a.BlackLink:hover	{ color: #F4AA00; text-decoration: underline; }

a.OliveLink			{ color: #999936; text-decoration: underline; }
a.OliveLink:link,
a.OliveLink:visited	{ color: #999936; text-decoration: underline; }
a.OliveLink:active,
a.OliveLink:hover	{ color: #000000; text-decoration: underline; }

/* site structure */
div#container { width: 875px; background: #FFF; text-align: center; margin: 0 auto; padding: 25px; }
div#header { width: 100%; margin: 0; text-align: left; position: relative; }
	div#header img.logo { float: left; }
	div#topNav { border: 1px solid #B4B4B3; height: 22px; border-width: 1px 0; }
		ul.nav { float: left; display: block; margin: 0; padding: 0; list-style-type: none; }
		ul.nav li { display: block; margin: 0; padding: 0; list-style-type: none; float: left; position: relative; z-index: 99; }
		ul.nav li a { display: block; float: left; padding: 0 11px; font-size: 11px; font-weight: bold; line-height: 22px; text-decoration: none; text-transform: uppercase; }
		ul.nav li a.first { padding-left: 0; }
		ul.nav li a.last { padding-right: 0; }
		ul.nav li a:link,
		ul.nav li a:visited { color: #6D6E65; }
		ul.nav li a:active,
		ul.nav li a:hover	{ color: #F4AA00; }
	
	div#topPhone { position: absolute; z-index: 2; top: 0; right: 0; font-weight: bold; }
	div#accountLogin { position: absolute; z-index: 2; top: -18px; right: 0; padding: 0; color: #8D8A68; text-align: right; }
	div#accountLinks { float: right; margin-top: 21px; }
		div#accountLinks ul.nav li a { display: block; float: left; padding: 0 0 0 7px; font-size: 11px; font-weight: normal; line-height: 11px; text-decoration: none; text-transform: none; }
		div#accountLinks ul.nav li a.first { padding-right: 7px; }
		div#accountLinks ul.nav li a.last { border-left: 1px solid #6D6E65; }
	
div#content	{ min-height: 500px; padding: 10px 0 25px; margin: 0; }

	div#rightContent { float: right; width: 135px; text-align: left; }
		div#rightContent ul	   { margin: 2px 0 20px; padding: 0; list-style-type: none; }
		div#rightContent ul li { margin: 0; padding: 1px 0; list-style-type: none; border-bottom: 1px solid #F0F0F0; text-align: left; }
		div#rightContent ul li a { color: #A9A9A8; font-size: 11px; }
		div#rightContent ul li a:hover,
		div#rightContent ul li a.current { color: #F4AA00; text-decoration: none; }
		
		div.MenuHeader	{ border: 0; margin: 0; padding: 0; font-size: 12px; font-weight: bold; text-transform: uppercase; }
		
	div#mainContent	{ float: left; width: 730px; margin: 0; padding: 0; text-align: left; }

div#footer { clear: both; color: #A9A9A8; text-align: center; padding-top: 10px;  border-top: 1px solid #B4B4B3; }
	div#footer a:link,
	div#footer a:visited { color: #A9A9A8; text-decoration: none; }
	div#footer a:active,
	div#footer a:hover,
	div#footer a.current { color: #F4AA00; text-decoration: none; }

.hide { display: none; }
.clear { clear: both; height: 0; }
	
/* category */
table.category { width: 100%; margin: 20px 0; }
table.byprice  { width: 650px; margin: 20px 0; }

a.arrowButton { float: right; display: block; width: 41px; height: 113px; margin-top: 20px; }

div.CatHeader,
div.CatHeaderOrange,
div.CatHeaderYellow,
div.CatHeaderGreen,
div.CatHeaderPurple,
div.CatHeaderRed { color: #FFF; background: #F4AA00; font-size: 18px; font-weight: bold; line-height: 1em; margin: 0; padding: 5px 20px; text-transform: uppercase; }
div.CatHeaderYellow,
div.CatHeaderOrange	{ background: #F4AA00; }
div.CatHeaderGreen	{ background: #8B8E4B; }
div.CatHeaderRed	{ background: #B64A09; }
div.CatHeaderPurple { background: #4E064C; }

div.Scroller { width: 730px; }
	div.Scroller ul { width: 730px; list-style-type: none; margin: 0; padding: 0; }
	div.Scroller ul li { float: left; height: auto; width: 146px; margin: 0 0 10px; padding: 0; display: inline; text-align: left; }
		div.Scroller.byPrice ul li { width: 137px; }
	div.Scroller img { border: 0; margin: 0 0 5px 0; max-width: 137px; max-height: 118px; }
	
	.catThumbanil { height: 118px; }
	.catTitle { height: 3em; overflow: hidden; margin-top: 5px; }
		.catTitle a { color: #6D6E65; text-decoration: none; }
		.catTitle a:hover { color: #000; text-decoration: none; }
	.catVolume { height: 2em; }
	.catPrice { height: 2em; }
	.catAddToCart { height: 20px; display: none; }
	.catThumbanil,
	.catTitle,
	.catVolume,
	.catPrice { margin-bottom: 0; }

/* detail */
div.detailImage { float: left; width: 200px; text-align: center; }
	div.detailImage img { max-width: 200px; float: right; }

div.detailText  { float: right; width: 520px; margin-left: 10px; }
	div.detailTitle { color: #000; font-size: 18px; font-weight: bold; text-transform: uppercase; }
	div.detailOrigin { text-transform: uppercase; }
	div.detailDescription { margin-top: 10px; }
	div.detailVolume { font-weight: normal; text-transform: uppercase; }
	div.detailPrice { font-weight: bold; margin-top: 10px; }
	div.detaiItemCode { font-size: 10px; margin: 10px 0; }
	form.basket { margin: 20px 0; }
		form.basket td { vertical-align: middle; padding: 0 10px 0 0; }
		input.qtyInput { width: 20px; height: 13px; padding: 5px; margin-left: 5px; border: 1px solid #C2BCB6; }
		input.submit.addToBasket { width: 123px; height: 25px; margin: 0; background: url('../images/add-to-basket.jpg') 0% 0% no-repeat; border: 0; padding: 0; margin: 0; }
	
	td.recipesBox,	
	td.relatedBox { width: 50%; padding: 10px; border: 1px solid #E6E6E7; }
		table.related { width: 100%; }
		table.related td { width: 33%; text-align: left; padding: 5px; color: #6D6E65; }
		
		td.recipesBox a,	
		td.relatedBox a { color: #6D6E65; text-decoration: none; }
		td.recipesBox a:hover,	
		td.relatedBox a:hover { color: #000; text-decoration: none; }
		
		img.recipeThumbnail { width: 100px; height: 100px; border: 0; margin-bottom: 5px; }
	
/* recipes */	
table.recipes	 { width: 619px; }
table.recipes td { text-align: left; padding: 15px; vertical-align: top; font-size: 11px; }
table.recipes img { border: 0; height: 150px; width: 150px; margin: 0 0 5px 0; }

	table.recipes a:link,
	table.recipes a:visited { color: #6D6E65; text-decoration: none; }
	table.recipes a:active,
	table.recipes a:hover	{ color: #000000; text-decoration: none; }

/* recipes detail */
.recipe-image { float: right; border: 1px solid #999936; margin-left: 5px; }

/* my account */
div#accountLeft { float: left; text-align: right; width: 150px; }
div#accountRight { float: right; width: 575px; padding-top: 50px; text-align: left; }

table.login 	{ width: 100%; margin: 0; }
table.login td 	{ padding: 5px; }
table.login td.label { text-align: right; text-transform: uppercase; padding-top: 10px; padding-left: 50px; }
table.login td.register { vertical-align: bottom; padding-bottom: 20px; }

input#loginEmail,
input#loginPassword { border: 1px solid #AFB0B3; width: 250px; }

a#forgotpasslink { display: block; margin-top: 5px; text-decoration: none; color: #000; }
a#forgotpasslink:hover { color: #000; text-decoration: underline; }

form.login input 		{ width: 175px; height: 20px; border: 1px solid #8D8A68; }
form.login input.submit { height: 23px; width: 160px; border: 0; margin: 0 0 5px 0; }

table.AccountCart { margin-bottom: 20px; }
table.AccountCart td { padding: 5px; }