/* 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; font-size: 12px}

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td {
	margin:0;
	padding:0;
}

table {border-collapse: collapse;}

/* 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; width:982px; }
a img { border:0; }

/* Region: TOP MENU  */
#regTopMenuBar { width: 100%;}
#regTopMenuBar #MenuLinks { padding-top: 4px; padding-bottom: 4px;}
#regTopMenuBar #MenuLinks .MenuItem { padding: 0px 0px 0px 27px; display: inline;}
#regTopMenuBar #MenuLinks .MenuItem a {color: white; font-size:16px; text-decoration: none;}
#regTopMenuBar #MenuLinks .MenuItem a:hover { text-decoration: none;}

/* Region: FOOTER */
#regFooter {width: 982px; font-size: 11px; color: #999999; padding-bottom: 0px;  background-color: #6EB647;}
#regFooter td {color: white; padding: 4px 10px 4px 10px;}
#regFooter A {color: white; 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: 982px; border-right:solid 1px #508F2F; }

#regLeftMenu {vertical-align:top; padding-right:5px; padding-bottom:5px;  background-image:url(images/template/bg_menu.gif); font-family:Times New Roman;}

/* set the 750px width below to be the width (920 - left hand menu width).. */
#regBodyContent {vertical-align:top; width: 750px; padding:17px 10px 25px 20px; font-size: 12px}
#regBodyContent h1 {margin-top: 5px; margin-bottom: 5px; font-size: 22px; color: #127630}
#regBodyContent h2 {margin-top: 15px; margin-bottom: 3px; font-size: 1.1em; font-weight: bold; color: #3A98C0;}

#regBodyContent A { color: #6EB647; font-size:12px; text-decoration:none; }
#regBodyContent A:hover { 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: 10px; background-image: url(images/bullets/dot.gif); background-repeat: no-repeat; background-position: 0 7px;}
html[xmlns] #regBodyContent ul { padding-left: 2em;}
html[xmlns] #regBodyContent ul li { background: none; /* undo the background-image */ list-style-image: url(images/bullets/dot.gif);}


/* Button styles */
#regBodyContent .button {font-weight: bold; color: darkGreen;}
#regBodyContent .CancelButton {font-weight: normal; color: Red;}

/* datagrid styles */
#regBodyContent .datagridHeader {background-color: #cccccc;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 { font-weight: bold; color: Navy; margin-top: 10px}
.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 { background-color: black; color: White; font-weight: bold;}
.BasketSummary .BasketSummaryTable .BasketSummaryItem { border-bottom: 1px solid gray; padding-top: 1px; padding-bottom: 2px;}
.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;}
.BasketSummary .BasketDelivery { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px;}
.BasketSummary .BasketDiscount { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px;}
.BasketSummary .BasketVATAmount { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 6px; padding-top: 3px; padding-bottom: 1px;}
.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 {color: Navy; font-weight: bold; font-size: .95em; width:95px}
.BasketSummary .BasketButtons .Checkout {color: DarkGreen; font-weight: bold; font-size: .95em; width:83px}
.BasketSummary .ApplyDiscountCode {color: DarkGreen; font-weight: bold; font-size: .95em; width:65px}




