﻿/* General Styles */
* { padding: 0; margin: 0; }
body { }
h1, h2, h3, h4, h5 { clear: both; margin: 0px; }
h1 { padding: 2px 5px 2px 5px; }
h2 { padding: 5px; text-align: center; }
h3 { padding: 6px 0px 6px 10px; }
.List h3 { padding: 2px; height: 30px; overflow: hidden; clip: rect(auto, auto, auto, auto); text-align: center; }
.ProductListWrapper-Summary .List h3 { padding: 2px; height: 16px; overflow: hidden; clip: rect(auto, auto, auto, auto); text-align: left; }
h4 { padding: 2px; text-align: center; }

p { margin: 0px 0px 8px 0px; line-height: 1.5em; }

ul { margin-left: 15px; padding-left: 15px; list-style-type: disc; line-height: 1.5em; }
li { }

.clear { clear: both; }
.float-right { float: right; }
.float-left { float: left; }

/* Master Page Styles */
#Master-Wrapper { width: 980px; margin: 0 auto; }
#Master-Header { width: 980px; margin: 0 0 5px 0; position: fixed; top: 0; z-index: 100; height: 120px; border-style: none solid none solid; border-width: 4px; }
#Master-Body { width: 980px; position: absolute; top: 120px; border-style: none solid none solid; border-width: 4px; }

/* Header */
#Master-Header-Left { float: left; width: 400px; height: 80px; }
#Master-Header-Centre { float: left; width: 280px; padding: 30px 0 0 0; text-align: center; }
#Master-Header-Right { float: left; width: 280px; padding: 10px; text-align: right; }

.Master-Searchbox { width: 160px; padding: 4px 0px 3px 5px; border-style: solid; border-width: 1px; display: inline; }
.Master-Searchbutton { border-style: solid; border-width: 1px; margin: 0px 0px 0px 3px; padding: 4px 2px 2px 2px; }

