/* 
Project:		Metrow Foods - E-commerce
Author:			SHC
Created:		12/12/2009
Last Updated:	12/07/2010
*/

/* ---- RESET HTML --------------------------------------- */

/* 
This is a bare bones reset using the most commonly used elements.  
*/

html, body, div, h1, h2, h3, p, ul, ol, li, form, fieldset, input, textarea {margin: 0; padding: 0; font-size: 100%;}   
ul {list-style: none;}   
img, fieldset {border: 0;}   
h1, h2, h3, p {font-weight: normal;}   
em {font-style: italic;}   
strong {font-weight: bold;}

/* ---- GENERAL ------------------------------------------ */

body {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 11px;
	color: #000;
	margin: 0px;
	background-color: #fff;
}

h1 {
	font-size: 18px;
	margin-bottom: 10px;
}

h2 {	
	font-size: 14px;
	font-weight: bold;
	color: #4682b4;
	margin-top: 12px;
}

h3 {	
	font-size: 18px;
}

p {	
	font-size: 12px;
	line-height: 16px;
	margin-bottom: 10px;
}

/* ---- STRUCTURE --------------------------------------- */

#container {
	width: 900px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

#content {
	width: 900px;
	min-height: 500px;
	overflow: hidden;
	background: #fff url('styleImage.aspx?styleid=72&filename=content-bk.jpg') top left repeat-y;
}

#left-content {
	float: left;
	width: 210px;
	padding-left: 20px;
}

#right-content {
	float: left;
	width: 630px;
	padding: 0px 20px;
}

/* ---- HEADER ------------------------------------------ */


#header {
	background: url('styleImage.aspx?styleid=72&filename=banner.jpg');
	background-repeat: no-repeat;
	width: 900px;
	height: 140px;
	position: relative;
	text-align: left;
}

#logo {
	position: absolute;
	top: 20px;
	left: 0px;
	width: 175px;
	height: 120px;
}

#logo a {
	width: 175px;
	height:120px;
}

#header-links {
	width: 860px;
	text-align: center;
	color: #000;
	position: absolute;
	top: 40px;
}

#header-links a {
	color: #000;
	font-weight: normal;
	text-decoration: underline;
}

#header-links a:hover {
	text-decoration: none;
}


#search {
	width: 860px;
	height: 30px;
	text-align: center;
	position: absolute;
	top: 50px;
}

.searchSelect , .searchTextBox {
	margin-right: 5px;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
}

.searchImage {
	width : 60px;
	height: 30px;
	background-image: url('styleImage.aspx?styleid=72&filename=search.gif');
	position: relative;
	top: 10px;
}

#basket {
	float: right;
	width: 190px;
	position: absolute;
	right: 15px;
	top: 70px;
	color: #666;
}

.CRMMiniBasketValue {
	font-weight: bold;
	color: #f03;
}

.CRMMiniBasket input {
	position: absolute;
	top: 37px;
	right: 0px;
	width: 85px;
}

#CRMMiniBasketBubble { background-color: #fffff0; border: 3px double #999; padding: 10px 20px; position: absolute; top: 82px; right: 30px;}
.bubbleCloseTop { display: none; }
.bubbleText { padding: 5px 0px; color: #999; }
.bubbleControls {}
.bubbleCheckout a { font-weight: bold; padding-right: 10px; color: #369; }
.bubbleClose a { font-weight: bold; color: #369; }

#tagline {
	font-family: "Times New Roman", Times, serif;
	font-size: 36px;
	color: #000;
	font-style: italic;
	position: absolute;
	left: 180px;
	top: 90px;
}

/* ---- MENU ------------------------------------------ */

#menu-container {
	width: 900px;
	height: 30px;
	background: #999;
}

#menu {
	float: left;
	list-style: none;
	margin: 0px;
	padding-left: 25px;
	height: 30px;
}
#menu li {
	float: left;
	font-weight: bold;
	text-align: center;
	margin: 0px 3px 0px 0px;
}

#menu a {
	background-color: #333;
	color: #fff;
	display: block;
	float: left;
	margin: 0;
	line-height: 30px;
	width: 95px;
	text-decoration: none;
}

#menu li.link_selected a {
	background-color: #476bb2;
}

#menu li.link_selected_par a {
	background-color: #476bb2;
}

