/* 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.

   #1A3C6B - page background
   #335F9A - header
   #5B7DA8 - left hand column
   #335F9A - footer
*/
body { font-family: Arial; font-size: 12px; background-color: white; background-color:#606060; }

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, img {
	margin:0;
	padding:0;
}
 a img { border:0px; }

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:978px; }

#Header { width:978px; height:132px; background-image:url(images/template/header_bg.jpg)}
#Header .TopTab { background-image:url(images/template/toptab_bg.gif); padding:4px 12px 0px 8px;}
#Header .TopTab a { font-size:1em; font-weight:bold; color:#000000; text-decoration:none;}
#Header .TopTab a:hover{ text-decoration:none; color:#E22622; }
.PayForLater { width: 400px;  clear: both; padding-right: 10px; font-weight: bold; height: 20px;}
.PayForLater label {  clear: left;float: left; width:110px;}
.P4LTextBox { width: 230px; float:left; clear: right;}
.P4LDDL { float:left; clear: right; margin-left: 4px;}

/* Region: TOP MENU  */
#regTopMenuBar { background-image:url(images/template/topsubnav_red_bg.gif); vertical-align:top; padding-top:5px;}
#regTopMenuBar #MenuLinks { color:#ffffff; padding-right:30px;}
#regTopMenuBar #MenuLinks .MenuItem { padding: 0px 12px 0px 12px; display: inline; font-size: .9em;}
#regTopMenuBar #MenuLinks .MenuItem a {color: white; font-weight: bold; text-decoration: none;}
#regTopMenuBar #MenuLinks .MenuItem a:hover { text-decoration: underline;}

#cart_total_homepage { color:#ffffff; }
#cart_total_homepage td { padding:0px 0px 8px 10px;  }
#cart_total_homepage td a { color:#ffffff; text-decoration:none; }
#cart_total_homepage td a:hover { color:#ffffff; text-decoration:underline; }


/* Region: FOOTER */
#regFooter {width: 100%; font-size: 1em; background-image:url(images/template/footer_bg_grey.gif)}
#regFooter td {color: black; vertical-align:middle; }
#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%; background-color:#606060; position: relative;}


/* Region: Left hand menu/column */
#regLeftMenu {font-size: 1em; vertical-align:top; color: #44749D; width: 170px; background-color: white; padding: 0px 0px 5px 5px; }
#regLeftMenu a {color: black; text-decoration: none;}
#regLeftMenu h2 {font-size: .85em; font-weight: bold; color: white; padding: 2px 5px 2px 2px; background-color:#44749D; margin-top: 3px; }

#regLeftMenu .rssIcons {font-size: .8em; margin: 10px 5px 10px 5px; }

#regLeftMenu .menuItemsBox { padding: 0px 0px 10px 0px;}
#regLeftMenu .MenuItem { width:155px; height:24px; padding:6px 0px 0px 10px;  background-image:url(images/template/menu_tab_bg.gif); }
#regLeftMenu .MenuItem A { color:black; font-weight: bold; text-decoration: none;}
#regLeftMenu .MenuItem A:hover {text-decoration: underline; color: #E22622;}

#regLeftMenu .subMenuItem { padding:1px 0px 1px 10px; }
#regLeftMenu .subMenuItem A { color:black; text-decoration: none;}
#regLeftMenu .subMenuItem A:hover {text-decoration: underline;color: #E22622;}

#regLeftMenu .productCategoriesBox { padding: 0px 0px 10px 0px;}

#regRightBlogMenu {font-size: 1em; vertical-align:top; color: #000; width: 200px; padding: 20px 0px 5px 5px;}

/* Region: right hand menu/column */
#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:20px 20px 25px 20px; width: 973px; background-color: White; font-size: 1em; position: relative;}
#regBodyContent h1 {margin-top: 5px; margin-bottom: 5px; font-size: 1.8em; font-weight: normal; color: #E22622;}
#regBodyContent h2 {margin-top: 8px; margin-bottom: 8px; font-size: 1.3em; font-weight: bold; color: #E22622;}
#regBodyContent h3 {margin-top: 8px; margin-bottom: 8px; font-size: 1.1em; font-weight: bold; color: #E22622;}

#regBodyContent select {font-size: 1.1em; padding-left: 2px;}
#regBodyContent input {font-size: 1.1em; padding-left: 2px;}