/* these styles are used on the final checkout page... */
.PaymentSummary {margin-left: 30px; width: 550px;}
.PaymentSummary .PaymentSummaryTable {width: 100%; }
.PaymentSummary .PaymentSummaryTable .PaymentSummaryHeader { background-color: black; color: White; font-weight: bold;}
.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: 1px solid black; height: 300px;}
.ProductPhotos .ThumbnailCaption {font-weight:normal; text-align:center; color: #777777; padding: 5px 0px 5px 0px;}
.ProductPhotos .ThumbnailPhoto { border: 1px solid #aaaaaa; height:90px; margin-left: 3px; margin-right: 3px; margin-bottom: 5px; text-align: center;}

.ProductSKUsTable .ProductSKUsHeader { background-color: black; color: White; font-weight: bold;}
.ProductSKUsTable .ProductSKUsItem { border-bottom: 1px solid gray; padding-top: 1px; padding-bottom: 2px;}
.ProductSKUsTable .ProductSKUsItem .buyNow {color: Red; font-weight: bold; font-size: .8em;}

.ProductThumbnailBrowse {}
.ProductThumbnailBrowse .Thumbnail {height: 190px; width: 150px}
.ProductThumbnailBrowse .Thumbnail .ThumbnailPhoto {border: 1px solid #aaaaaa; height:150px; margin-left: 3px; margin-right: 3px; margin-bottom: 5px; text-align: center;}
.ProductThumbnailBrowse .Thumbnail .ThumbnailProductName {text-align: center; padding-top: 3px; height: 40px; }


#menu{
position:relative; font-family:Times New Roman;
top:0.0em;
left:0.0em;
width:201px; font-size:23px;
}

#menu a{
font: Bold 16px Times New Roman  ;
display:block;
border-width:0px;
white-space:nowrap;
margin:0;
padding-bottom: 4px;
padding-top: 4px;
padding-left: 4px;

}

#menu h2{
font:bold 20px Times New Roman;
display:block;
white-space:nowrap;
margin:0;
padding:0 4px;
}


#menu h2{ font-family: Times New Roman;
color:#fff;
background:#red;
}

#menu a{ font-family: Times New Roman;
color:#6EB647;
background:#ffff;
text-decoration:none;

}

#menu a:hover{
color:#ffffff;
background:#6EB647;
}

#menu a:active{
color:#FFFFFF;
background:#6EB647;
}

#menu ul{font-family: Times New Roman;
list-style:none;
margin:0;
padding:0;
width:100%;
}

/* Requirement: Put the element selector name (div)
onto non anchor hover selectors to force IE5 and
5.5 to correctly apply the csshover file. */

div#menu li, div#menu li:hover{
position:relative;
}

div#menu li ul{font-family: Times New Roman;
position:absolute;
top:0;
left:100%;
border:solid 2px #6EB647; background-color:#ffffff;
display:none;
}

div#menu ul ul,
div#menu ul ul ul,
div#menu ul li:hover ul ul,
div#menu ul li:hover ul ul ul
{display:none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display:block;}

/* End non-anchor hover selectors */

/* Styling for Expand */

#menu a.x, #menu a.x:visited{
background:#9C9DA1;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; padding:0px; font-family: Times New Roman; }
* html .suckerdiv ul li a { height: 1%; font-family: Times New Roman; }

 /*url(images/expand3.gif) no-repeat bottom right;*/
#menu a.x:hover{
color:#FFFFFF;
background:#6EB647;
}

#menu a.x:active{
color:#ffffff;
background:#6EB647;
}

/* Begin Content Area */

#content{margin:0 0 0 10em;padding:0.5em;border:1px solid #000; font-family: Times New Roman;}
#content a:link{color:#a00; font-family: Times New Roman;}
#content a:visited{color:#a00;}
#content a:hover{color:#ffffff;background:#6EB647;}
#content a:active{color:#ffffff;background:#6EB647;}
#content h1, #content h2, #content h3{font:bold 1.0em  Times;margin:0.5em 0.25em;padding:0;}
#content img{border:none;}
#content p{font:normal 0.9em/1.5em verdana,sans-serif;margin:1.0em;}
#content ul, #content ul ul{font:normal 0.9em/1.4em  Tahoma,arial,sans-serif;margin:1.0em 4.0em 1.5em 4.0em;}
#content ul li{font:normal 0.9em/1.4em Times New Roman; margin:1.0em 0;}
#content ul ul li{font:normal 1.1em/1.6em Times New Roman; margin:0;}
#content .fr{float:right;margin:0 0 1.0em 1.0em; font:normal .7em Times New Roman; }
#content .mod{font:normal .7em Times New Roman; margin:.25em;}
div.vv{position:relative;top:0;float:right;margin:0 0 15px 15px;}

/* End Content Area */