#menu a:hover {
	background-color: #5c8ae6;
}
 
/* ---- HOMEPAGE --------------------------------------- */

#content-home {
	width: 900px;
	height: 615px;
}

#left-content-home {
	float: left;
	width: 230px;
	height: 615px;
	background-color: #fff;
}

#advert {
	width: 193px;
	height: 223px;
	border: 1px solid #000;
	margin-top: 30px;
	margin-left: 20px;
}

#right-content-home {
	float: left;
	width: 670px;
	height: 615px;
	background-color: #fff;
}

#title-special {
	font-family: "Times New Roman", Times, serif;
	font-size: 36px;
	color: #000;
	font-style: italic;
	margin-left: 20px;
	margin-top: 20px;
}

#title-recipe {
	clear: right;
	font-family: "Times New Roman", Times, serif;
	font-size: 36px;
	color: #000;
	font-style: italic;
	margin-left: 20px;
}

#grey-box {
	clear: right;
	float: right;
	width: 650px;
	height: 185px;
	background-color: #f0f0f0;
	margin-top: 20px;
	margin-bottom: 20px;
}

#grey-box .CRMCategoryThumbList {
	margin-left: 40px;
	margin-top: 5px;
	font-weight: bold;
}

#grey-box .tab_recipes {
	margin-left: 40px;
	margin-top: 14px;
	font-weight: bold;
}

#grey-box .tab_recipes td {
	text-align: center;
}

table.boxed {
	width: 460px;
	border-collapse: separate;
	position: relative;
	left: 50px;
	top: 25px;
}

td.boxed {
	width: 100px;
	height: 100px;
	margin-right: 20px;
}

td.boxed img {
	border: 2px solid #000;
}

td.link {
	width: 100px;
	height: 30px;
	border: 0;
	text-align: center;
	margin-right: 20px;
	color: #000;
}

td.link a {
	color: #000;
	font-weight: bold;
	text-decoration: underline;
}

td.link a:hover {
	text-decoration: none;
}


/* ---- LH CATEGORY LIST ------------------------------------------ */

#product-list {
	color: #000;
	margin-top: 43px;
}

.CRMCategoryList ul {
	line-height: 1.5em;
	margin: 10px 0px 20px 0px;
}

.CRMCategoryList li {
	list-style-type: none;
	font-weight: bold;
	margin-left: 5px;
}

.CRMCategoryList ul  ul {
	line-height: 1.5em;
	margin: 0px;
	list-style-position: inside;
}

.CRMCategoryList li li {
	list-style-type: disc;
	font-weight: normal;
}

.CRMCategoryList ul  ul ul {
	line-height: 1.5em;
	margin: 0px;
	list-style-position: inside;
}

.CRMCategoryList li li li {
	list-style-type: circle;
	font-weight: normal;
}

.CRMCategoryList ul  ul ul  ul{
	line-height: 1.5em;
	margin: 0px;
	list-style-position: inside;
}

.CRMCategoryList li li li li{
	list-style-type: square;
	font-weight: normal;
}

a.CRMCategoryList {
	text-decoration: none;
	color: #000;
}
	
.CRMCategoryList a {
	text-decoration: underline;
	color: #000;
}

.CRMCategoryList a:hover {
	text-decoration: none;
	color: #000;
}

a.CRMCategorySelected  {
	text-decoration: none;
	font-weight: bold;
	color: #f66;
}

/* ---- CONTENT RH ------------------------------------------ */

#breadcrumbs {
	font-weight: bold;
	color: #000;
	margin: 20px 0px 10px 0px;
}

.CRMCategoryThumbList {
	margin-left: 0px;
	margin-top: 0px;
}

.CRMCategoryThumbList a {
	float: left;
	margin-right: 10px;
}

.CRMCategoryThumbList ul {
	margin: 0;
}

.CRMCategoryThumbList li {
	list-style:none;
   	list-style-position:inside;
    margin-bottom: 20px;
    float:left;
    width: 170px;
    height: 140px;
    padding: 5px;
    text-align: center;
}

.CRMCategoryThumbList img {
	width: 160px;
	height: 120px;
	border: 1px solid #000;
	text-decoration: none;
}

.tab_recipes table {
	margin-top: 10px;
}