#regBodyContent a {text-decoration: underline; font-weight: bold; color: #E22622; }
#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}

/* Button styles */
#regBodyContent .button {font-weight: bold; color: #333333; border: 1px solid #E22622; background-color: #EFEFEF; font-size: 1.1em; padding: 3px 6px 3px 6px }
#regBodyContent .CancelButton {font-weight: bold; color: #333333;}

/* datagrid styles */
#regBodyContent .datagridHeader { background-image:url(images/template/topsubnav_red_bg.gif); color: #FFFFFF; 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 */  
#regBodyContent .PaymentForm {margin-left: 30px; margin-top:8px; width: 90%;}
#regBodyContent .PaymentForm .heading {width: 140px}
#regBodyContent .PaymentForm input, textarea {font-size: 1em;}
#regBodyContent .PaymentFormHeading { font-size: 1.1em; padding-top: 3px; padding-left: 10px; height: 20px;  background-image:url(images/template/topsubnav_red_bg.gif); color: #FFFFFF; font-weight: bold; margin-top: 10px; margin-bottom: 5px;}
#regBodyContent .PaymentSecureSeal  { text-align:center; margin-top: 10px; }

/* these styles are used on the view shopping basket page... */
#regBodyContent .BasketSummary {margin-left: 30px; width: 680px;}
#regBodyContent .BasketSummary .BasketSummaryTable {width: 100%; border-collapse: collapse; }
#regBodyContent .BasketSummary .BasketSummaryTable .BasketSummaryHeader td { padding: 3px 5px 3px 5px;  height: 20px;  background-image:url(images/template/topsubnav_red_bg.gif); color: #FFFFFF; font-weight: bold;}
#regBodyContent .BasketSummary .BasketSummaryTable .BasketSummaryItem td { padding: 3px 5px 3px 5px; border-bottom: 1px solid gray; padding-top: 1px; padding-bottom: 2px;}
#regBodyContent .BasketSummary .BasketSummaryTable .BasketItemQuantity {width: 20px; text-align:center; font-size: 1em; margin-left: 25px;}
#regBodyContent .BasketSummary .BasketSummaryTable .SKUPrice {color: #E22622; font-weight: bold; font-size: 1em; padding-right: 4px;}
#regBodyContent .BasketSummary .BasketSubtotal { margin-right:  5px; font-weight: bold; width: 100%; text-align: right; border-top: 2px solid gray; margin-bottom: 3px; padding-top: 4px; padding-bottom: 1px; font-size: 1.1em;}
#regBodyContent .BasketSummary .BasketDelivery { margin-right:  5px;font-weight: bold; width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px; font-size: 1.1em;}
#regBodyContent .BasketSummary .BasketDelivery select { margin-right:  5px;font-size: 1.00em; margin-left: 5px;}
#regBodyContent .BasketSummary .BasketDiscount { margin-right:  5px;font-weight: bold; width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px; font-size: 1.1em;}
#regBodyContent .BasketSummary .BasketVATAmount { margin-right:  5px;font-weight: bold; width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 6px; padding-top: 3px; padding-bottom: 1px; font-size: 1.1em;}
#regBodyContent .BasketSummary .BasketGrandTotal { margin-right:  5px; width: 100%; text-align: right; border-bottom: 2px solid black; border-top: 1px solid black; font-weight: bold; font-size: 1.3em; margin-bottom: 15px; padding: 3px 0px 3px 0px;}
#regBodyContent .BasketSummary .BasketButtons {width: 100%}
#regBodyContent .BasketSummary .BasketButtons .UpdateQuantity { font-weight: bold; color: #333333; border: 1px solid #E22622; background-color: #EFEFEF; font-size: 1.1em; padding: 3px 6px 3px 6px}
#regBodyContent .BasketSummary .BasketButtons .Checkout { font-weight: bold; color: #333333; border: 1px solid #E22622; background-color: #EFEFEF; font-size: 1.1em; padding: 3px 6px 3px 6px}
#regBodyContent .BasketSummary .BasketButtons .CheckoutButton { font-weight: bold; color: #333333; border: 1px solid #E22622; background-color: #EFEFEF; font-size: 1.1em; padding: 3px 6px 3px 6px}
#regBodyContent .BasketSummary .ApplyDiscountCode { color: #111111; font-weight: bold; font-size: 1em; width:65px}
#regBodyContent .BasketSummary .CartRemove { background-color: #FFFFFF;font-weight: bold; color: #000000; border: 0px}
#regBodyContent .BasketSummary .CartRemove:Hover { text-decoration: none;}

