/* set defaults - font and take padding off tables so it doesn't have to be defined for each <table> tag.
   A better option is to explicitly use padding if you need it.

   Font sizes all relative to the "body" tag below and by using "em" it means if the user increases the font size on the browser (DDA compliance)
   then the sizes increase on the site in proportion too.
*/
body { font-family: Arial, Tahoma, Verdana; font-size: .80em; color: #351c04; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td {
	margin:0;
	padding:0;
}

.TextBox {border: 1px solid #E6833F}

table {border-collapse: collapse; color: #351c04;}

/* this sets the overall width of the template so that we don't have to define it all the way through - plus it centres it */
#page {margin: 0 auto;}

/* Region: TOP MENU  */
#regTopMenuBar { width: 100%; background-color:gray; color: #cccccc;padding: 3px 3px 3px 3px;}
#regTopMenuBar #MenuLinks { padding-top: 4px; padding-bottom: 4px;}
#regTopMenuBar #MenuLinks .MenuItem { padding: 0px 20px 0px 10px; display: inline;}
#regTopMenuBar #MenuLinks .MenuItem a {color: white; font-weight: bold; text-decoration: none;}
#regTopMenuBar #MenuLinks .MenuItem a:hover {color:yellow; text-decoration: none;}

/* Region: FOOTER */
#regFooter {width: 100%; font-size: 1em; color: #999999; padding-bottom: 0px;  background-color: #eaeaea;}
#regFooter td {color: black; padding: 4px 4px 4px 4px;}
#regFooter A {color: black; font-weight: normal; text-decoration: none;}
#regFooter A:hover {text-decoration: underline;}

/* Region: Middle bit encompassing left menu and body content (and right menu if appropriate) */
#regMainContent {width: 100%;}

#regLeftMenu {vertical-align:top; width: 180px; padding: 10px 10px 10px 10px;}
#regLeftMenu h2 {font-size: 1.1em; font-weight: bold; color: #222222; padding-top: 10px; padding-bottom: 4px;}
#regLeftMenu .MenuItem { border: 1px solid #FFFFFF; background-color: #FFFFFF; color: #351C04; margin-bottom:1px; padding-top:2px; padding-bottom:2px; padding-left:4px; padding-right: 4px;}
#regLeftMenu .MenuItem A {color:#351C04; font-weight: bold; text-decoration: none;}
#regLeftMenu .MenuItem A:hover {text-decoration: underline;}

#regLeftMenu .subMenuItem { color: #FFFFFF; border: 1px solid #FFFFFF; background-color: #E6833F; margin-bottom:1px; padding-top:2px; padding-bottom:2px; padding-left:10px; padding-right: 4px;}
#regLeftMenu .subMenuItem A {font-size:.85em; color:White; font-weight: bold; text-decoration: none;}
#regLeftMenu .subMenuItem A:hover {text-decoration: underline;}

#regLeftMenu #scrollerPanelNews { height: 170px; padding: 5px; font-size: 1em; font-family: Arial; text-align:left;}

#rightcolumn .rhsNewsHeading {padding-top: 10px;}
#rightcolumn .rhsNewsHeading A {color: #885a99; font-weight:bold; font-size:.85em; text-decoration: none; }
#rightcolumn .rhsNewsBody {color: #1e1e1e; font-size:.85em; text-decoration: none;}
#rightcolumn .rhsNewsBody:hover {color: #555555; font-size:.85em; text-decoration: none;}

/* set the 750px width below to be the width (920 - left hand menu width).. */
#regBodyContent {vertical-align:top; padding-left:20px; padding-top: 10px; width: 750px; padding-bottom: 25px; color: #351c04;}
#regBodyContent h1 {margin-top: 5px; margin-left: 0px; margin-bottom: 4px; font-weight: normal; font-size:1.95em; color: #351c04}
#regBodyContent h2 {margin-top: 5px; margin-bottom: 3px; font-size: 1.35em; font-weight: bold; color: #351c04;}

#regBodyContent a {text-decoration: none; font-weight: bold; color: #351C04; }
#regBodyContent a:hover {color: #E6833F; text-decoration: underline; }
#regBodyContent .MessageToUser {font-weight: bold; color: red; padding-top: 5px; padding-bottom: 10px} 
#regBodyContent .breadcrumbtrail {padding-top:5px; padding-bottom:10px}
#regBodyContent .breadcrumbtrail A {color: #F8A261}
#regBodyContent .highlight {background-color:Yellow}

/* put table cells for the main body content to have a 1px padding by default */
#regBodyContent table td {padding: 1px 1px 1px 1px;}

/* code below allows customised bullet points with graphics to be added - also includes fix for IE */
/* #regBodyContent ul { margin-left: 10px; padding-left: 0; list-style: none; }
#regBodyContent ul li {	 padding-left: 14px; background-image: url(images/bullets/dot.gif); background-repeat: no-repeat; background-position: 0 7px;}
html[xmlns] #regMainContent ul { padding-left: 2em;} 
html[xmlns] #regMainContent ul li { background: none; /* undo the background-image  list-style-image: url(images/bullets/dot.gif); padding: 0px;}
*/

/* Button styles */
#regBodyContent .button {font-weight: bold; color: #FFFFFF; background-color: #e6833f; border: 1px solid #e6833f }
#regBodyContent .CancelButton {font-weight: normal; color: Red;}

/* datagrid styles */
#regBodyContent .datagridHeader { background-color: #E6833F; color: #FFFFFF; font-size: 14px; font-weight: bold; padding-top: 3px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; margin-bottom: 10px;}
#regBodyContent .datagridItem {background-color: #efefef; border-bottom: 1px solid #666666}
#regBodyContent .datagridAlternatingItem {background-color: #ffffff; border-bottom: 1px solid #666666}

/* Payment/checkout/myaccount order history page styles */  
.PaymentForm {margin-left: 30px; margin-top:8px; width: 90%;}
.PaymentForm .heading {width: 140px;}
.PaymentForm input, textarea {font-size: 1em;}
.PaymentFormHeading {width: 90%; color:#FFFFFF; background-color: #E6833F; font-size: 14px; font-weight:bold; height: 16px;  padding:2px 5px 2px 5px; margin-top: 10px; margin-bottom: 4px;}
.PaymentSecureSeal  { text-align:center; margin-top: 10px; }

/* these styles are used on the view shopping basket page... */
.BasketSummary {margin-left: 30px; width: 550px;}
.BasketSummary .BasketSummaryTable {width: 100%; }
.BasketSummary .BasketSummaryTable .BasketSummaryHeader { font-size: 13px; background-color: #E6833F; color: #FFFFFF; font-weight: bold; padding-top: 3px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; margin-bottom: 10px; }
.BasketSummary .BasketSummaryTable .BasketSummaryHeader td {padding: 3px 3px 3px 3px; margin: 3px 3px 3px 3px;}
.BasketSummary .BasketSummaryTable .BasketSummaryItem { border-bottom: 1px solid gray; padding-top: 1px; padding-bottom: 2px; padding-left: 8px;}
.BasketSummary .BasketSummaryTable .BasketItemQuantity {width: 20px; text-align:center; font-size: 1em; margin-left: 25px;}
.BasketSummary .BasketSubtotal { width: 100%; text-align: right; margin-bottom: 3px; padding-top: 4px; padding-bottom: 1px; font-weight: bold;}
.BasketSummary .BasketDelivery { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px; font-weight: bold;}
.BasketSummary .BasketDiscount { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px; font-weight: bold;}
.BasketSummary .BasketVATAmount { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 6px; padding-top: 3px; padding-bottom: 1px; font-weight: bold;}
.BasketSummary .BasketGrandTotal { width: 100%; text-align: right; border-bottom: 2px solid black; border-top: 1px solid black; font-weight: bold; font-size: 1.2em; margin-bottom: 15px; padding-top: 3px; padding-bottom: 3px;}
.BasketSummary .BasketButtons {width: 100%}
.BasketSummary .BasketButtons .UpdateQuantity {font-weight: bold; color: #FFFFFF; background-color: #e6833f; border: 1px solid #e6833f; font-size: .95em; width:95px}
.BasketSummary .BasketButtons .Checkout {font-weight: bold; color: #FFFFFF; background-color: #e6833f; border: 1px solid #e6833f; font-size: .95em; width:83px}
.BasketSummary .ApplyDiscountCode {font-weight: bold; color: #FFFFFF; height: 20px; background-color: #e6833f; border: 1px solid #e6833f; font-size: .95em; width:65px}

/* these styles are used on the final checkout page... */
.PaymentSummary {margin-left: 30px; width: 650px;}
.PaymentSummary .PaymentSummaryTable {width: 100%; }
.PaymentSummary .PaymentSummaryTable .PaymentSummaryHeader { border-bottom: 1px solid #E6833F; background-color: #E6833F; color: #FFFFFF;  font-weight: bold; height: 16px;}
.PaymentSummary .PaymentSummaryTable .PaymentSummaryItem { border-bottom: 1px solid gray; padding-top: 1px; padding-bottom: 2px;}
.PaymentSummary .PaymentSubtotal { width: 100%; text-align: right; margin-bottom: 3px; padding-top: 4px; padding-bottom: 1px;}
.PaymentSummary .PaymentDelivery { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px;}
.PaymentSummary .PaymentDiscount { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px;}
.PaymentSummary .PaymentVATAmount { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 6px; padding-top: 3px; padding-bottom: 1px;}
.PaymentSummary .PaymentGrandTotal { width: 100%; text-align: right; border-bottom: 2px solid black; border-top: 1px solid black; font-weight: bold; font-size: 1.2em; margin-bottom: 15px; padding-top: 3px; padding-bottom: 3px;}

.ProductPhotos {margin-right: 10px; width:300px; }
.ProductPhotos .MainPhoto {text-align:center; border: 0px solid black; height: 300px;}
.ProductPhotos .ThumbnailCaption {font-weight:normal; text-align:center; color: #351c04; padding: 5px 0px 5px 0px;}
.ProductPhotos .ThumbnailPhoto { border: 1px solid #E6833F; height:95px; width: 95px; margin-left: 3px; margin-right: 3px; margin-bottom: 5px; text-align: center;}

.ProductSKUsTable    { border: 1px solid #E6833F; }
.ProductSKUsTable .ProductSKUsHeader { border: 1px solid #E6833F; background-color: #E6833F; color: #FFFFFF;  font-weight: bold;}
 .ProductSKUsHeader { border: 1px solid #E6833F; background-color: #E6833F; color: #FFFFFF;  font-weight: bold;}
.ProductSKUsTable .ProductSKUsItem { border-bottom: 1px solid gray; padding-top: 1px; padding-bottom: 2px;}
.ProductSKUsTable .ProductSKUsItem .buyNow {color: #351D14; border: 1px solid #E6833F; background-color: #FFFFFF;  font-weight: bold; font-size: .9em;}

.ProductThumbnailBrowse {}
.ProductThumbnailBrowse a { color: Red;}
.ProductThumbnailBrowse .Thumbnail {height: 210px; width: 150px}
.ProductThumbnailBrowse .Thumbnail .ThumbnailPhoto {border: 1px solid #AAAAAA; height:150px; margin-left: 3px; margin-right: 3px; margin-bottom: 5px; text-align: center;}
.ProductThumbnailBrowse .ThumbnailProductName {text-align: center; padding-top: 3px; height: 20px; }
.ProductThumbnailBrowse .ThumbnailProductNamePopular {text-align: center; padding-top: 3px; height: 20px; }

#regBodyContent .ProductThumbnailBrowse .Thumbnail .ThumbnailProductName a {color: #FFFFFF; text-decoration: none; font-size: .9em}
#regBodyContent .ProductThumbnailBrowse .Thumbnail .ThumbnailProductName a:Hover { text-decoration: underline; font-size: .9em}
.ThumbnailPhoto { height: 150px;}

a img { border:0px;}
#topnav { vertical-align:top; height:27px;}
#topnav .button { background-image:url(images/template/topnav_bg_bar.gif); vertical-align:top;}
#cart_total_homepage { background-image:url(images/template/topnav_bg_bar.gif); font-size:13px; color:#ffffff; font-weight: bolder; padding-left:5px; padding-top:2px;}

#leftmanu { width:207px; height: 100%; padding: 5 5 5 5; }
#leftmanu .whitebox { background-color:#ffffff; margin-bottom:5px;  }
#leftmanu .orangebox { background-color:#e6833f; margin-bottom:5px;  }

#maincontent { width:732px; }

#footer td { background-color:#E6833F; margin-top:25px; height:23px; font-size:11px; color:#ffffff; }
#footer A { color:#ffffff; text-decoration:none;}
#footer A:hover { text-decoration:underline;}

.CartSummary { color: #351c04; font-weight:normal;font-size:12px;}
.CartRemove { background-color: #FFFFFF;font-weight: bold; color: #695116; border: 0px}
.CartRemove:Hover { text-decoration: none;}

 td .ThumbnailProductName {text-align: center; padding-top: 3px; background-color: #E6833F;  }
td  .ThumbnailProductName a {color: #FFFFFF; text-decoration: none;}
 td .ThumbnailProductNamePopular {text-align: center; padding-top: 3px;  color: #351c04; }
td  .ThumbnailProductNamePopular a {color: #FFFFFF; text-decoration: none;}