.tab_recipes img {
	width: 160px;
	height: 120px;
	border: 1px solid #000;
	text-decoration: none;
	margin-right: 14px;
}

.CatThumbgroupdesc a {
	color: #000;
	width: 160px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 10px;
	text-decoration: none;
	white-space: nowrap;
}

.CatThumbgroupdesc a:hover {
	color: #000;
	text-decoration: underline;
}

.tab_recipes a {
	color: #000;
	width: 160px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 10px;
	text-decoration: none;
	white-space: nowrap;
	
}

.tab_recipes a:hover {
	color: #000;
	text-decoration: underline;
}

.title_adjust1 {
	margin-right: 15px;
}

.title_adjust2 {
	margin-right: 10px;
}

.title_adjust3 {
	margin-right: 15px;
}

/* ---- PRODUCT ITEM ------------------------------------------ */

.CRMProdItemList {
	color:#000000;
	font-size:11px;
}

h3.CRMProdItemListTitle {
	font-weight:bold;
}

.CRMProdItemSummary {
	position: relative;
	width: 600px;
}

.CRMProdItemSummaryImg {
	border:1px solid #000000;
	clear:both;
	float:left;
	width:40px;
	height:40px;
	margin-bottom:5px;
	margin-right:10px;
}

.CRMProdItemSummaryRef {
	float:left;
	width: 150px;
	height:40px;
	margin-right: 10px;
	padding-top: 12px;
}

.CRMProdItemSummaryDesc {
	float:left;
	width: 150px;
	height:40px;
	margin-right: 10px;
	padding-top: 7px;
}

.CRMProdItemSummaryCost {
	float:left;
	width: 200px;
	margin-right: 10px;
	text-align: left;
	padding-top: 12px;
}

.CRMProdItemSummaryDiscountedPrice {
	float: left;
	position: relative;
	margin-left: -210px;
	margin-top: 25px;
}

.CRMProdItemAddToBasket {
	float:left;
	width: 50px;
	height:40px;
	padding-top: 1px;
	position: relative;
}

.addqty {
	border:1px solid #999999;
	color:#000000;
	margin-right:5px;
	padding: 0px 3px 3px 3px;
	text-align:center;
	width:18px;
}

.CRMProdItemAddToBasket .addqty {
	position: absolute;
	top: 10px;
	left: 0px;
}

.CRMProdItemDetailVariationControls {
float: bottom; 
position: absolute; 
padding-top: 45px;
margin-right: 10px;
} 

.CRMProdItemAddToBasket input[type="image"] {
	position: absolute;
	top: 0px;
	left: 40px;
	width: 40px;
	height: 40px;
}

.CRMProdItemList a:link {
	color: #000;
	text-decoration: none;
}

.CRMProdItemList a:visited {
	color: #000;
	text-decoration: none;
}

.CRMProdItemList a:hover {
	color: #000;
	text-decoration: underline;
}

.CRMProdItemList a:active {
	color: #f00;
	text-decoration: none;
}

.CRMProdItemDetailImg {
	padding-bottom: 10px;
}

.CRMProdItemDetailImg img {
	border: 1px solid #000;
}

.searchpagenav {
	margin: 15px 0px;
	color: #000;
}

.searchpagenav a:link {
	color: #000;
	text-decoration: none;
}

.searchpagenav a:visited {
	color: #000;
	text-decoration: none;
}

.searchpagenav a:hover {
	color: #000;
	text-decoration: underline;
}

.searchpagenav a:active {
	color: #000;
	text-decoration: none;
}

/* ---- LOGIN PAGE ------------------------------------------ */

#loginForm {
	width: 225px;
	height: 70px;
	border: 1px solid #333;
	background-color: #f0f8ff;
	margin-left: 20px;
	margin-top: 30px;
	padding: 20px;
	position: relative;
}

#labelUser {
	float: left;
	margin-right: 10px;
	width: 80px;
	padding-top: 1px;
}

#inputUser {
	float: left;
}

#labelPassword {
	clear: left;
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	width: 80px;
	padding-top: 1px;
}

#inputPassword {
	float: left;
	margin-top: 10px;
}

#submitLogin {
	position: absolute;
	right: 25px;
	bottom: 10px;
}

#submitLogin input{
	width: 65px;
}

#loginError {
	font-weight: bold;
	color: #c00;
	position: relative;
	left: 3px;
	top: 14px;
}