/* these styles are used on the final checkout page... */
#regBodyContent .PaymentSummary {margin-left: 30px; width: 680px;}
#regBodyContent .PaymentSummary .PaymentSummaryTable {width: 100%; }
#regBodyContent .PaymentSummary .PaymentSummaryTable .PaymentSummaryHeader {  height: 20px;  background-image:url(images/template/topsubnav_red_bg.gif); color: #FFFFFF; font-weight: bold;}
#regBodyContent .PaymentSummary .PaymentSummaryTable .PaymentSummaryItem { border-bottom: 1px solid gray; padding-top: 1px; padding-bottom: 2px;}
#regBodyContent .PaymentSummary .PaymentSubtotal { width: 100%; text-align: right; border-top: 2px solid gray; margin-bottom: 3px; padding-top: 4px; padding-bottom: 1px;}
#regBodyContent .PaymentSummary .PaymentDelivery { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px;}
#regBodyContent .PaymentSummary .PaymentDiscount { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 3px; padding-top: 3px; padding-bottom: 1px;}
#regBodyContent .PaymentSummary .PaymentVATAmount { width: 100%; text-align: right; border-top: 1px solid gray; margin-bottom: 6px; padding-top: 3px; padding-bottom: 1px;}
#regBodyContent .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;}

/* these styles are used on product list/detail pages ... */
#regBodyContent .ProductPhotos {margin-right: 10px; width:300px; }
#regBodyContent .ProductPhotos .MainPhoto {text-align:center; border: 1px solid black; height: 300px;}
#regBodyContent .ProductPhotos .ThumbnailCaption {font-weight:normal; text-align:center; color: #777777; padding: 5px 0px 5px 0px;}
#regBodyContent .ProductPhotos .ThumbnailPhoto { border: 1px solid #aaaaaa; height:90px; margin-left: 3px; margin-right: 3px; margin-bottom: 5px; text-align: center;}

#regBodyContent .paging {padding-top: 10px; padding-bottom: 20px;}
#regBodyContent .paging a {text-decoration: none;}
#regBodyContent .paging table {width:100%}
#regBodyContent .paging .currentPageLabel {width: 180px; color: black;}
#regBodyContent .paging .previousPage {width: 100px; text-align: left; }
#regBodyContent .paging .previousPage a {  color: #606060;}
#regBodyContent .paging .pageNumbers {text-align: center;}
#regBodyContent .paging .pageNumbers a.unselectedPage {font-weight: bold; color: #606060}
#regBodyContent .paging .pageNumbers a.selectedPage {font-weight: bold; color: red}
#regBodyContent .paging .nextPage {width: 80px; text-align: right; }
#regBodyContent .paging .nextPage a {  color: #606060; }

/* Blog related styles... */
#regBodyContent .BlogEntries {width: 620px; float: left;}
#regBodyContent .BlogEntries p {padding-top: 0px; margin-top: 0px}
#regBodyContent .BlogEntries .blogPostTitle {padding-top: 5px;}
#regBodyContent .BlogEntries .blogPostTitle a {font-size: 1.2em; font-weight: bold;}
#regBodyContent .BlogEntries .blogDateFiled {color: Gray; padding-top: 2px; padding-bottom: 8px;}
#regBodyContent .BlogEntries .blogContent { padding-bottom: 10px;}   
#regBodyContent .BlogEntries .blogFooter {padding-bottom: 25px; border-bottom: 1px solid #cccccc; margin-bottom: 10px; }
#regBodyContent .BlogEntries .blogFooter .CommentSummary {float: left; width: 250px; display: inline; color: gray;  padding-top: 5px; }
#regBodyContent .BlogEntries .blogFooter .CommentSummary a {text-decoration: none; font-weight: normal; color: Gray;}
#regBodyContent .BlogEntries .blogFooter .SocialNetworking {float: right; display: inline; }
#regBodyContent .BlogEntries .blogNoEntries {margin-left: 15px; color: Navy; padding-top: 10px; }

