﻿html, body, form, fieldset, table, tr, td, th, h1, h2, h3, h4, h5, ul, li, p, span, img { border: 0; margin: 0; padding: 0; }
html, body { background: #888; }
body { color: #111; }
input { color: #111; font-family: arial, sans-serif; }
select { color: #111; font-family: arial, sans-serif; }
textarea { padding: 4px; color: #111; font: normal 90% arial, sans-serif; }
label { display: block; padding: 0 0 8px 0; color: #111; font: normal 90% arial, sans-serif; }

#RootContainer { margin: auto; width: 960px; clear: both; }

#Logo { width: 960px; height: 270px; clear: both; }
#LogoTop { height: 235px; clear: both; }
#LogoBottom { width: 960px; height: 35px; clear: both; }
#LogoControls { width: 600px; float: left; }
#LogoControlsContainer { padding: 0 0 16px 0; }
#LogoLinks { width: 360px; float: left; clear: right; text-align: right; }
#LogoLinksContainer { padding: 8px 8px 0 0; }
#LogoLinks img { margin: 0 2px 0 0; }

#FeatureBar { width: 960px; clear: both; }
#DeliveryAreas { width: 625px; height: 30px; float: left; background: #fff; text-align: center; vertical-align: middle; }
#DeliveryAreasContainer { padding: 5px 0 0 0; }
#DeliveryAreas img { margin: 0 0 0 4px; }
#Notifications { width: 335px; height: 30px; float: left; clear: right; background: #333; text-align: center; }
#NotificationsContainer { padding: 3px 0 0 0; }
#Notifications p { padding: 3px 0 0 0; font: normal 90% arial, sans-serif; color: #fff; }

#TopNav { width: 960px; clear: both; display: table; background: #555; border-bottom: 1px solid #aaa; }
#TopNavContainer { width: 904px; margin: auto; }

#TopNotifications { width: 960px; height: 36px; clear: both; background: #666; border-bottom: 1px solid #aaa; text-align: center; }
#TopNotificationsLeft { width: 720px; float: left; }
#TopNotificationsRight { width: 240px; float: left; clear: right; }
#TopNotificationsLeftContainer { padding: 7px 0 0 0; }
#TopNotificationsRightContainer { padding: 10px 0 0 0; }
#TopNotifications p { padding: 3px 0 0 0; font: normal 90% arial, sans-serif; color: #fff; }

#Main { width: 960px; clear: both; }
#ContentZone { width: 720px; float: left; }
#RightNav { width: 240px; float: left; clear: right; background: #ddd; }
#CheckoutButton { height: 50px; background: #555; }
#CheckoutButtonContainer { padding: 7px 4px 6px 4px; text-align: center; }
#CheckoutButton img { vertical-align: middle; }

.TopNavLink { background: #555; padding: 12px 6px 12px 6px; float: left; }
.TopNavLink:hover { background: #333; }
.TopNavLink a { font: bold 75% arial, sans-serif; color: #fff; text-decoration: none; border-bottom: 1px solid #ccc; }
.TopNavLink a:hover { color: #c0d021; text-decoration: none; border-bottom: 1px solid #ccc; }
.TopNavLink a.Img { border: 0; }
.TopNavLink img { padding: 0 6px 0 0; vertical-align: middle; }

.NavBox { clear: both; }
.NavBox img { border: 1px solid #a8b9a3; margin: 6px 4px 6px 12px; vertical-align: middle; }
.NavBox a { color: #111; text-decoration: none; }
.NavBox a:hover { text-decoration: underline; }

.NavBoxList { list-style-type: none; }
.NavBoxList li { font: bold 75% arial, sans-serif; text-align: right; vertical-align: middle; border-bottom: 1px solid #888; }
.NavBoxList li:hover { background: #ccc; }

.NavBoxSpacer { height: 2px; background: #aaa; clear: both; }

.PageTitle { clear: both; height: 50px; background: #333; }
.PageTitleContainer { padding: 12px; }
.PageTitle h1 { font: bold 110% arial, sans-serif; color: #fff; border-bottom: 2px solid #c0d021; }

.NavStubs { clear: both; background: #555; }
.NavStubsContainer { padding: 12px 12px 16px 12px; }
.NavStubs span { font: bold 75% arial, sans-serif; color: #eee; }
.NavStubs a { color: #eee; text-decoration: none; border-bottom: 1px solid #eee; }

.SubTitle { clear: both; background: #ccc; }
.SubTitleContainer { padding: 16px 12px 16px 12px; }
.SubTitle h2 { font: bold 90% arial, sans-serif; }

.Content { width: 100%; clear: both; display: table; background: #fff; }
.ContentContainer { display: table; padding: 24px 16px 4px 16px; background: #fff; }
.ContentContainerTable { display: table; padding: 12px 12px 4px 12px; background: #fff; }
.Content p { margin: 0 0 24px 0; font: normal 95% arial, sans-serif; text-align: justify; }
.Content h2, .Content h5 { margin: 0 0 12px 0; font: bold 80% arial, sans-serif; }
.ContentContainer a { text-decoration: none; color: #111; border-bottom: 1px solid #949d35; }

.NavByBrand { width: 720px; clear: both; display: table; padding: 16px 0 16px 0; }
.NavBySection, .GridProducts { width: 720px; clear: both; display: table; padding: 32px 0 16px 0; }
.NavBySection img { padding: 0 0 4px 0; border: 1px solid #ddd; border-bottom: 0; vertical-align: middle; }
.NavBySection img:hover { border: 1px solid #ccc; border-bottom: 0; }

.Section { padding: 0 0 32px 32px; text-align: center; float: left; }
.SectionFooter { width: 102px; height: 60px; background: #ddd; }
.SectionFooter:hover { background: #ccc; }
.SectionBrandFooter { width: 102px; background: #ddd; }
.SectionBrandFooter:hover { background: #ccc; }
.SectionFooterContainer { padding: 4px 6px 12px 6px; }
.SectionFooterContainer a { font: bold 70% arial, sans-serif; color: #111; text-decoration: none; }
.SectionFooterContainer a:hover { text-decoration: underline; }

.GridProducts { clear: both; }
.GridProducts img { vertical-align: middle; }
.GridProducts a { color: #111; text-decoration: none; }
.GridProducts a:hover { text-decoration: underline; }
.GridProducts span.OurPrice { font-weight: bold; color: #2e5d2f; }

.GridProduct { padding: 0 0 24px 18px; float: left; }
.GridProductMain { width: 330px; height: 166px; clear: both; }
.GridProductMain p { margin: 0; padding: 0; font: normal 60% arial, sans-serif; }
.GridProductImg { width: 150px; height: 166px; float: left; text-align: left; }
.GridProductImgContainer { padding: 8px 0 8px 0; }
.GridProductDetail { width: 180px; height: 170px; background: #eee; float: left; clear: right; }
.GridProductDetailTop { width: 180px; height: 140px; clear: both; }
.GridProductDetailBottom { width: 180px; height: 30px; clear: both; }
.GridProductDetailBottomContainer { padding: 0 8px 0 0; text-align: right; }
.GridProductDetailContainer { padding: 8px; }
.GridProductDetailTitle { width: 180px; clear: both; display: table; background: #ddd; border-bottom: 1px solid #bbb; text-align: right; }
.GridProductDetailTitleContainer { padding: 2px 8px 3px 8px; }
.GridProductDetailTitle span { font: bold 70% arial, sans-serif; color: #333; }
.GridProductDetailContent { width: 168px; border: 1px solid #ddd; display: table; clear: both; }
.GridProductDetailContentContainer { padding: 4px; }
.GridProductTitle, .GridProductBrandTitle { width: 330px; clear: both; background: #bbb; display: table; font: bold 70% arial, sans-serif; text-align: left; }
.GridProductBrandTitle { background: #eee; }
.GridProductBrandTitleLeft { width: 200px; float: left; }
.GridProductBrandTitleRight { width: 130px; float: left; clear: right; }
.GridProductBrandTitleRightContainer { padding: 10px 4px 0 4px; }
.GridProductTitleContainer { padding: 12px 6px 12px 6px; }
.GridProductFooter { width: 330px; clear: both; background: #ddd; border: 1px solid #bbb; border-left: 0; border-right: 0; display: table; font: normal 70% arial, sans-serif; text-align: right; }
.GridProductFooterContainer { padding: 8px; }

.ColourSwab { width: 20px; height: 20px; margin: 0 4px 0 0; display: block; float: right; }
.ColourSwabRow { width: 20px; height: 10px; clear: both; display: block; }

.RelatedProductIcon { width: 25px; height: 25px; margin: 0 4px 4px 0; background: #fff; border: 1px solid #aaa; display: block; float: left; text-align: center; vertical-align: middle; }

.ProductView, .ProductViewMain  { width: 720px; display: table; clear: both; }
.ProductViewMain div.Left { width: 260px; float: left; }
.ProductViewMain div.Right { width: 460px; float: left; clear: right; }

.ProductImages { width: 260px; clear: both; padding: 16px 0 0 0; background: #ccc; display: table; }
.ProductImg { width: 230px; height: 230px; background: #fff; display: table; margin: 0 auto 16px auto; }

.ProductSpec { display: table; clear: both; border-bottom: 1px solid #ccc; }
.ProductSpecHeader { float: left; min-width: 120px; background: #eee; }
.ProductSpecDetail { float: left; clear: right; }
.ProductSpecContainer { padding: 8px; }
.ProductSpec p { padding: 0; margin: 0; }
.ProductSpec a { text-decoration: none; color: #111; border-bottom: 1px solid #949d35; }

.ProductPricing { clear: both; display: table; }
.ProductPricingLeft { width: 220px; float: left; }
.ProductPricingRight { width: 240px; float: left; clear: right; background: #fff; text-align: center; }
.ProductPricingHeader { width: 110px; float: left; background: #eee; }
.ProductPricingDetail { width: 110px; float: left; clear: right; }
.ProductPricingDetail p { text-align: right; }
.ProductPricingRightContainer { padding: 16px; }

.AddToBasket select { font: normal 80% arial, sans-serif; display: block; margin: 0 0 12px 0; border: 1px solid #ccc; }
.AddToBasket span { font: normal 80% arial, sans-serif; }
.AddToBasket input.Qty { display: inline; font: normal 80% arial, sans-serif; margin: 0 0 12px 0; border: 1px solid #ccc; padding: 4px; }

.AddToBasketBtn { width: 460px; clear: both; display: table; background: #fff; }
.AddToBasketBtnContainerLeft { padding: 8px; }
.AddToBasketBtnContainerRight { padding: 8px 8px 8px 8px; }
.AddToBasketBtnLeft { width: 230px; float: left; }
.AddToBasketBtnRight { width: 230px; float: left; clear: right; text-align: center; }

.ProductAvailabilityLabel { margin: 0 0 12px 0; padding: 6px; display: block; font: bold 80% arial, sans-serif; background: #ddd; }

.GoogleMap { width: 100%; background: #fff; display: table; }
.GoogleMapLeft { width: 370px; float: left; }
.GoogleMapLeftContainer { padding: 16px 16px 16px 16px; }
.GoogleMapRight { width: 250px; float: left; }
.GoogleMapRightContainer { padding: 12px 0 12px 0; }
.GoogleMapRight div.Map { width: 320px; height: 290px; border: 1px solid #aaa; }

.ShopTour { display: table; width: 100%; clear: both; }
.ShopTourLeft { width: 50%; float: left; }
.ShopTourRight { width: 50%; float: left; clear: right; }
.ShopTourRightContainer { text-align: center; padding: 12px; }

.GroupsList, .SiteMapList { padding: 4px 16px 12px 32px; list-style-type: circle; }
.GroupsList li, .SiteMapList li { margin: 0 0 12px 0; font: normal 90% arial, sans-serif; }

.ServiceList { padding: 4px 16px 0 16px; list-style-type: circle; }
.ServiceList li { margin: 0 0 20px 0; font: normal 90% arial, sans-serif; text-align: justify; }

.Addresses input, .DeliveryTariff input { padding: 4px; margin: 0 0 16px 0; border: 1px solid #aaa; }
.Addresses textarea, .Addresses select { margin: 0 0 16px 0; }
.Addresses td.Left { width: 200px; }
.Addresses td.Right { width: 180px; }

.Address { clear: both; display: table; }
.AddressLeft { width: 200px; float: left; }
.AddressRight { width: 200px; float: left; clear: right; }

.DeliveryTariff select, .DeliveryTariff textarea { margin: 0 0 16px 0; }
.DeliveryTariff option { font: normal 90% arial, sans-serif; color: #111; }

.SearchFilters { display: table; clear: both; }
.SearchFiltersColumn { float: left; }
.SearchFiltersColumnEnd { float: left; clear: right; }
.SearchFiltersColumnContainer { padding: 16px 16px 24px 16px; }

.AgreeTerms { padding: 0 0 12px 0; }
.AgreeTerms span { font: normal 80% arial, sans-serif; vertical-align: middle; }
.AgreeTerms input { margin: 0 4px 0 8px; vertical-align: middle; display: inline; }
.AgreeTerms label { display: inline; }

.ButtonBar { width: 720px; clear: both; background: #fff; display: table; }
.ButtonBarLeft { float: left; }
.ButtonBarRight { float: left; clear: right; text-align: right; }
.ButtonBarContainer { padding: 12px 8px 8px 8px; }
.ButtonBar input { margin: 0 4px 0 0; }

.Buttons { clear: both; text-align: right; }

.BasicTable { width: 720px; background: #fff; text-align: left; }
.BasicTable th { padding: 12px; color: #fff; background: #333; }
.BasicTable td { padding: 12px; color: #111; background: #eee; border-bottom: 1px solid #888; }
.BasicTable a { color: #111; border-bottom: 1px solid #949d35; text-decoration: none; font-weight: normal; }

.FirstItem td { background: #ccc; }
.SubTotal td { background: #bbb; }
.NetTotal td { background: #aaa; }

.Messages { clear: both; background: #555; }
.Messages ul { padding: 16px 16px 4px 24px; list-style-type: circle; }
.Messages li { padding: 0 0 12px 0; font: normal 90% arial, sans-serif; color: #fff; text-align: justify; }

.Footer { width: 720px; margin: 0 0 12px 0; clear: both; display: table; background: #444; text-align: center; }
.FooterContainer { padding: 12px 8px 12px 8px; }
.Footer p { font: normal 90% arial, sans-serif; color: #fff; display: inline; }

.SectionActionImg { clear: both; }
.ImageRight { padding: 0 0 24px 24px; float: right; }

.ReqPriceMatchBtn { margin: 12px 0 8px 0; text-align: center; }

.TextBold { font-weight: bold; }
.TextAlignCenter { text-align: center; }
.TextAlignRight { text-align: right; }
.DisplayBlock { display: block; }
.NoBorder { border: 0; }
.FloatRight { float: right; }
.ClearBoth { clear: both; }

th { font: bold 80% arial, sans-serif; }
td { font: normal 80% arial, sans-serif; }
th.Checkbox, td.Checkbox { width: 12px; text-align: center; }
th.Description, td.Description { text-align: left; }
th.Brand, td.Brand { width: 95px; }
th.Id, td.Id { width: 26px; text-align: center; }
th.Qty, td.Qty { width: 38px; text-align: center; }
th.DateTime, td.DateTime { width: 90px; text-align: left; }
th.Date, td.Date { width: 50px; text-align: center; }
th.Time, td.Time { width: 20px; text-align: center; }
th.Name, td.Name { width: 60px; }
th.Status, td.Status { width: 24px; text-align: center; }
th.Amount, td.Amount { width: 84px; text-align: right; }
th.Weight, td.Weight { width: 74px; text-align: right; }
th.Tracking, td.Tracking { width: 120px; text-align: right; }

input.Qty { text-align: center; }
input.Amount { text-align: right; }