#forgottenPass {
	float: left;
	margin-top: 25px;
}

.CRMUserRegFormBasic {
	width: 270px;
	height: 200px;
	border: 1px solid #333;
	background-color: #f0f8ff;
	margin-left: 20px;
	margin-top: 30px;
	padding: 20px;
	position: relative;
}

.CRMUserRegFormInput {
	width: 250px;
	margin: 0px 0px 10px 0px;
}

.CRMUserRegFormInput input {
	clear: right;
	float: right;
}

.CRMUserRegFormSubmit {
	clear: right;
	float: right;
	margin-right: 20px;
}

/* ---- FURTHER DETAILS --------------------------------- */

#contactjobtitle label { clear: both; float: left; margin-top: 2px;}
#contactjobtitle input[type="text"] { float: right; }

#divphone label { clear: both; float: left; margin-top: 7px;}
#divphone input[type="text"] { float: right; margin-top: 5px;}

#contactprimphone label { clear: both; float: left; margin-top: 7px;}
#contactprimphone input[type="text"] { float: right; margin-top: 5px;}

#address1 label { clear: both; float: left; margin-top: 7px;}
#address1 input[type="text"] { float: right; margin-top: 5px;}

#address2 label { clear: both; float: left; margin-top: 7px;}
#address2 input[type="text"] { float: right; margin-top: 5px;}

#address3 label { clear: both; float: left; margin-top: 7px;}
#address3 input[type="text"] { float: right; margin-top: 5px;}

#address4 label { clear: both; float: left; margin-top: 7px;}
#address4 input[type="text"] { float: right; margin-top: 5px;}

#postcode label { clear: both; float: left; margin-top: 7px;}
#postcode input[type="text"] { float: right; margin-top: 5px;}

#divwebsite label { clear: both; float: left; margin-top: 7px;}
#divwebsite input[type="text"] { float: right; margin-top: 5px;}

#frmControls div input[type="submit"] { clear: both; float: right; margin-top: 7px;}

/* ---- ACCOUNT ----------------------------------------- */

/* -------------- Accounts Page ------------------------- */

#acc-page-item {
	width: 480px;
	height: 70px;
	position: relative;
	margin: 0px 0px 5px 5px;
}

#acc-page-image {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 70px;
	height: 70px;
}

#acc-page-title {
	position: absolute;
	top: 20px;
	left: 80px;
	font-size: 10px;
	font-weight: bold;
	color: #3d7a96;
}	

#acc-page-line {
	position: absolute;
	top: 35px;
	left: 80px;
	width: 400px;
	height: 2px;
	border-top: 1px solid #000;
}

#acc-page-text {
	position: absolute;
	top: 38px;
	left: 80px;
	font-size: 10px;
	font-weight: normal;
}

#acc-page-text  a {
	text-decoration: none;
}

#acc-page-text  a:hover {
	text-decoration: underline;
}

a.acctitle {	
	font-size: 14px;
	font-weight: bold;
	color: #4682b4;
	text-decoration: none;
}

a.acctitle:hover {	
	text-decoration: underline;
}

p.acctext {	
	margin-left: 10px;
}

.CRMChangePassword {
	width: 225px;
	height: 150px;
	border: 1px solid #333;
	background-color: #f0f8ff;
	margin-left: 20px;
	margin-top: 30px;
	padding: 20px;
	position: relative;
}

.CRMChangePassword input[type="submit"] {
	float: right;
}

/* ---- ORDER HISTORY ----------------------------------- */

.divManage th {
	text-align: left;
}

.os_header_ref {
	width: 120px;
	text-align: left;
}

.os_header_desc {
	width: 160px;
	text-align: left;
}

.os_header_ordered {
	width: 50px;
	text-align: left;
}

.os_header_delivered {
	width: 50px;
	text-align: left;
}

.os_header_invoiced {
	width: 50px;
	text-align: left;
}

.os_header_price {
	width: 50px;
	text-align: left;
}

/* ---- RECIPES ----------------------------------------- */

#recipe-name {
	font-size: 18px;
	margin-bottom: 10px;
}

#recipe-image {
	width: 250px;
	height: 250px;
	border: 1px solid #000;
	float: left;
}