.BlogMenu {float: right; width: 200px; padding-right: 20px; padding-top: 20px;}
.BlogTop div {float: left;}
#regBodyContent .BlogMenu h2 {color: #000; width:155px; height:24px; font-size: 1.2em; padding:20px 0px 0px 10px; margin: 0px 0px 0px 0px;}

#regBodyContent .BlogDetail {width: 620px; float: left;}
#regBodyContent .BlogDetail .blogPostTitle {font-size: 1.2em; font-weight: bold;}
#regBodyContent .BlogDetail .blogDateFiled {color: Gray; padding-top: 2px; padding-bottom: 8px;}
#regBodyContent .BlogDetail .blogContent { padding-bottom: 5px;}   
#regBodyContent .BlogDetail .blogCategories { padding-top: 7px; color: #444444; margin-left: 20px; padding-bottom: 3px;}   
#regBodyContent .BlogDetail .blogFooter {padding-bottom: 5px; border-bottom: 1px solid #cccccc; }
#regBodyContent .BlogDetail .blogNoEntry {margin-left: 15px; color: Navy; padding-top: 10px; }
#regBodyContent .BlogDetail .SocialNetworking {padding-top: 0px;}
#regBodyContent .BlogDetail .OtherRecentPosts {padding-top: 0px; padding-bottom: 5px;}
#regBodyContent .BlogDetail .OtherRecentPosts .ListPosts {margin-left: 20px; padding-bottom: 3px;}

