/* RESET.css */ body {color:#000; background:#FFF;min-width: 1000px;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin:0; padding:0;} h1, h2, h3, h4, h5, h6, input, textarea, select {font-size:1.0em; font-weight:normal;} table {border-collapse:collapse; border-spacing:0;} fieldset, img {border:0;} li {list-style:none;} em, strong, th {font-style:normal; font-weight:normal;} caption, th {text-align:left;} /* global.css - www.whistles.co.uk */ /* SITE COLOURS */ /* Blue Menu Box = #e8e8e8 */ /* Yellow Highlight = #e2ff2c */ /* Standard Text = #3d3a3a */ /* Light Text = #938c8a */ /* Nav Separators = #cbcbcb */ /* Basket Input BG = #dbdbdb */ /* Call-To-Action Blue = #299cff */ /* Header Text = #3d3a3a */ /* Footer Text = #575757 */ /* RESET */ * {padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* UTILS */ .left {float: left;} .right {float: right;} .clear {clear:both;} .cf:before, .cf:after {content:""; display:table;} .cf:after {clear:both;} .cf {zoom:1;} .hidden {display: none !important; visibility: hidden;} .visuallyhidden {border: 0 none; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} .wide{display: none;} html {font-size: 100%;} /* HEADER */ body {margin:0; padding: 0;font: 12px/1.1em Arial,Verdana,sans; background:#fff; text-align: center;} h1 {font-size:3.2em;} h2 {font-size:2.4em;} h3 {font-size:2em;} h4 {font-size:1.4em;} h5 {font-size:1.2em;} h6 {font-size:1em;} p {color:#3d3a3a; line-height:1.5em;} a{outline: none;} a img {border: 0;} #wrapper {width: 100%; text-align:left;} #header {margin: 0 auto; width: 960px; height: 196px; text-align:left; background: #fff url(/pws/images/header-bg.gif) 0 19px repeat-x;} #headerPromo {margin: -183px auto 0 auto; width: 960px; height: 183px; background:url(/pws/images/homepage-sale-bg.jpg) 0 0 repeat-x; text-align:center;} #headerPromoText {margin: 0 auto; padding: 0 0 24px 0; width:300px; background:url(/pws/images/homepage-sale-point-bg.png) bottom center no-repeat;} #headerPromoText p {background: #fff; color: #000; font-family:Georgia, "Times New Roman", Times, serif;} #headerPromoText p.sale {font-size:30px; line-height:1.5em; text-transform:uppercase;} #headerPromoText p.subSale {font-size: 20px; line-height:1.2em;} /* TODO: Cufon hack for text-variant:small-caps http://www.unitz.com/u-notez/2010/06/a-cufon-small-caps-hack/ */ /* center the header in 960 & 1280 */ #header {position:relative;} #accountCol {position:absolute; top:0; left: 0; z-index:1;} #headerCol {position:absolute; top:25px; left:50%; width: 500px; margin-left:-250px; text-align:center; z-index:0;} #shoppingCol {position:absolute; top:0; right:0; z-index:1;} #categoryNav {position:absolute; top:158px; left: 50%; width:960px; margin-left:-480px; text-align:center; z-index:0;} .ie #categoryNav {top:141px;} #mainNav {display:inline-block; text-align:center;} #mainCont {margin: 10px auto 0 auto; width: 960px; overflow:hidden;} #footer {margin: 0 auto; padding: 20px 0; width: 960px; background:#fff;} /* NAV */ /* Level 1 Vertical Nav */ #header ul {margin: 0; padding: 0; list-style: none; font-size:11px;} #header ul li {display: block; position: relative; width:210px; border-bottom:1px solid #cbcbcb; background:url(/pws/images/header-arrow-right.gif) 190px 15px no-repeat;} #header ul li#search {background-image:none;} #header ul li:hover {background: #e8e8e8 url(/pws/images/header-arrow-down.gif) 180px 20px no-repeat;} #header ul li a {display:block; padding: 18px 15px; color:#3d3a3a; text-decoration: none; text-transform:uppercase; white-space: nowrap;} #header ul li a:hover {background:#e8e8e8 url(/pws/images/header-arrow-right.gif) 190px 15px no-repeat;} #header li.last {border-bottom: none;} #header li.last a {padding-bottom:14px;} #header #phoneNum {display: none;} #header #cs:hover #phoneNum {display:block; line-height: 2em;} #header #cs:hover > a {padding-bottom: 5px;} #header #accountCol .no-link a {color:#938c8a;} #header #accountCol .no-link, #header #accountCol .no-link:hover, #header #accountCol .no-link:hover a {background: none;} #header #accountNav {top:39px;} /* Level 2 Vertical Nav Left */ #header li:hover li {background-position: 268px 10px;} #header li.level_1:hover li a:hover {background: #e2ff2c url(/pws/images/header-arrow-right.gif) 268px 10px no-repeat;} #header #accountCol li ul {display:none;} #header #accountCol li:hover ul, li:hover #shoppingBag {display: block; position: absolute; z-index:1;} #header #accountCol ul ul {border:10px #e8e8e8 solid; background: #fff;} #header ul li li {width: 285px;} #header ul li li a {padding: 13px 15px 13px 15px;} /* Level 2 Vertical Nav Right */ #header #shoppingCol li:hover ul, #header #shoppingCol li:hover #shoppingBag {right: 0;} /* Level 1 Horizontal Nav */ #header #mainNav .current, #mainNav li.selected a{background: url(/pws/images/current.png) center -1px no-repeat;} #header #mainNav {background:none;} #header #mainNav li {display: inline;} #header #mainNav li a {float:left; min-width: 35px; padding:25px 15px 26px 15px; font-size: 11px;} #header #mainNav li a:hover {background: url(/pws/images/hover.png) 7px 46px no-repeat;} /* Level 1 Category Nav */ #header #categoryNav {} #header #categoryNav .current, #header #categoryNav li.selected a {background: url(/pws/images/current.png) center 0px no-repeat;} #header #categoryNav ul {margin: -17px 0 0 0; display: inline-block;} #header #categoryNav li {display: inline;} #header #categoryNav li a {float:left; padding:25px 15px 36px 15px; font-size: 11px; background: none;} #header #categoryNav li a:hover {background: url(/pws/images/hover.png) center 46px no-repeat;} #header #freeShipping a.circle, #header #freeShipping a.circle:hover {background: url(/pws/images/free-shipping-bg.png) center 0 no-repeat; color:#fff; width:82px; height:82px;margin-top:-10px; padding-top:28px;} /* Level 2 Vertical Nav Right (SHOPPING BAG) */ /* Shopping Bag / MiniBasket */ #header #bag {position: relative; height:50px;} #header #shoppingBag {position:absolute; top:-9999px; right:0px; z-index:2;} #header li:hover #shoppingBag {top:49px;} #header table {border:0;} #header #miniBasket tr.last > td {border-bottom:none;} #header #shoppingBag {border:10px solid #e8e8e8; display:block;} #header #shoppingBag table {background: #fff; border-collapse:collapse;} #header #shoppingBag em {font-weight:bold; font-style:normal;} #header #shoppingBag td {border-bottom: 1px solid #e8e8e8; padding:0;} #header #shoppingBag td.prodImage {padding-left:10px;} #header #shoppingBag td.prodDetails {max-width:160px;} #header td.checkout {border-top: 10px solid #e8e8e8; padding:0;} #header #shoppingBag #proceedToCheckout {height: 60px; font-size:14px; padding: 0 0 0 22px; color: #fff; text-transform:inherit; line-height: 60px; background: #299cff url(/pws/images/white-arrow-right.gif) 403px 16px no-repeat;} #header #nextDelivery {padding: 0 0 0 22px;} #header #proceedToCheckout span {font-weight: normal}; #header #shoppingBag td.last {border: none; background: #e8e8e8; padding: 0;} #header #shoppingBag td a {padding:0;} #header table td a:hover {background: none;} #header p.emptyMiniBasket {background: #fff; text-align:center; padding:20px 0; min-width:190px;} #header .productQty a, #header .productQty input {width: 34px; height: 34px; padding:0; margin: 0; float:left;} #header .productQty .decreaseProdBasket {margin: 0 2px 0 0; text-indent:-9999em; background:url(/pws/images/basket-product-qty.jpg) 0px 0px no-repeat;} #header .productQty .increaseProdBasket {margin: 0 0 0 2px; text-indent:-9999em; background:url(/pws/images/basket-product-qty.jpg) -35px 0px no-repeat;} #header .productQty .decreaseProdBasket:hover {background-position: 0px -35px;} #header .productQty .increaseProdBasket:hover {background-position: -35px -35px;} #header .productQty input {text-align: center; border: none; background: #dbdbdb; line-height:34px;} #header .productQty {border-right: 1px solid #ebebeb;} #header #shoppingBag .productQty .remove {text-transform: capitalize; padding: 18px 0 0 0;} #header .remove:hover {text-decoration:underline;} #header #shoppingBag #emptyShoppingBag {background: #e8e8e8; text-decoration: underline; text-transform:lowercase; padding: 5px 0 0 22px;} /* Currency Picker */ #header li ul#currencyPicker {display:block;} #header #currencyList {position: relative;} #header .currencyScroll {position:absolute; top:-9999px; right:0px; z-index:2; border:10px #e8e8e8 solid; background: #fff;} #header li#currency:hover .currencyScroll {top:49px;} #header ul#currencyPicker li {width:226px;border-right: 1px solid #e8e8e8; border-bottom:1px solid #e8e8e8;} /* Shopping Bag Scrolling */ #header .bagScroll {width: 100%; max-height: 324px; overflow: auto;} #header .currencyScroll {width: 300px; max-height: 240px; overflow: auto;} #header .jspContainer {overflow: hidden; position: relative;} #header .jspPane {position: absolute;} #header .jspVerticalBar {position: absolute; top: 0; right: 0; width: 34px; height: 100%; background: #fff;} #header .jspVerticalBar * {margin: 0; padding: 0;} #header .currencyList .currencyScroll .jspVerticalBar {right:20px;} #header .jspTrack {background: #fff; position: relative;} #header .jspDrag {background: #e2ff2c; position: relative; top: 0; left: 0; cursor: pointer;} #header .jspArrow {background: url(/pws/images/scrollbar-arrowheads.gif) 0 0 no-repeat; text-indent: -9999em; display: block; cursor: pointer;} #header .jspArrowUp, #header .jspArrowUp:hover {background: url(/pws/images/scrollbar-arrowheads.gif) 0 0 no-repeat;} #header .jspArrowDown, #header .jspArrowDown:hover {background: url(/pws/images/scrollbar-arrowheads.gif) 0 -34px no-repeat;} #header .jspArrow.jspDisabled {cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity:0.4;} #header .jspVerticalBar .jspArrow {height: 34px;} #header .jspVerticalBar .jspArrow:focus {outline: none;} /* Search Box */ #header #searchForm {position:relative;} #header #searchForm fieldset {margin:0; padding:0; border:none; height:46px;} #header #searchForm input {height: 46px; width:162px; padding: 0 0 0 15px; margin:0; border:none; background: #fff; position:absolute; top:0; left:0; z-index:0; font-size: 12px; color: #3d3a3a; text-transform:uppercase; line-height: 46px;} #header #searchForm button {height: 46px; width: 47px; border: none; background-color:transparent; position:absolute; top:0; right:0; z-index:-1; text-indent: -9999em; cursor: pointer;} #header #searchForm div.button {background:#fff url(/pws/images/header-arrow-right.gif) 26px 15px no-repeat; margin:0; padding:0; border-left:1px solid #e8e8e8; position:absolute; top:0; right:0; z-index:0; width: 48px; height: 46px;} #header #searchForm input:hover, #searchForm input:focus {background: #e8e8e8;} #header #searchForm div.button:hover {background: #e8e8e8 url(/pws/images/header-arrow-right.gif) 26px 15px no-repeat; border-left-color:#fff;} #header #searchForm div.button:active {background: #e2ff2c url(/pws/images/header-arrow-right.gif) 26px 15px no-repeat; border-left-color:#fff;} /* FOOTER */ #footer ul {float: right; width: 18%; text-align:left;} /* full width:755 for 960 & 1280 */ #footer ul li {background: none; border:none; font-size:11px; letter-spacing:1.4px; width:auto; padding: 3px 0;} #footer ul li.colHead {padding: 0 0 0 20px; color:#575757; text-transform:uppercase; border: none; height: 47px; line-height:47px; border-left: 1px solid #d3d1d0;} #footer ul li.last {border-right: 1px solid #d3d1d0; width: 150px;} #footer ul li a {padding: 7px 0 0 20px; color:#575757; text-decoration:none; text-transform:uppercase;} #footer ul li a:hover {background:none; text-decoration:underline;} #footer #footerTop {position: relative; height: 42px; border-top:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb; margin-bottom:37px;} #footer #footerTop #socialNetworking {position: absolute; top:0; left:10px; width:auto; line-height:40px;} #footer #footerTop #socialNetworking p {line-height: 40px; text-transform:uppercase;} #footer #footerTop #socialNetworking li {color:#3d3a3a; font-size:11px; display:inline; float:left; width:auto;} #footer #footerTop #socialNetworking li a{ height:40px; width: 40px; margin:0 10px; text-indent:-9999em; background-image:url(/pws/images/socialnetworking-sprite.png); background-repeat:no-repeat; display: block;} #footer #socialNetworking a#facebook, #footer #socialNetworking a#facebook:hover {background-position: 14px 0px;} #footer #socialNetworking a#twitter, #footer #socialNetworking a#twitter:hover {background-position: -46px 0px;} #footer #socialNetworking a#pinterest, #footer #socialNetworking a#pinterest:hover {background-position: -106px 0px;} #footer #socialNetworking a#sv, #footer #socialNetworking a#sv:hover {background-position: -167px 0px;} #footer #socialNetworking a#share, #footer #socialNetworking a#share:hover {background-position: -229px 0px;} #footer #footerTop #newsletter {position: absolute; top:0; right:0;} #footer #footerTop fieldset {width: 200px;} #footer #footerTop input {height: 40px; line-height: 40px; color:#3d3a3a; background:none;} #footer #footerTop input {width:250px; padding: 0 0 0 15px; margin:0; border:none; background: #fff; position:absolute; top:0; right:40px; z-index:0; font-size: 12px; color: #3d3a3a; text-transform:uppercase; line-height: 40px;} #footer #footerTop button {height: 40px; width: 40px; color:#e8e8e8; border: none; background-color:transparent; position:absolute; top:0; right:0; z-index:-1; text-indent: -9999em; cursor: pointer;} #footer #footerTop div.button {background:#fff url(/pws/images/email-submit.gif) 0px 0px no-repeat; margin:0; padding:0; border-left:1px solid #e8e8e8; position:absolute; top:0; right:0; z-index:0; width: 44px; height: 40px;} #footer #footerTop input:hover, #footer #footerTop input:focus {background: #e8e8e8;} #footer #footerTop div.button:hover {background: #e8e8e8 url(/pws/images/email-submit.gif) 0px 0px no-repeat; border-left-color:#fff;} #footer #footerTop div.button:active {background: #e2ff2c url(/pws/images/email-submit.gif) 0px 0px no-repeat; border-left-color:#fff;} #footer #copyright {width:960px; padding:45px 0 0 118px; clear:both;} #footer #copyright p {font-size:11px; letter-spacing:1.0px; text-transform:uppercase; color:#575757;} @media (min-width: 1280px) { /* NAV */ /* Level 1 Vertical Nav */ #header {width: 1280px; height: 196px; font-size:11px; background: #fff url(/pws/images/header-bg.gif) 0 19px repeat-x; /* margin-top:-30px; */} #headerPromo {width: 1280px;} #header ul li {width:300px;} #header li#account a:hover, #header li#cs a:hover {background: #e8e8e8 url(/pws/images/header-arrow-right.gif) no-repeat 279px 15px;} #header ul li.level_1 {background-position: 279px 15px; width: 147px;} #header ul li#account:hover, #header ul li#cs:hover {background:#e8e8e8 url(/pws/images/header-arrow-down.gif) 270px 20px no-repeat;} #header li#currency a:hover, #header li#bag a:hover {background: #e8e8e8 url(/pws/images/header-arrow-right.gif) no-repeat 126px 15px;} #header li#account > a {text-align: right; padding-right: 50px;} #header #user {float:left;} #header .wide {display: inline;} #header li#freeShipping {position:absolute; top:-17px; right: -125px; background: none; width: auto; border:none; z-index:5;} /* Level 1 Vertical Nav Right */ #header #bag {position:absolute; top:50px; right:0; z-index:0;} #header #currency {position:absolute; top:50px; right:153px; z-index:-1;} #header #search {position:absolute; top:100px; right:0; z-index:-2;} #header #shoppingBag a.jspArrowUp, #header li#bag #shoppingBag div.jspVerticalBar a.jspArrowUp:hover {background: url(/pws/images/scrollbar-arrowheads.gif) 0 0 no-repeat;} #header #shoppingBag a.jspArrowDown, #header li#bag #shoppingBag div.jspVerticalBar a.jspArrowDown:hover {background: url(/pws/images/scrollbar-arrowheads.gif) 0 -34px no-repeat;} #header p.emptyMiniBasket {min-width:280px;} /* Level 2 Vertical Nav Left */ #header #account {position:absolute; top:47px; z-index:-1;} #header #accountNav {z-index:2;} #header #account, #header #cs {width: 304px;} #header #accountCol #accountNav li, #accountCol #cs li{width:284px;} #header #cs {width: 304px; position:absolute; top:97px; z-index:-2;} #header #cs #phoneNum {position: absolute; top:18px; left: 169px; display: inline-block;} #header #cs:hover #phoneNum {top:14px;} #header #phone {display: none !important; visibility: hidden;} #header li#account #accountNav a, #header li#cs #supportNav a {background: #fff url(/pws/images/header-arrow-right.gif) 268px 10px no-repeat;} #header li#account #accountNav a:hover, #header li#cs #supportNav a:hover {background: #e2ff2c url(/pws/images/header-arrow-right.gif) 268px 10px no-repeat;} #header #accountCol #account ul li a:hover {background: #e2ff2c url(/pws/images/header-arrow-right.gif) 268px 10px no-repeat;} #header #accountCol li#cs {border-bottom: none;} /* Level 2 Vertical Nav Right */ #header li#currency, #header li#bag {background-position:126px 15px;} #header li#currency:hover, #header li#bag:hover {background:#e8e8e8 url(/pws/images/header-arrow-down.gif) 120px 20px no-repeat;} #header li#currency #currencyPicker a:hover {background: #e2ff2c url(/pws/images/header-arrow-right.gif) 284px 10px no-repeat;} #header li#currency:hover li{background-position:284px 10px;} /* Level 1 Horizontal Nav */ /* Level 1 Category Nav /* Level 2 Vertical Nav Right (SHOPPING BAG) */ /* Shopping Bag / MiniBasket */ #header #shoppingBag #miniBasket td.productQty a.decreaseProdBasket {margin: 0 2px 0 0; text-indent:-9999em; background:url(/pws/images/basket-product-qty.jpg) 0px 0px no-repeat;} #header #shoppingBag #miniBasket td.productQty a.decreaseProdBasket:hover {background-position: 0px -35px;} #header #shoppingBag #miniBasket td.productQty a.increaseProdBasket {margin: 0 0 0 2px; text-indent:-9999em; background:url(/pws/images/basket-product-qty.jpg) -35px 0px no-repeat;} #header #shoppingBag #miniBasket td.productQty a.increaseProdBasket:hover {background-position: -35px -35px;} #header #shoppingBag #miniBasket td.productQty a.remove:hover {background: none;} #header #shoppingCol #shoppingBag a#proceedToCheckout:hover {background: #299cff url(/pws/images/white-arrow-right.gif) 403px 16px no-repeat;} #header #shoppingCol #shoppingBag a#emptyShoppingBag:hover {background:#e8e8e8;} #header #shoppingCol #shoppingBag .prodImage a:hover {background: none;} /* Shopping Bag Scrolling */ #header #shoppingBag .jspArrow {background: url(/pws/images/scrollbar-arrowheads.gif) 0 0 no-repeat; text-indent: -9999em; display: block; cursor: pointer;} #header #shoppingBag .jspArrowUp, #shoppingBag .jspArrowUp:hover {background: url(/pws/images/scrollbar-arrowheads.gif) 0 0 no-repeat;} #header #shoppingBag .jspArrowDown, #shoppingBag .jspArrowDown:hover {background: url(/pws/images/scrollbar-arrowheads.gif) 0 -34px no-repeat;} /* Currency Picker Scrolling */ #header ul#currencyPicker li {width:226px; border-right: 1px solid #e8e8e8; border-bottom:1px solid #e8e8e8;} /* Search Box */ #header #searchForm input {width:256px; font-size:11px;} #header #searchForm div.button {background:#fff url(/pws/images/header-arrow-right.gif) 25px 15px no-repeat;} #header #searchForm div.button:hover {background: #e8e8e8 url(/pws/images/header-arrow-right.gif) 25px 15px no-repeat; border-left-color:#fff;} #header #searchForm div.button:active {background: #e2ff2c url(/pws/images/header-arrow-right.gif) 25px 15px no-repeat; border-left-color:#fff;} /* MAIN */ #mainCont {width: 1280px;} /* FOOTER */ #footer {width: 1280px;} }