#ingredients {
	float: left;
	margin-left: 20px;
	width: 350px
}

#ingredients-title {
	font-size: 14px;
	font-weight: bold;
	color: #476bb2;
	margin-bottom: 10px;
}

.ingredients-list {
	list-style: square;
	padding-left: 25px;
	font-size: 10px;
}

#method {
	clear: both;
	float: left;
	margin-top: 10px;
	width: 600px;
}

#method-title {
	font-size: 14px;
	font-weight: bold;
	color: #476bb2;
	margin-bottom: 10px;
}

.method-list {
	list-style: decimal;
	padding-left: 25px;
	font-size: 10px;
}

#purchase {
	clear: both;
	float: left;
	width: 600px;
}

#purchase-title {
	font-size: 14px;
	font-weight: bold;
	color: #476bb2;
	margin-top: 20px;
	margin-bottom: 10px;
}

#purchase-header {
	font-weight: bold;
	color: #000;
	margin-bottom: 20px;
	text-align: left;
	margin-left: 20px;
}
#purchase-header-field1 { float: left; width: 150px; margin-right: 10px; margin-left: 52px;}
#purchase-header-field2 { float: left; width: 80px; margin-right: 10px;}
#purchase-header-field3 { float: left; width: 120px; margin-right: 10px;}
#purchase-header-field4 { float: left; width: 120px; margin-right: 10px;}
#purchase-header-field5 {  }
#purchase-header-field6 {  }

#purchase .CRMProdItemListTitle {
	display: none;
}

#purchase .CRMProdItemList {
	margin-left: 20px;
}

#purchase .CRMProdItemSummary {
	width: 600px;
	position: relative;
}
#purchase .CRMProdItemSummaryImg { width: 40px; margin-right: 10px;}
#purchase .CRMProdItemSummaryDesc { width: 150px; padding-top: 7px; margin-right: 10px;}
#purchase .CRMProdItemSummarySeqCode { display: none; }
#purchase .CRMProdItemSummaryRef { width: 80px; margin-right: 10px; padding-top: 12px; }
#purchase .CRMProdItemSummaryStdPrice { width: 80px; margin-right: 10px;}
#purchase .CRMProdItemSummaryCost { width: 120px; margin-right: 10px; text-align: left; padding-top: 12px; }
#purchase .CRMProdItemSummaryStock {	width: 80px; margin-right: 10px;}
#purchase .CRMProdItemAddToBasket { width: 160px; position: relative; }
#purchase .CRMProdItemAddToBasket .addqty{ position: absolute; top: 10px; left: 0px; }
#purchase .CRMProdItemAddToBasket input[type="image"]{ width: 40px; height: 40px; position: absolute; top: 0px; left: 40px; }


/* ---- SITEMAP ----------------------------------------- */

.sitemap {
	margin-left: 25px;
}

.sitemap hr {
	border: 0px solid #fff;
}

.sitemap hr {
	border-top: 1px solid #ccc;
}

.sitemap li{
	list-style-type: disc;
}

.sitemap ul li {
	list-style-type: circle;
}

.sitemap ul {
	margin-left: 20px;
}

.sitemap a { text-decoration: none; font-weight: normal; font-size: 12px; color: #000;}
.sitemap a:hover { text-decoration: underline; }


/* ---- CONTACT ----------------------------------------- */

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


/* ---- FOOTER ------------------------------------------ */

#footer {
	clear: both;
	width: 900px;
	height: 75px;
	background-color: #f0f0f0;
	border-top: 7px solid #999;
	border-left-style: none;
	border-right-style: none;
	border-bottom-style: none;
	color: #000;
	position: relative;
}

#footer a {
	color: #000;
	font-weight: normal;
	text-decoration: underline;
}

#footer a:hover {
	text-decoration: none;
}

#footer-links {
	float: right;
	margin-top: 5px;
	margin-right: 15px;
}

#left-footer {
	position: absolute;
	left: 15px;
	bottom: 10px;
}

#left-footer a {
	color: #000;
	font-weight: bold;
	text-decoration: underline;
}

#left-footer a:hover {
	text-decoration: none;
}

#right-footer {
	font-weight: bold;
	position: absolute;
	right: 15px;
	bottom: 23px;
}

#right-footer-address {
	position: absolute;
	right: 15px;
	bottom: 10px;
}