/** * Header wrappers. */ #hd {} #nav-search {padding:0 5px;} #searchform-wrapper, #nav-search .navigation {float:right;} #nav-main {height:60px; background:#555 url('/static/site/graphics/prototype/stripes.png') repeat-y 0 0; color:#fff; font-size:12px; *display:block; *height:auto; _height:60px; width: 100%} #nav-main.nav-main-no-search {margin-top:41px;} #nav-location {background:#ddd; padding:9px 15px; margin-bottom:30px; position:relative; min-width:940px;} #nav-location-blank {padding:9px 15px 11px 15px; height:13px;} /** * Search form. */ #searchform-wrapper, #searchform-wrapper FORM, #searchform-wrapper P {display:block; margin:0; padding:0;} #searchform-wrapper {padding:10px 0;} #searchform-wrapper INPUT {display:block; float:left; margin:0; line-height:1; font-size:12px;} #searchform-wrapper INPUT.text {width:170px; border:1px solid #6d6e70; padding:3px 6px 3px 24px; color:#595a5c; background:#fff url('/static/site/graphics/prototype/search.png') no-repeat 4px 2px; *line-height:15px; *background-position-y:3px;} #searchform-wrapper INPUT.submit {border:none; padding:4px 4px 2px 7px; color:#6d6e70; background:#fff; text-transform:uppercase; *padding-top:5px;} /** * Utility links. */ #nav-search .navigation {margin-right:19px;} #nav-search .navigation li {padding:18px 0 14px; border:none;} #nav-search .navigation li a.nav-link {display:block; border-right:1px solid #555; padding:0 15px;} /*#nav-search .navigation {margin:0; padding:0; line-height:1;} #nav-search .navigation LI {display:block; float:left; margin:0; border-style:solid; border-width:0 1px 0 0; padding:0 9px; list-style:none;} */ #shopping-basket-link .basket-count {margin-left:10px;} #shopping-basket-link .basket-total {margin-left:6px;} /** * Logo. */ #logo {margin:0 0 -20px 0; *float:left; *margin:0; padding:0; width:205px; height:60px; background:url('/static/site/graphics/prototype/logo.png') no-repeat; _background:none; float: left; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/site/graphics/prototype/logo.png', sizingMethod='scale');} #logo A {position:absolute; display:block; text-decoration:none; text-indent:-9999px; width:205px; height:60px; } /** * Primary, secondary & footer navigation. */ #nav-wrapper {position:relative; float: left; *width:auto; *display:block; *margin-top:expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight - 2) / 2) + "px" : "0"); z-index: 15} .ie8 #nav-wrapper, .ie7 #nav-wrapper { margin-top: 0;} #nav-main .navigation {background:url('/static/site/graphics/prototype/menu-divider.png') no-repeat 0 4px; padding:0 0 1px 0;} #nav-main .navigation LI {padding:0 15px; border-color:#bfbfbf; white-space:nowrap; line-height:15px; margin-top:4px;} #nav-main .navigation LI A {display:block; margin-bottom:-2px; *margin-bottom:0;} #nav-main A, #nav-footer A {color:#ccc;} #nav-main .navigation LI.selected A, #nav-main .navigation A:hover, #nav-footer .navigation LI.selected A, #nav-footer .navigation A:hover {color:#fff;} #nav-main #nav-primary {float:left; margin-top:5px;} .ie6 #nav-main #nav-primary {position:relative;} #nav-main #nav-secondary {position:relative; top:6px; clear:left; z-index:50;} .ie7 #nav-main #nav-secondary, .ie8 #nav-main #nav-secondary {padding-top:1px;} #nav-main #nav-secondary LI {position:relative; padding:4px 0 0 0; height:21px; margin-top:0; border:none; border-bottom:1px dotted transparent;} .ie7 #nav-main #nav-secondary LI, .ie8 #nav-main #nav-secondary LI {height:25px} #nav-main #nav-secondary LI A {background:url("/static/site/graphics/prototype/menu-divider.png") no-repeat scroll 100% 0 transparent; padding:2px 15px 0 15px; margin:0; line-height:11px; z-index:1000;} .ie6 #nav-main #nav-secondary LI A, .ie7 #nav-main #nav-secondary LI A {line-height:15px; padding-top:0;} #nav-main #nav-secondary LI.dropdown:hover, #nav-main #nav-secondary LI.dropdown A:hover {background:#dddddd; color:#555555;} #nav-main #nav-secondary LI.dropdown {margin-left:-1px;} .ie6 #nav-main #nav-secondary LI:hover, .ie6 #nav-main #nav-secondary LI.dropdown A:hover {background-color:none;} #nav-main #nav-secondary LI.dropdown:hover {border-bottom:1px dotted #b4b4b4;} .ie6 #nav-main #nav-secondary LI, .ie6 #nav-main #nav-secondary LI A, .ie6 html #nav-main #nav-secondary LI.dropdown A:hover {border-bottom-width:0px; position:relative; } .ie6 #nav-main #nav-secondary LI.dropdown A:hover {color:#ffffff; background:url("/static/site/graphics/prototype/menu-divider.png") no-repeat scroll 100% 0 transparent} #nav-main #nav-secondary LI.dropdown:hover A {color:#555555; text-decoration:underline; background:none;} #nav-main #nav-secondary LI.dropdown A:hover {text-decoration:underline;} #nav-main #nav-secondary LI .links {display:none; top:26px; border:1px solid #e1e1e3; border-top-color:#DDDDDD; background:url("/static/site/graphics/prototype/dashes-vertical.gif") repeat-y scroll 170px 0 #fff; width:340px; padding:0; position:absolute;} #nav-main #nav-secondary LI .three-column-links {background:url("/static/site/graphics/dashes-vertical-3col.png") repeat-y scroll 170px 0 #fff; width:510px; padding:0;} .ie7 #nav-main #nav-secondary LI .links, .ie8 #nav-main #nav-secondary LI .links {top:30px} #nav-main #nav-secondary LI.dropdown:hover .links, #nav-main #nav-secondary LI.dropdown A:hover .links {display:block;} .ie6 #nav-main #nav-secondary LI:hover .links, .ie6 #nav-main #nav-secondary LI A:hover .links {display:none;} #nav-main #nav-secondary LI .links .linksList {float:left; width:170px; padding:0;} #nav-main #nav-secondary LI .links .linksList H2 {background-color:#DDDDDD; color:#555555; padding:7px 10px 8px 20px; margin-left:1px; font-size:13px; z-index:1000;} .ie7 #nav-main #nav-secondary LI .links .linksList H2 {padding:6px 10px 7px 20px;} #nav-main #nav-secondary LI .links .linksList H2.first {margin-left:0;} #nav-main #nav-secondary LI .links .linksList UL {margin:0; padding:5px 10px 10px 20px; z-index:100;} #nav-main #nav-secondary LI .links .linksList UL LI {border:none; float:none; height:auto; list-style:none outside none; margin:1px 0 6px 0; padding:0; color:#555555; white-space:normal;} #nav-main #nav-secondary LI .links .linksList UL LI A {line-height:1.3; border:none; text-decoration:none; width:115px; margin:0; color:#555555; background:url("/static/site/graphics/prototype/arrows.png") no-repeat scroll 0 -1393px transparent; display:block; padding-left:11px; white-space:normal;} #nav-main #nav-secondary LI .links .linksList UL LI:hover {background-color:transparent;} #nav-main #nav-secondary LI .links .linksList UL LI A:hover {background-color:transparent; text-decoration:underline;} /** * Checkout breadcrumb */ .checkout-breadcrumb {position:relative; width:580px; margin:0 auto;} .checkout-breadcrumb DIV {width:580px; height:20px; background:url('/static/site/graphics/checkout-breadcrumb.gif') no-repeat; position:absolute; padding-top:35px;} .checkout-breadcrumb DIV SPAN {font-size:12px; width:191px; display:inline-block;} .checkout-breadcrumb DIV SPAN.active {font-weight:bold;} .checkout-breadcrumb .cb-basket {background-position:15px 1px;} .checkout-breadcrumb .cb-checkout {background-position:-557px 1px} .checkout-breadcrumb .cb-complete {background-position:-1136px 1px;} .checkout-breadcrumb SPAN {text-align:left;} .checkout-breadcrumb SPAN.middle {text-align:center;} #nav-location .checkout-breadcrumb SPAN.right {text-align:right; float:none;} /** * Shop locale links. */ #shop-locale {margin:0; padding:0; position:absolute; right:15px;} #shop-locale LI {margin:0 0 0 8px; padding:0; list-style:none; float:left;} #shop-locale LI A {display:block; width:25px; height:16px; text-decoration:none; text-indent:-9999em; background-position:0 0; background-repeat:no-repeat; _overflow:hidden;} #uk-shop-link A {background-image:url('/static/site/graphics/prototype/uk.png');} #us-shop-link A {background-image:url('/static/site/graphics/us.png');} #jp-shop-link A {background-image:url('/static/site/graphics/jp.png');} /** * Currency selector links. */ #currency-selector {width:150px; _padding-top:1px; position:absolute; right:85px;} #currency-selector P {margin:0; padding:0; display:inline; float:right; line-height:1;} .currencies {margin:-1px 0 0 0; padding:0 10px 0 0; float:right; line-height:1; background:url('/static/site/graphics/whiteDots.gif') no-repeat 100% 0;} .currencies LI {margin:0 0 0 8px; padding:0; list-style:none; float:left; width:25px; height:16px; text-decoration:none; text-indent:-9999em; background-image:url('/static/site/graphics/currencySymbols.gif'); background-repeat:no-repeat; _overflow:hidden; cursor:pointer;} #currency-gbp {background-position:0 -17px;} #currency-eur {background-position:-26px -17px;} #currency-usd {background-position:-52px -17px;} #currency-gbp.selected {background-position:0 0;} #currency-eur.selected {background-position:-26px 0;} #currency-usd.selected {background-position:-52px 0;} /** * Google translate dropdown */ A.translate-dropdown {position:absolute; right:195px; z-index:10; display:block; width:9em; padding:10px 0 9px 0; margin-top:-9px; cursor:default; text-decoration:none;} A.translate-dropdown:hover {background:#fff; color:#555; -moz-box-shadow: 1px 1px 1px #888; -webkit-box-shadow: 1px 1px 1px #888; box-shadow: 1px 1px 1px #888;} A.translate-dropdown SPAN {padding:0px 10px 1px 20px; display:block; border:1px solid transparent; border-width:1px; line-height:1; background:url('/static/site/graphics/dropdown-arrows.gif') 5px -51px no-repeat;} #translate-buttons, .translate-button {display:none; width:8em;} A.translate-dropdown:hover #translate-buttons, A.translate-dropdown:hover #translate-buttons .translate-button {display:block;} A.translate-dropdown:hover SPAN {background-position:5px 2px;} #translate-buttons {background:#fff; margin-top:10px;} #translate-buttons UL {margin:0 0 0 10px;} .translate-button {border:none; background:none; cursor:pointer; display:block; text-align:left; padding:5px 5px 5px 0;} .translate-button:hover {text-decoration:underline;} #translate-buttons IMG {margin:10px 0 0 5px;} #translate-widget-container { margin-top: -6px; position: absolute; right: 200px; text-transform: capitalize; } label[for='translate-widget'] { float: left; padding-right: 5px; position: relative; top: 7px; } .select-container { width: 90px; float: left; } div.select-container.hovered, div.select-container.focused { } .select-display { border: 1px solid #DDDDDD; display: block; font-size: 12px; line-height: 26px; overflow: hidden; padding: 0 38px 0 6px; width: auto; } .select-button { background: url('/static/site/graphics/prototype/custom-form-sprites.png') no-repeat scroll -14px -26px transparent; border: 1px solid #DDDDDD; display: block; height: 26px; position: absolute; right: 0; top: 0; width: 26px; } .select-list { border-bottom: 1px solid #ccc; overflow: hidden; } .select-list ul { background: #fff; border: 1px solid #ccc; border-top: 0; border-bottom: 0; list-style: none; margin: 0; padding: 0; zoom: 1; } .select-list li { display: block; list-style: none; padding: 4px 8px; zoom: 1; } .select-list li.hovered { background: url('/static/site/graphics/prototype/custom-form-sprites.png') #fff right -53px no-repeat; text-decoration: underline; } /** * Breadcrumbs */ #breadcrumbs {float:left; padding:0; line-height:1; margin-top:2px;} #breadcrumbs, #breadcrumbs H3, #breadcrumbs A {color:#706c6c;} #breadcrumbs H3, #breadcrumbs LI {float:left; margin:0 4px 0 0;} #breadcrumbs H3 {font-family:Helvetica, Arial, sans-serif; *font-family:Arial, sans-serif; font-size:11px; font-weight:bold;} #breadcrumbs OL {float:left; margin:0; padding:0;} #breadcrumbs LI {list-style:none; margin:0; padding:0 0 0 13px; background:url('/static/site/graphics/prototype/arrows.png') no-repeat 3px -1997px;} #breadcrumbs LI.first {padding-left:1px; background:none;} #breadcrumbs LI A {text-decoration:none;} #breadcrumbs LI A:hover, #breadcrumbs LI A.selected {text-decoration:underline;} /** * Shop footer links */ #footer-links {margin:0 auto; width:920px; height:190px; overflow:hidden; border-top:1px solid #efefef;} #footer-links H3 {margin:15px 0 6px 0; font-weight:bold; font-size:11px; font-family:Helvetica, Arial, sans-serif; *font-family:Arial, sans-serif; color:#555555;} #footer-links A {text-decoration:none;} #footer-links .navlist {margin:0;} #footer-links .navlist LI {margin:6px 0; list-style:none;} #footer-links .newsletterform {border:1px solid #a4a4a4; background:#fff; padding:0;} #footer-links .newsletterform p {margin:0;} #footer-links .newsletterform label {font-weight:normal; display:block; margin-bottom:3px;} #footer-links .newsletterform .text {background:transparent; border:none; display:block; float:left; width:164px; font-size:11px;} @media screen and (-webkit-min-device-pixel-ratio:0){#footer-links .newsletterform .text {padding:2px 2px 0; position:relative; top:1px;}} #footer-links .newsletterform .submit {display:block; float:right; margin:0; background-color:#d9d9d9; background-position:100% -3593px; color:#555; border:none; border-left:1px solid #a4a4a4; padding:3px 12px 2px 2px; font-size:11px;} /** * Footer */ #ft {margin-top:-278px; height:278px; position:relative;} #nav-quicklinks {padding:30px 0; bottom:0;} #nav-footer {padding:0 17px 0 17px; height:27px; background:#555; color:#ccc;} #nav-footer .navigation, #nav-footer .copyright {margin-top:0; padding-top:10px;} #nav-footer LI {border-width:0 0 0 1px; padding:0 13px; border-color:#bfbfbf;} #nav-footer LI.first {border-left:none;} /* iPad [portrait + landscape] */ @media only screen and (min-width: 768px) and (max-width: 1024px) { #nav-main #nav-secondary LI A { padding: 2px 5px 0; } #nav-main .navigation LI { padding: 0 5px; } #nav-main { font-size:10px; } }