/* Menu */
.menu { border: none; border: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; }
.menu ul { background: #333333; height: 35px; list-style: none; margin: 0; padding: 0; }
.menu li { float: left; padding: 0px; }
.menu li a, .menu li h3 { background: #333333 url("images/m-sep.gif") bottom right no-repeat; color: #F4F4F4; display: block; font-weight: normal; line-height: 35px; margin: 0px; padding: 0px 25px; text-align: center; text-decoration: none; }
.menu li a:hover, .menu ul li:hover a, .menu li h3:hover, .menu ul li:hover h3 { background: #2580a2 url("images/m-hover-down.gif") bottom center no-repeat; color: #FFFFFF; text-decoration: none; }
.menu li ul { background: #333333; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; position: absolute; width: 225px; z-index: 200; }
.menu li:hover ul { display: block; }
.menu li li { background: url('images/m-sub-sep.gif') bottom left no-repeat; display: block; float: none; margin: 0px; padding: 0px; width: 225px; }
.menu li:hover li a { background: none; }
.menu li ul a { display: block; height: 30px; font-size: 12px; font-style: normal; margin: 0px; padding: 0px 10px 0px 15px; text-align: left; }
.menu li ul a:hover, .menu li ul li:hover a { background: #2580a2 url('images/m-hover-sub.gif') center left no-repeat; border: 0px; color: #ffffff; text-decoration: none; }
.menu p { clear: left; }

/* Right Column */
#Master-Right { width: 190px; margin: 0 5px 0 0; height: 1400px; float: right; }
#Master-Right .links { text-align: center; }
#Master-Right .sqbanner { margin: 10px; }
#Master-Right ul { margin: 5px 5px 10px 5px; list-style-type: square; }

#finder { padding: 5px 0px 5px 0px; text-align: center; border-bottom-style: solid; border-bottom-width: 1px; margin: 0 0 10px 0; }
#finder select { width: 160px; padding: 1px; margin: 2px 0px 2px 5px; }

/* Centre Column */
#Master-Centre { width: 772px; margin: 0 0 0 5px; float: left; }

/* Footer */
#Master-Footer-Top { clear: both; text-align:center; padding: 5px 0px; border-top-style: dotted; border-top-width:1px; }
#Master-Footer { width: 980px; clear: both; padding: 5px 0 5px 0; text-align: center; }
#Master-Footer-Links { width: 980px; height: 110px; }
#Master-Footer-Links-Left { float: left; height: 110px; width: 320px; border-right-style: solid; border-right-width: 3px; }
#Master-Footer-Links-Middle { float: left; height: 110px; width: 320px; border-right-style: solid; border-right-width: 3px; text-align: center; }
#Master-Footer-Links-Right { float: left; height: 110px; width: 320px; text-align: right; }
.footer-field1 { margin: 10px; }
.footer-field2 { margin: 0px 10px 10px 0px; }
.footer-field3 { margin: 10px 0 0 0; }
.footer-field4 { margin: 5px; }
.footer-field5 { }

/* Breadcrumb */
.Breadcrumb { margin: 0px 5px; }

/* Product List Style */
.ProductListWrapper, .ProductListWrapper-Brief, .ProductListWrapper-Summary { }
.ProductListWrapper .List { border-style: solid; border-width: 1px; margin: 0 0 10px 4px; width: 250px; float: left; height: 220px;}
.ProductListWrapper-Brief .List { margin: 0 0 10px 4px; border-style: solid; border-width: 1px; width: 147px; float: left; }
.ProductListWrapper-Summary .List { border-style: solid; border-width: 1px; height: 116px; margin: 2px; float: left; width: 186px; }

.ProductList-Sort { text-align: right; padding: 2px; margin: 0px 0 2px 0; clear: both; }
.ProductList-SortDropDown { width: 130px; }
.ProductList-Header { }

.ProductList-Detail { padding: 0 2px; margin: 0 0 2px; }
.ProductList-Detail b { }
.ProductList-Detail img { margin: 10px; }

.ProductList-Footer { border-style: solid; border-width: 1px; }
.ProductList-Footer p { padding: 0 5px; }

.ProductList-Footer .LinkHeading { padding: 5px 0 10px 0; text-align: center; }
.ProductList-Footer .LinkImage { text-align: center; }
.ProductListWrapper .ProductList-Attributes { text-align: center; clear: both;}
.ProductListWrapper-Brief .ProductList-Attributes { text-align: center; height: 38px; overflow: hidden; clip: rect(auto, auto, auto, auto); }

.ProductListAttribute-CommonName, .ProductListAttribute-Position { display: block; }

.ProductListWrapper-Summary .Body { padding: 2px 4px; text-align: center; }

.ProductListWrapper .ProductImage { float: left; width: 160px; height: 160px; text-align: center; }
.ProductListWrapper-Brief .ProductImage { width: 145px; height: 145px; text-align: center; }
.ProductListWrapper-Summary .ProductImage { float:left; width: 90px; height: 90px; text-align: center; }
.ProductListWrapper .ProductImage img { max-width: 160px; max-height: 160px; }
.ProductListWrapper-Brief .ProductImage img { max-width: 145px; max-height: 145px; }
.ProductListWrapper-Summary .ProductImage img { max-width: 90px; max-height: 90px; }

.ProductListWrapper .ProductDescription, .ProductListWrapper-Brief .ProductDescription { height: 100px; overflow: hidden; clip: rect(auto, auto, auto, auto); text-align: center; }
.ProductListWrapper-Summary .ProductDescription { height: 90px; overflow: hidden; clip: rect(auto, auto, auto, auto); text-align: center; }
.ProductDescription p { line-height: 1em; }

.ProductListWrapper .ProductList-Availability { float: right; min-height: 50px; text-align: center; }
.ProductListWrapper-Brief .ProductList-Availability { min-height: 50px; text-align: center; }

/* Product Detail Styles */
.ProductDetailWrapper { }
.ProductDetail { }
.ProductDetail-Header { }
.ProductDetail-Body {  }

.ProductDetail-Image { width: 350px; float: left; text-align:center; margin-top: 5px;}
.ProductDetail-Image img { max-width: 350px; margin: 0 0 10px 0;}

.ProductDetail-Availability { float: right; width: 400px; text-align: center; border: 1px solid #CCCCCC; margin-top:5px; padding-bottom:5px; }
.ProductDetail-Description { float: right; width: 400px; }
.ProductDetail-Attributes { margin: 0px 0 10px 0; }
.ProductDetail-FurtherDetails { margin: 0px 0 10px 0; }
.ProductDetail-Range { clear: both; padding: 10px 0; }
.ProductDetail-RelatedCategories { clear: both; }
.ProductDetail-RelatedCategories ul { list-style-type: none; padding-left: 0px; margin: 0px; }
.ProductDetail-RelatedCategories li { border-style: dotted; border-width: 1px; float: left; text-align: center; width: 186px; margin: 1px; }

/* Deeplink */
.DeepLink { }
.ProductList-Availability .DeepLink { width: 88px; }
.DeepLink-Retailer { padding: 2px 0px; }
.DeepLink-Retailer img { border-style: solid; border-width: 1px; }
.DeepLink-Price { margin: 0px 5px; }
.ProductList-Availability .DeepLink-Price { width: 78px; }
.DeepLink-Button { }
.ProductList-Availability .DeepLink-Button img { width: 88px; height: 25px; }

/* Datafeed Products */
.datafeedProduct { padding: 10px 2px; width: 120px; float: left; }
.datafeedProductImage { text-align: center; height: 120px; display:block; }
.datafeedProductImage img { max-height: 120px; max-width: 120px; }
.datafeedProductName { text-align: center; height: 28px; overflow: hidden; font-size: 10px; display:block; }
.datafeedProductMerchant { text-align: center; display:block; }
.datafeedProductPrice { text-align: center; font-size: 16px; font-weight: bold; text-align: center; display:block; }

/* Retailer */
.Retailers { margin: 0 0 10px 0; }
.Retailers-ProductList { width: 356px; float: right; margin: 0 0 0 5px; }
.Retailer { border-left: solid 1px; border-right: solid 1px; border-top: solid 1px; border-bottom: solid 1px; margin: 0px 0px 2px 0px; }
.Retailers .Retailer { }
.Retailers-ProductList .Retailer { }
.Retailer-Vouchers { }
.Retailer-Voucher { border-top-style: dotted; border-top-width: 1px; padding: 2px; }

/* Form Page Style */
.formDetail { margin: 10px 5px 10px 5px; }
.formLabel { margin: 5px 5px 2px 5px; }
.formField { margin: 5px 5px 10px 5px; }

/* Table */
table { border-style: solid; border-width: 1px; border-collapse: collapse; width: 100%; }
table thead tr { height: 40px; padding: 10px; }
table td { border-width: 1px; padding: 5px; text-align: center; vertical-align: middle; }

/* Normal Text looking hyperlinks */
.normal { text-decoration: underline; }
.normal:hover { text-decoration: underline; }

/* Font Family */
h1, h2, h3, h4, h5, h6, body, .Master-Searchbutton { font-family: Arial, Helvetica, sans-serif; }

/* Font Size */
body, .Master-Searchbox, .Master-SearchButton, .List h3 { font-size: 12px; }
h1 { font-size: 24px; }
h2, .ProductList-Footer .LinkHeading, .DeepLink-Price { font-size: 18px; }
h3, h4, .ProductDetail h2 { font-size: 14px; }
.Breadcrumb { font-size: 12px; }
.ProductList-Attributes { font-size: 9px; }
#Master-Footer { font-size: 10px; }
.ProductListWrapper .ProductDescription, .ProductListWrapper-Brief .ProductDescription, .ProductListWrapper-Summary .ProductDescription, .Retailers .Retailer .Retailer-Voucher, .ProductList-Sort, .ProductList-SortDropDown, .Retailer-Voucher { font-size: 11px; }

/* Font Weight */
b, h1, h2, h3, h4, h5, h6, .Master-SearchButton, .ProductListWrapper .Header, .ProductListWrapper-Brief .Header, .ProductDetail-Header, table thead tr { font-weight: bold; }
body, .Master-SearchBox { font-weight: normal; }

/* Font Style */
h1, h2, h3, h4, h5, h6, body { font-style: normal; }

/* Color */
body, .normal, .List h3 { color: #333333; /*DarkGrey*/ }
h1, h2, h3, .Master-Searchbutton, #Master-Footer a, #Master-Footer, .Retailer-Voucher i { color: #FFFFFF; /*White*/ }
.Retailer-Voucher b { color: #DC143C; /*Crimson*/ }

/* Background Color */
body { background-color: #8B0000; /*Dark Red*/ }
.ProductList-Footer .LinkHeading, .List h3, h4 { background-color: #E6E6E6; /*LightGrey*/ }
#Master-Wrapper, #Master-Header, #Master-Body, #Master-Right, #Master-Centre, .ProductListWrapper .List, .ProductListWrapper-Brief .List, .ProductDetail, .ProductDetail-Body, table thead tr { background-color: #FFFFFF; /*White*/ }

.Master-Searchbox, #finder, .ProductList-Sort { background-color: #F7F5EF; /*Very Light Grey*/ }
.Master-Searchbutton { background-color: #DB1B25; /*Bright Dark Red*/ }
table thead tr { background-color: #437934; /*Green*/ }
h2, h3, #Master-Footer, h1 { background-color: #808080; /*Grey*/ }
.Retailer { background-color: #FFF5EF /*Light Pink*/; }
.Retailer-Voucher i { background-color: #DC143C; /*Crimson*/ }

/* Border Color */
#Master-Header, #Master-Body, table, table td, .ProductListWrapper .List, .ProductListWrapper-Brief .List, .ProductDetail, #Master-Footer-Links-Left, #Master-Footer-Links-Middle, .Retailer, #finder { border-color: #ACACAC; /*Grey*/ }
.Master-Searchbox, .Master-Searchbutton { border-top-color: #ACACAC; /*Grey*/ border-left-color: #ACACAC; /*Grey*/ border-right-color: #E6E6E6; /*LightGrey*/ border-bottom-color: #E6E6E6; /*LightGrey*/ }
.ProductListWrapper-Summary .List, .ProductList-Footer, .DeepLink-Retailer img { border-color: #E6E6E6; /*LightGrey*/ }
.ProductDetail-RelatedCategories li a { border-color: #ACACAC; /*Grey*/ }
#Master-Footer-Top, .Retailers h4 { border-color: #333333; /*DarkGrey*/ }