#regMainContent .BlogDetail .Comments {padding-top: 0px;}
#regMainContent .BlogDetail .Comments .NoCommentsYet {color: #444444; padding-bottom: 5px;}
#regMainContent .BlogDetail .Comments .ListComments {margin-left: 0px; padding-bottom: 5px;}
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost {padding: 7px 5px 7px 5px; margin-bottom: 12px; border: 1px solid gray; background-color: #FFFED0;}
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .CommentBy {font-size: .9em; color: black; padding-bottom: 5px; }
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .Comment {font-size: .9em; }
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .ModeratedReply {background-color: #F5FABD; }
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .ModeratedReply .ReplyComment { }
#regMainContent .BlogDetail .Comments .ListComments .SpecificPost .ModeratedReply .ReplyDatestamp { }

#regBodyContent .BlogDetail .Comments .leaveComment input {margin-left: 0px;}
#regBodyContent .BlogDetail .Comments .leaveComment .heading {color: #333333; font-weight: bold; padding-top: 4px; }

/* not within a region because you may want to put in in various places on the site */
.blogCategoriesBox {padding: 0px 0px 0px 0px; border-left: solid 1px #9D9D9D; border-right: solid 1px #9D9D9D;}
.blogCategoriesBox .blogCategoryItem { margin: 0px 0px 0px 0px; padding: 4px 7px 4px 7px;}
.blogCategoriesBox .blogCategoryItem A {color: #e22622; font-weight: bold; text-decoration: none;}
.blogCategoriesBox .blogCategoryItem A:hover {text-decoration: underline;}

.blogArchiveBox {padding: 0px 0px 0px 0px; border-left: solid 1px #9D9D9D; border-right: solid 1px #9D9D9D;}
.blogArchiveBox .blogArchiveItem {margin: 0px 0px 1px 0px; padding: 4px 0px 4px 15px;}
.blogArchiveBox .blogArchiveItem A { color:#e22622; font-weight: normal; text-decoration: none;}
.blogArchiveBox .blogArchiveItem A:hover {text-decoration: underline;}

/*Password Tool CSS */
#password_description {font-size: 10px; font-style: italic;}
#password_strength { height:10px; display:block; }
#password_strength_border { width: 160px; height: 10px; border: 1px solid black; }
.strength0 { width:160px; background:#cccccc; }
.strength1 { width:40px; background:#ff0000; }
.strength2 { width:80px; background:#56e500; }
.strength3 { background:#399800; width:120px; }
.strength4 { background:#4dcd00; width:160px; }

#regBodyContent .PayForLater {width: 350px; padding-bottom: 10px;}
#regBodyContent .PayForLater input {float: right;}
#regBodyContent .PayForLater label {float: left;}

/* Products image zoom... */
#lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666;	border-right: 2px solid #666;	}
#lightboxDetails{	font-size: 0.8em;	padding-top: 0.4em;	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }
#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }
#overlay{ background-image: url(js/lightbox/overlay.png); }

* html #overlay{
	background-color: #333;
	background-color: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="js/lightbox/overlay.png", sizingMethod="scale");
	}
#regBodyContent .ProductSKUsTable {}	
#regBodyContent .ProductSKUsTable .ProductSKUsHeader {height: 20px;  background-image:url(images/template/topsubnav_red_bg.gif); color: #FFFFFF; font-weight: bold;}
#regBodyContent .ProductSKUsTable .ProductSKUsItem {border: 1px solid gray; padding-top: 1px; padding-bottom: 2px; padding-left: 4px; padding-right: 4px;}
#regBodyContent .ProductSKUsTable .ProductSKUsItem .buyNow {color: #000000; font-weight: bold; font-size: .9em;}
#regBodyContent .ProductSKUsTable .ProductSKUsItem .SKUPrice {border: 1px solid gray;color: #E22622; font-weight: bold; font-size: 1em; padding-right: 4px;}

#regBodyContent .SubCategoryThumbnailBrowse {}
#regBodyContent .SubCategoryThumbnailBrowse .Thumbnail {width: 165px}
#regBodyContent .SubCategoryThumbnailBrowse .Thumbnail .ThumbnailPhoto {height: 135px; border: 1px solid #aaaaaa;margin-left: 3px; margin-right: 3px; margin-bottom: 2px; text-align: center;}
#regBodyContent .SubCategoryThumbnailBrowse .Thumbnail .ThumbnailText {height: 20px;  background-image:url(images/template/topsubnav_red_bg.gif); color: #FFFFFF;text-align: center; padding-top: 3px;}
#regBodyContent .SubCategoryThumbnailBrowse .Thumbnail .ThumbnailText a {text-decoration: none;color: #FFFFFF;}
#regBodyContent .SubCategoryThumbnailBrowse .Thumbnail .ThumbnailText a:hover {text-decoration: underline;}
#regBodyContent .CategoryThumbnailBrowse .Thumbnail {height: 185px; width: 150px}
#regBodyContent .CategoryThumbnailBrowse .Thumbnail .ThumbnailPhoto {border: 1px solid #aaaaaa; height:150px; margin-left: 3px; margin-right: 3px; margin-bottom: 2px; text-align: center;}
#regBodyContent .CategoryThumbnailBrowse .Thumbnail .ThumbnailText {text-align: center; padding-top: 3px; height: 25px; }


#regBodyContent .ProductThumbnailBrowse {}
#regBodyContent .ProductThumbnailBrowse .Thumbnail {height: 210px; width: 150px; margin-bottom: 7px;}
#regBodyContent .ProductThumbnailBrowse .Thumbnail .ThumbnailPhoto {border: 1px solid #aaaaaa; height:150px; margin-left: 3px; margin-right: 3px; margin-bottom: 2px; text-align: center;}
#regBodyContent .ProductThumbnailBrowse .Thumbnail .ThumbnailText {height: 28px; text-align: center;  font-size: 1.1em}
#regBodyContent .ProductThumbnailBrowse .Thumbnail .ProductPrice  {text-align: center; padding-top: 2px; padding-bottom: 12px; font-weight: bold; color: Gray;}
#regBodyContent .ProductsFooter {background-color:#c7c7c7; text-align: center; color: #E22622; font-weight: bold; padding-bottom: 5px; padding-top: 5px;}
#regBodyContent .ProductsHeader {background-color:#c7c7c7; height: 30px; text-align: center;}
#regBodyContent .ProductsHeader a{text-decoration: none; color: #000000;} 
#regBodyContent .ListImage {text-align:center; vertical-align:middle; height: 150px; border-left: 1px solid #9d9d9d; border-right: 1px solid  #9d9d9d;}

.Pay4Later { margin-bottom: 8px; padding: 8px 8px 8px 8px; background-color: #00ACE1; color: #FFFFFF; font-weight: bold; font-size: 1.1em }
.Pay4Later .Yellow { color: #FFDC00;}
#regBodyContent .Pay4Later .Button  {font-weight: bold; color: #333333;  font-size: 13px; border: 1px solid #E22622; background-color: #EFEFEF;  padding: 3px 6px 3px 6px}