/** * Global.css * Main Stylesheet * * @author Jonathan Pilling * @date 30-06-15 */ /* ================================ Variables & Functions ================================ */ /* Layout Defaults */ /* Global Colours */ /* Project Colours */ /* ================================ Base ================================ */ /** * Handy sass helpers * * @author Jonathan Pilling * @updated 2014-01-29 * * Collected from around the web and modified as necessary */ /* ================================ Extends (@extend) ================================ */ /** * Overflow text in an elegant way */ /** * Hide text of Block or Inline-Block Elements */ #searchBar .form__share--third .button, #searchBarP .form__share--third .button, #pmd_b .form__share--third .button, .nav__hamburger, .cta__item .form__share--third .button, .cta__item.cta__item--newsletter .form__share--third .button, #checkoutMain #orderConfirmMain .bsktRemoveBtn { overflow: hidden; text-indent: 110%; white-space: nowrap; } /** * Hide Text of Inline Elements */ /** * Vertical Align of Element */ /** * Reset */ .undo, #buyingArea .buydetails, #buyingArea .qtymx, #centerContainer.top .foothealth .primary__light .row ul { list-style: none; margin: 0; padding: 0; } .undo > li, #buyingArea .buydetails > li, #buyingArea .qtymx > li, #centerContainer.top .foothealth .primary__light .row ul > li { list-style: none; } .undo > dd, #buyingArea .buydetails > dd, #buyingArea .qtymx > dd, #centerContainer.top .foothealth .primary__light .row ul > dd { margin-left: 0; } .undo ul, #buyingArea .buydetails ul, #buyingArea .qtymx ul, #centerContainer.top .foothealth .primary__light .row ul ul { list-style: disc outside; } .undo ol, #buyingArea .buydetails ol, #buyingArea .qtymx ol, #centerContainer.top .foothealth .primary__light .row ul ol { list-style: decimal outside; } /** * Contain floated elements */ .clearing, #buyingArea ul.buybox li ul, .slick-track, .wrapper-inner, #outerContainerBoxI, #mainContainer, #innerContainer, #centerContainer, #headerContainer, #headerContainerCheckout, .header, .header__right1, .header__right2, #searchArea, #searchMain, #basketPopup, #basketPopupM, #basketPopupM #basketPopupBot, #basketPopupM #basketPopupBot > div, .nav__list, .nav--main .mtop, .nav--main .mbottom, .nav--mobile .menu ul, .nav--mobile .menu div, #headerContainerPhone, #phoneHead, .phoneTopMenu, .cta__item.cta__item--newsletter form, .productListLine1, #productsMain, #partsList, .productListItem, .productListItem .pli_right, .productListItem .pli_right .pli_pricebox, .productListItem .pli_right .pli_reviewstarbox, .productListItem .pli_right .pli_fill, .productListItem .pli_right .pli_fill .pli_swatchbox, #productDetailTitle, #productDetail, #productImage, #altImageList, .smInnerHolder, #productDetailMid_I, #productDetailMid_I #prodDetailsMid_W, #productDetailMid_I #buyingArea, #productDetailMid_I #buyingArea .DDLBox, #matrixTop, .matrixBox, .matrixHeadO, .matrixHead, .matrixColours, .matrixBodyO, .widthrow, #buyingArea, #buyingArea #buyArea, #buyingArea #buyDetails, #buyingArea .buydetails, #buyingArea .qtymx, #buyingArea ul.buybox, #buyingArea ul.buybox li, .matrixDiv .variation, .matrixDiv .colourRow, .reviews .reviewList, .reviews .reviewitem .head > div, .reviews .reviewitem .reviewmain, .reviews .reviewitem .ratings, .leaveReview #reviewForm, .leaveReview dl, .leaveReview .reviewRate, #productDetailRight #relativesList_rel, #relativesList_viewed, .alertXPrompt, .basketHeader, #basketLeft #basketMain, #basketLeft .basketMain, #basketLeft .qtyUpdater, #basketLeft .bskt div.txt, #basketLeft .bsktp, #basketLeft .bsktp.totals > div, #basketLeft .bsktp div.txt, #basketLeft .bsktp div.qty, #basketLeft #respMove_carrier_phone, #basketLeft #respSrc_carrier, #basketLeft #respSrc_source, #basketLeft #respMove_source_phone, #basketLeft #codePromptPhone, #checkoutTop #checkoutCrumbs, #checkoutMain, #checkoutMain #mainCheckoutDivs, #checkoutMain #loginForm, #checkoutMain #loginEcusDetails, #checkoutMain #new_address_form_block #deliveryAddress, #checkoutMain #new_address_form_block #checkoutAddAddress #addFind, #checkoutMain #new_address_form_block #checkoutAddAddress .addressTable, #checkoutMain #new_address_form_block #checkoutAddAddress .privacy, #checkoutMain #new_address_form_block #checkoutAddPass, #checkoutMain #new_address_form_block .cust, #checkoutMain #new_address_form_block .pwd, #checkoutMain #checkoutChooseAddress .addline, #checkoutMain #basketSummaryParts, #checkoutMain #orderConfirmMain .revAddWrapper, #checkoutMain #checkout_form, #checkoutMain #orderMainRight, #checkoutMain #thanks_main #orderThanksRight, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .total, #taxexform, #taxexform #taxex_core, #taxexform .infofull, #loginMain #loginForm, #loginMain #logreg form, #servicesRight, #servicesMain, #servicesMain .servicesCore, #servicesMain .servicesPage .addrbook, #infoContainer, #contactTop form, #contactTop dl.std, .catRequest form, #centerContainer.top .retailers .storeFinder, .storeFinderDetail > div > div, .cd-container, .cd-timeline-block, .cd-timeline-content, #catCodeForm, #expopMain, #expopMain #expopLeft, #expopMain .matrixDiv .variation, #expopMain .matrixDiv .colourRow, #quickOrderMidHead, #quickOrderMidHead ul, .quickOrderMid_bskt ul, .flogin, .flogin form, #friendForm, #footer .col-4 { *zoom: 1; } .clearing:before, #buyingArea ul.buybox li ul:before, .slick-track:before, .wrapper-inner:before, #outerContainerBoxI:before, #mainContainer:before, #innerContainer:before, #centerContainer:before, #headerContainer:before, #headerContainerCheckout:before, .header:before, .header__right1:before, .header__right2:before, #searchArea:before, #searchMain:before, #basketPopup:before, #basketPopupM:before, #basketPopupM #basketPopupBot:before, #basketPopupM #basketPopupBot > div:before, .nav__list:before, .nav--main .mtop:before, .nav--main .mbottom:before, .nav--mobile .menu ul:before, .nav--mobile .menu div:before, #headerContainerPhone:before, #phoneHead:before, .phoneTopMenu:before, .cta__item.cta__item--newsletter form:before, .productListLine1:before, #productsMain:before, #partsList:before, .productListItem:before, .productListItem .pli_right:before, .productListItem .pli_right .pli_pricebox:before, .productListItem .pli_right .pli_reviewstarbox:before, .productListItem .pli_right .pli_fill:before, .productListItem .pli_right .pli_fill .pli_swatchbox:before, #productDetailTitle:before, #productDetail:before, #productImage:before, #altImageList:before, .smInnerHolder:before, #productDetailMid_I:before, #productDetailMid_I #prodDetailsMid_W:before, #productDetailMid_I #buyingArea:before, #productDetailMid_I #buyingArea .DDLBox:before, #matrixTop:before, .matrixBox:before, .matrixHeadO:before, .matrixHead:before, .matrixColours:before, .matrixBodyO:before, .widthrow:before, #buyingArea:before, #buyingArea #buyArea:before, #buyingArea #buyDetails:before, #buyingArea .buydetails:before, #buyingArea .qtymx:before, #buyingArea ul.buybox:before, #buyingArea ul.buybox li:before, .matrixDiv .variation:before, .matrixDiv .colourRow:before, .reviews .reviewList:before, .reviews .reviewitem .head > div:before, .reviews .reviewitem .reviewmain:before, .reviews .reviewitem .ratings:before, .leaveReview #reviewForm:before, .leaveReview dl:before, .leaveReview .reviewRate:before, #productDetailRight #relativesList_rel:before, #relativesList_viewed:before, .alertXPrompt:before, .basketHeader:before, #basketLeft #basketMain:before, #basketLeft .basketMain:before, #basketLeft .qtyUpdater:before, #basketLeft .bskt div.txt:before, #basketLeft .bsktp:before, #basketLeft .bsktp.totals > div:before, #basketLeft .bsktp div.txt:before, #basketLeft .bsktp div.qty:before, #basketLeft #respMove_carrier_phone:before, #basketLeft #respSrc_carrier:before, #basketLeft #respSrc_source:before, #basketLeft #respMove_source_phone:before, #basketLeft #codePromptPhone:before, #checkoutTop #checkoutCrumbs:before, #checkoutMain:before, #checkoutMain #mainCheckoutDivs:before, #checkoutMain #loginForm:before, #checkoutMain #loginEcusDetails:before, #checkoutMain #new_address_form_block #deliveryAddress:before, #checkoutMain #new_address_form_block #checkoutAddAddress #addFind:before, #checkoutMain #new_address_form_block #checkoutAddAddress .addressTable:before, #checkoutMain #new_address_form_block #checkoutAddAddress .privacy:before, #checkoutMain #new_address_form_block #checkoutAddPass:before, #checkoutMain #new_address_form_block .cust:before, #checkoutMain #new_address_form_block .pwd:before, #checkoutMain #checkoutChooseAddress .addline:before, #checkoutMain #basketSummaryParts:before, #checkoutMain #orderConfirmMain .revAddWrapper:before, #checkoutMain #checkout_form:before, #checkoutMain #orderMainRight:before, #checkoutMain #thanks_main #orderThanksRight:before, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary:before, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .total:before, #taxexform:before, #taxexform #taxex_core:before, #taxexform .infofull:before, #loginMain #loginForm:before, #loginMain #logreg form:before, #servicesRight:before, #servicesMain:before, #servicesMain .servicesCore:before, #servicesMain .servicesPage .addrbook:before, #infoContainer:before, #contactTop form:before, #contactTop dl.std:before, .catRequest form:before, #centerContainer.top .retailers .storeFinder:before, .storeFinderDetail > div > div:before, .cd-container:before, .cd-timeline-block:before, .cd-timeline-content:before, #catCodeForm:before, #expopMain:before, #expopMain #expopLeft:before, #expopMain .matrixDiv .variation:before, #expopMain .matrixDiv .colourRow:before, #quickOrderMidHead:before, #quickOrderMidHead ul:before, .quickOrderMid_bskt ul:before, .flogin:before, .flogin form:before, #friendForm:before, #footer .col-4:before, .clearing:after, #buyingArea ul.buybox li ul:after, .slick-track:after, .wrapper-inner:after, #outerContainerBoxI:after, #mainContainer:after, #innerContainer:after, #centerContainer:after, #headerContainer:after, #headerContainerCheckout:after, .header:after, .header__right1:after, .header__right2:after, #searchArea:after, #searchMain:after, #basketPopup:after, #basketPopupM:after, #basketPopupM #basketPopupBot:after, #basketPopupM #basketPopupBot > div:after, .nav__list:after, .nav--main .mtop:after, .nav--main .mbottom:after, .nav--mobile .menu ul:after, .nav--mobile .menu div:after, #headerContainerPhone:after, #phoneHead:after, .phoneTopMenu:after, .cta__item.cta__item--newsletter form:after, .productListLine1:after, #productsMain:after, #partsList:after, .productListItem:after, .productListItem .pli_right:after, .productListItem .pli_right .pli_pricebox:after, .productListItem .pli_right .pli_reviewstarbox:after, .productListItem .pli_right .pli_fill:after, .productListItem .pli_right .pli_fill .pli_swatchbox:after, #productDetailTitle:after, #productDetail:after, #productImage:after, #altImageList:after, .smInnerHolder:after, #productDetailMid_I:after, #productDetailMid_I #prodDetailsMid_W:after, #productDetailMid_I #buyingArea:after, #productDetailMid_I #buyingArea .DDLBox:after, #matrixTop:after, .matrixBox:after, .matrixHeadO:after, .matrixHead:after, .matrixColours:after, .matrixBodyO:after, .widthrow:after, #buyingArea:after, #buyingArea #buyArea:after, #buyingArea #buyDetails:after, #buyingArea .buydetails:after, #buyingArea .qtymx:after, #buyingArea ul.buybox:after, #buyingArea ul.buybox li:after, .matrixDiv .variation:after, .matrixDiv .colourRow:after, .reviews .reviewList:after, .reviews .reviewitem .head > div:after, .reviews .reviewitem .reviewmain:after, .reviews .reviewitem .ratings:after, .leaveReview #reviewForm:after, .leaveReview dl:after, .leaveReview .reviewRate:after, #productDetailRight #relativesList_rel:after, #relativesList_viewed:after, .alertXPrompt:after, .basketHeader:after, #basketLeft #basketMain:after, #basketLeft .basketMain:after, #basketLeft .qtyUpdater:after, #basketLeft .bskt div.txt:after, #basketLeft .bsktp:after, #basketLeft .bsktp.totals > div:after, #basketLeft .bsktp div.txt:after, #basketLeft .bsktp div.qty:after, #basketLeft #respMove_carrier_phone:after, #basketLeft #respSrc_carrier:after, #basketLeft #respSrc_source:after, #basketLeft #respMove_source_phone:after, #basketLeft #codePromptPhone:after, #checkoutTop #checkoutCrumbs:after, #checkoutMain:after, #checkoutMain #mainCheckoutDivs:after, #checkoutMain #loginForm:after, #checkoutMain #loginEcusDetails:after, #checkoutMain #new_address_form_block #deliveryAddress:after, #checkoutMain #new_address_form_block #checkoutAddAddress #addFind:after, #checkoutMain #new_address_form_block #checkoutAddAddress .addressTable:after, #checkoutMain #new_address_form_block #checkoutAddAddress .privacy:after, #checkoutMain #new_address_form_block #checkoutAddPass:after, #checkoutMain #new_address_form_block .cust:after, #checkoutMain #new_address_form_block .pwd:after, #checkoutMain #checkoutChooseAddress .addline:after, #checkoutMain #basketSummaryParts:after, #checkoutMain #orderConfirmMain .revAddWrapper:after, #checkoutMain #checkout_form:after, #checkoutMain #orderMainRight:after, #checkoutMain #thanks_main #orderThanksRight:after, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary:after, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .total:after, #taxexform:after, #taxexform #taxex_core:after, #taxexform .infofull:after, #loginMain #loginForm:after, #loginMain #logreg form:after, #servicesRight:after, #servicesMain:after, #servicesMain .servicesCore:after, #servicesMain .servicesPage .addrbook:after, #infoContainer:after, #contactTop form:after, #contactTop dl.std:after, .catRequest form:after, #centerContainer.top .retailers .storeFinder:after, .storeFinderDetail > div > div:after, .cd-container:after, .cd-timeline-block:after, .cd-timeline-content:after, #catCodeForm:after, #expopMain:after, #expopMain #expopLeft:after, #expopMain .matrixDiv .variation:after, #expopMain .matrixDiv .colourRow:after, #quickOrderMidHead:after, #quickOrderMidHead ul:after, .quickOrderMid_bskt ul:after, .flogin:after, .flogin form:after, #friendForm:after, #footer .col-4:after { display: table; content: ""; line-height: 0; } .clearing:after, #buyingArea ul.buybox li ul:after, .slick-track:after, .wrapper-inner:after, #outerContainerBoxI:after, #mainContainer:after, #innerContainer:after, #centerContainer:after, #headerContainer:after, #headerContainerCheckout:after, .header:after, .header__right1:after, .header__right2:after, #searchArea:after, #searchMain:after, #basketPopup:after, #basketPopupM:after, #basketPopupM #basketPopupBot:after, #basketPopupM #basketPopupBot > div:after, .nav__list:after, .nav--main .mtop:after, .nav--main .mbottom:after, .nav--mobile .menu ul:after, .nav--mobile .menu div:after, #headerContainerPhone:after, #phoneHead:after, .phoneTopMenu:after, .cta__item.cta__item--newsletter form:after, .productListLine1:after, #productsMain:after, #partsList:after, .productListItem:after, .productListItem .pli_right:after, .productListItem .pli_right .pli_pricebox:after, .productListItem .pli_right .pli_reviewstarbox:after, .productListItem .pli_right .pli_fill:after, .productListItem .pli_right .pli_fill .pli_swatchbox:after, #productDetailTitle:after, #productDetail:after, #productImage:after, #altImageList:after, .smInnerHolder:after, #productDetailMid_I:after, #productDetailMid_I #prodDetailsMid_W:after, #productDetailMid_I #buyingArea:after, #productDetailMid_I #buyingArea .DDLBox:after, #matrixTop:after, .matrixBox:after, .matrixHeadO:after, .matrixHead:after, .matrixColours:after, .matrixBodyO:after, .widthrow:after, #buyingArea:after, #buyingArea #buyArea:after, #buyingArea #buyDetails:after, #buyingArea .buydetails:after, #buyingArea .qtymx:after, #buyingArea ul.buybox:after, #buyingArea ul.buybox li:after, .matrixDiv .variation:after, .matrixDiv .colourRow:after, .reviews .reviewList:after, .reviews .reviewitem .head > div:after, .reviews .reviewitem .reviewmain:after, .reviews .reviewitem .ratings:after, .leaveReview #reviewForm:after, .leaveReview dl:after, .leaveReview .reviewRate:after, #productDetailRight #relativesList_rel:after, #relativesList_viewed:after, .alertXPrompt:after, .basketHeader:after, #basketLeft #basketMain:after, #basketLeft .basketMain:after, #basketLeft .qtyUpdater:after, #basketLeft .bskt div.txt:after, #basketLeft .bsktp:after, #basketLeft .bsktp.totals > div:after, #basketLeft .bsktp div.txt:after, #basketLeft .bsktp div.qty:after, #basketLeft #respMove_carrier_phone:after, #basketLeft #respSrc_carrier:after, #basketLeft #respSrc_source:after, #basketLeft #respMove_source_phone:after, #basketLeft #codePromptPhone:after, #checkoutTop #checkoutCrumbs:after, #checkoutMain:after, #checkoutMain #mainCheckoutDivs:after, #checkoutMain #loginForm:after, #checkoutMain #loginEcusDetails:after, #checkoutMain #new_address_form_block #deliveryAddress:after, #checkoutMain #new_address_form_block #checkoutAddAddress #addFind:after, #checkoutMain #new_address_form_block #checkoutAddAddress .addressTable:after, #checkoutMain #new_address_form_block #checkoutAddAddress .privacy:after, #checkoutMain #new_address_form_block #checkoutAddPass:after, #checkoutMain #new_address_form_block .cust:after, #checkoutMain #new_address_form_block .pwd:after, #checkoutMain #checkoutChooseAddress .addline:after, #checkoutMain #basketSummaryParts:after, #checkoutMain #orderConfirmMain .revAddWrapper:after, #checkoutMain #checkout_form:after, #checkoutMain #orderMainRight:after, #checkoutMain #thanks_main #orderThanksRight:after, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary:after, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .total:after, #taxexform:after, #taxexform #taxex_core:after, #taxexform .infofull:after, #loginMain #loginForm:after, #loginMain #logreg form:after, #servicesRight:after, #servicesMain:after, #servicesMain .servicesCore:after, #servicesMain .servicesPage .addrbook:after, #infoContainer:after, #contactTop form:after, #contactTop dl.std:after, .catRequest form:after, #centerContainer.top .retailers .storeFinder:after, .storeFinderDetail > div > div:after, .cd-container:after, .cd-timeline-block:after, .cd-timeline-content:after, #catCodeForm:after, #expopMain:after, #expopMain #expopLeft:after, #expopMain .matrixDiv .variation:after, #expopMain .matrixDiv .colourRow:after, #quickOrderMidHead:after, #quickOrderMidHead ul:after, .quickOrderMid_bskt ul:after, .flogin:after, .flogin form:after, #friendForm:after, #footer .col-4:after { clear: both; } /** * Hide visually but not from screen readers */ .visuallyhidden, .form--no-labels .form__label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; /** * Allow visuallyhidden to be focussable */ } .focusable.visuallyhidden:active, .form--no-labels .focusable.form__label:active, .focusable.visuallyhidden:focus, .form--no-labels .focusable.form__label:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* ================================ Mixins (@include) ================================ */ /** * Takes a REM value and returns REM and PX fallback for IE8 */ /** * Vertical leading font size and line height, based on a font factor (primarily for headings) */ /** * @font-face mixin */ /** * Retina */ /* ================================ Functions ================================ */ /** * Remove the units from a value (e.g. strip-units(3em) => 3) */ /** * Returns black or white, depending on the lightness of the supplied colour */ /** * Default styles for cross browser compatibility * * @author Jonathan Pilling * @date 2011-08-12 * * Based on Normalize.css, including sections from Bootstrap from Twitter and personal preferences. * All modified for maximum default beautification. */ /* ================================ HTML5 ================================ */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; margin: 0; } [hidden], template { display: none; } /* ================================ Base ================================ */ html { font-family: sans-serif; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } /* ================================ Links ================================ */ a { background: transparent; text-decoration: none; } a:hover { text-decoration: underline; } a:focus { outline: thin dotted #333; outline-offset: -2px; } a:hover, a:active { outline: 0; } /* ================================ Typography ================================ */ h1, #servicesMain .servicesPage .infohead, #pageTitle h1, .storeFinderDetail h2, h2, h3, h4, h5, h6, .alpha, .beta, .gamma, .delta, .epsilon, .zeta { font-family: inherit; font-weight: normal; margin: 0 0 24.0px; margin: 0 0 2.4rem; padding: 0; text-align: center; text-rendering: optimizelegibility; text-transform: uppercase; } h1 small, #servicesMain .servicesPage .infohead small, #pageTitle h1 small, .storeFinderDetail h2 small, h2 small, h3 small, h4 small, h5 small, h6 small, .alpha small, .beta small, .gamma small, .delta small, .epsilon small, .zeta small { font-size: 0.65em; font-weight: normal; line-height: 1; color: #bbb; } h1, #servicesMain .servicesPage .infohead, #pageTitle h1, .storeFinderDetail h2, .alpha { border-image: url(../../images/bg-heading.png) stretch 100% 0 100% 0; border-style: solid; border-width: 5px; border-left: 0 none; border-right: 0 none; font-size: 34.88px; font-size: 3.488rem; line-height: 1.37615; line-height: normal; padding: 9px 0; } .no-borderimage h1, .no-borderimage #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .no-borderimage .infohead, .no-borderimage #pageTitle h1, #pageTitle .no-borderimage h1, .no-borderimage .storeFinderDetail h2, .storeFinderDetail .no-borderimage h2, .no-borderimage .alpha { border-bottom: 4px double #aeaeae; border-left: 0 none; border-right: 0 none; border-top: 4px double #aeaeae; } h2, .beta { font-size: 30px; font-size: 3rem; line-height: 1.6; } h3, .gamma { font-size: 24.0px; font-size: 2.4rem; line-height: 1.0; } h4, .delta { font-size: 22px; font-size: 2.2rem; line-height: 1.09091; } h5, .epsilon, h6, .zeta { font-size: 16px; font-size: 1.6rem; line-height: 1.5; } p { margin: 0 0 24.0px; margin: 0 0 2.4rem; } .lead { font-size: 19.2px; font-size: 1.92rem; line-height: 1.25; } .milli { font-size: 12.0px; font-size: 1.2rem; line-height: 2.0; } .wf-loading nav, .wf-loading ul, .wf-loading ol, .wf-loading h1, .wf-loading #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .wf-loading .infohead, .wf-loading #pageTitle h1, #pageTitle .wf-loading h1, .wf-loading .storeFinderDetail h2, .storeFinderDetail .wf-loading h2, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading h5, .wf-loading h6, .wf-loading p, .wf-loading a, .wf-loading span, .wf-loading time, .wf-loading legend, .wf-loading dt, .wf-loading dd { visibility: hidden; } .wf-active nav, .wf-active ul, .wf-active ol, .wf-active h1, .wf-active #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .wf-active .infohead, .wf-active #pageTitle h1, #pageTitle .wf-active h1, .wf-active .storeFinderDetail h2, .storeFinderDetail .wf-active h2, .wf-active h2, .wf-active h3, .wf-active h4, .wf-active h5, .wf-active h6, .wf-active p, .wf-active a, .wf-active span, .wf-active time, .wf-active legend, .wf-active dt, .wf-active dd, .wf-inactive nav, .wf-inactive ul, .wf-inactive ol, .wf-inactive h1, .wf-inactive #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .wf-inactive .infohead, .wf-inactive #pageTitle h1, #pageTitle .wf-inactive h1, .wf-inactive .storeFinderDetail h2, .storeFinderDetail .wf-inactive h2, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4, .wf-inactive h5, .wf-inactive h6, .wf-inactive p, .wf-inactive a, .wf-inactive span, .wf-inactive time, .wf-inactive legend, .wf-inactive dt, .wf-inactive dd { visibility: visible; } abbr[title] { border-bottom: 1px dotted #bbb; } b, strong { font-weight: bold; } blockquote { border-left: 5px solid #ddd; margin: 0 0 24.0px; margin: 0 0 1.5rem; padding: 0 0 0 1.5em; } .testimonial blockquote { padding: 0 0 0 1em; } blockquote:before { color: #bbb; content: "\201C"; display: block; font: italic 400%/1 Georgia,"Times New Roman", serif; height: 0; margin-left: -.95em; } blockquote p { font-size: 1.333em; } blockquote p:last-child { margin-bottom: 0; } blockquote small { color: #999; display: block; line-height: 1.5; } blockquote small:before { content: '\2014 \00A0'; } blockquote.pull-right { border-left: 0; border-right: 5px solid #ddd; float: right; padding-right: 1.5em; padding-left: 0; } blockquote.pull-right p, blockquote.pull-right small { text-align: right; } blockquote.pull-right small:before { content: ''; } blockquote.pull-right small:after { content: '\00A0 \2014'; } sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } small { font-size: 0.85em; } hr { border: 0; box-sizing: content-box; height: 0; border-top: 1px solid #999; margin: 1.5px 0; margin: 0.15rem 0; } /* ================================ Lists ================================ */ ul, ol { padding: 0; } ul ul, ul ol, ol ul, ol ol { margin-bottom: 0; } ol.lower-roman { list-style-type: lower-roman; } /* ================================ EMBEDDED CONTENT ================================ */ img { border: 0; } .has-map img { max-width: none; } img, object { max-width: 100%; } .has-map img { max-width: none; } svg { height: auto; max-height: 100%; } svg:not(:root) { overflow: hidden; } /* ================================ Forms ================================ */ form { margin: 0 0 1.5em; } fieldset { border: none; margin: 0 0 24.0px; margin: 0 0 1.5rem; padding: 0; } legend { border: 0; padding: 0; } legend small { font-size: 16px; font-size: 1.6rem; color: #bbb; } button, input, select, textarea { color: inherit; font: inherit; margin: 0; } label, select { cursor: pointer; } button, select { text-transform: none; } optgroup { font-weight: bold; } input { line-height: normal; } textarea { overflow: auto; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; cursor: pointer; padding: 0; } button { overflow: visible; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button[disabled], html input[disabled] { cursor: default; } /* ================================ Tables ================================ */ table { background-color: transparent; border-collapse: collapse; border-spacing: 0; margin: 0 0 24.0px; margin: 0 0 1.5rem; width: 100%; } table > thead > tr > th, table > thead > tr > td, table > tbody > tr > th, table > tbody > tr > td, table > tfoot > tr > th, table > tfoot > tr > td { line-height: 1.5; vertical-align: top; } table > thead > tr > th { border-bottom: 2px solid #bbb; vertical-align: bottom; } table > caption + thead > tr:first-child > th, table > caption + thead > tr:first-child > td, table > colgroup + thead > tr:first-child > th, table > colgroup + thead > tr:first-child > td, table > thead:first-child > tr:first-child > th, table > thead:first-child > tr:first-child > td { border-top: 0; } table > tbody + tbody { border-top: 2px solid #bbb; } table table { background: #fff; } table col[class*="col-"], table td[class*="col-"], table th[class*="col-"] { display: table-column; float: none; position: static; } table td[class*="col-"], table th[class*="col-"] { display: table-cell; } th { text-align: left; } /* ================================ Utility ================================ */ .no-js { padding-top: 48px; } /** * Javascript */ .javascript { background: #f7d637; color: #915608; left: 0; margin: 0; padding: 12.0px; position: absolute; right: 0; top: 0; z-index: 99; } .js .javascript { display: none; } /** * Prehistoric */ .outdated { background: #e74c3c; color: #fff; left: 0; padding: 2em; position: absolute; top: 0; z-index: 99999999; } .no-js .outdated { top: 3em; } .outdated__link { border: 1px solid #fff; color: #fff; margin-right: 1em; padding: 1em; } .outdated__link:hover, .outdated__link:focus, .outdated__link:active { background: #fff; color: #e74c3c; } /** * Fix Cookie Control's heading */ .ccc-inner h2 { font-family: sans-serif; line-height: normal; } /* ================================ Seldom Used Elements ================================ */ audio, canvas, video { display: inline-block; vertical-align: middle; } audio:not([controls]) { display: none; height: 0; } mark { background-color: #ff9; } del { color: #888; text-decoration: line-through; } address { display: block; font-style: normal; margin: 0 0 0.9375em; } dfn { font-style: italic; } mark { background: #d14; color: #fff; font-style: normal; font-weight: normal; } code, pre, tt, kbd, samp { border-radius: 3px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; } code, tt, kbd, samp { background-color: #f7f7f9; border: 1px solid #e5e5e6; color: #d14; padding: 2px 4px; } pre { background-color: #f5f5f5; border: 1px solid #bbb; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; color: #333; display: block; margin: 0 0 24.0px; margin: 0 0 1.5rem; overflow: auto; padding: 9.5px; white-space: pre-wrap; } pre code { background-color: transparent; border: 0; color: inherit; padding: 0; } figure { margin: 1em 2em; } figcaption { font-style: italic; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /** * Plugins - styling for any jquery plugins used * * @author Jonathan Pilling * @date 24-10-14 * * Includes sections from HTML5 Boilerplate */ /** * Slider */ .slick-slider { display: none; height: 595px !important; overflow: hidden; -webkit-tap-highlight-color: transparent; -ms-touch-action: none; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media all and (min-width: 43.8125em) { .slick-slider { padding-top: 30px; } } .slick-list { display: block; height: 595px; margin: 0; overflow: hidden; padding: 0; position: relative; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-track { display: block; left: 0; position: relative; top: 0; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: auto; min-height: 1px; position: relative; } .slick-slide .slide__img { margin: 0 auto; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { border: 1px solid transparent; display: block; height: auto; } @media all and (max-width: 43.8025em) { .slick-slide .slide__circle { border: none; border-radius: 0; display: none; height: 0; left: 0; position: absolute; text-align: center; top: 0; width: 0; z-index: -1000; } .slick-slide .slide__circle:before { background: transparent; border-radius: 0; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; } .slick-slide .slide__circle img, .slick-slide .slide__circle svg { height: 0; margin-top: 0; width: 0; } } /** * Dots */ .slick-dots { bottom: -28px; display: block; font-family: Arial,Tahoma,sans-serif; list-style: none; padding: 0; position: absolute; text-align: center; width: 100%; } .slick-dots li { cursor: pointer; display: inline-block; height: 20px; margin: 0 1px; padding: 0; position: relative; vertical-align: top; width: 20px; } .slick-dots li button { background: transparent; border: 0; color: transparent; cursor: pointer; display: block; font-size: 0; height: 20px; line-height: 0; outline: none; padding: 5px; width: 20px; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { color: #4d4d4d; content: "\2022"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 35px; font-size: 3.5rem; height: 20px; left: 0; line-height: 20px; opacity: 0.5; position: absolute; text-align: center; top: 0; width: 20px; } .slick-dots li.slick-active button:before { color: #92bfc3; opacity: 1; } /** * Main Text and links */ .slide__text { /** * Flex for mobile */ } .slide__text .slide__info { background-clip: padding-box; position: relative; text-align: center; } .slide__text .slide__info:before { bottom: 2px; content: ''; left: 2px; position: absolute; right: 2px; top: 2px; z-index: -1; } .slide__text .slide__info img, .slide__text .slide__info svg { height: 46px; margin: 0 auto; max-width: 100%; width: 240px; } .slide__text .slide__info--green { border: 3px solid #3d6e77; margin-bottom: 28px; padding: 18px 17px 9px 17px; } .slide__text .slide__info--green:before { background: #3d6e77; } .slide__text .slide__info--white { border: 3px solid #ffffff; padding: 24px 20px 19px 20px; } .slide__text .slide__info--white:before { background: #ffffff; } @media all and (max-width: 43.8025em) { .slide__text { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; top: 0; width: 100%; } } .slide__text p.lead { border-image: url(../../images/bg-heading.png) stretch 100% 0 100% 0; border-style: solid; border-width: 5px; border-left: 0 none; border-right: 0 none; border-bottom: 0 none; font-size: 35px; font-size: 3.5rem; font-weight: normal; line-height: 51px; margin: 0 0 3px 0; padding: 3px 0 0 0; text-transform: uppercase; } .no-borderimage .slide__text p.lead { border-top: 4px double #aeaeae; } .slide__text p { font-size: 17px; font-size: 1.7rem; line-height: normal; margin-bottom: 15px; } .slide__text a { margin: 0 auto; padding: 8px 18px; width: 133px; } @media all and (min-width: 43.8125em) { .slick-slider { height: 389px !important; } .slick-list { height: 389px; } .slick-slide { height: 389px; } .slick-slide .slide__img { height: 389px; left: auto; max-width: none; position: absolute; right: -147px; top: 0; z-index: 0; } .slick-slide.slick-active .slide__img { z-index: 99; } .slick-slide .slide__circle { display: none; } .slick-slide .slide__circle img, .slick-slide .slide__circle svg { height: 121px; margin-top: 10px; width: 111px; } .slide__text { bottom: 0%; display: none; left: 3%; position: absolute; text-align: left; top: 17px; width: 47%; z-index: 100; } .slide__text .slide__info img, .slide__text .slide__info svg { height: 46px; width: 240px; } .slide__text .slide__info--green { margin-bottom: 11px; } .slide__text h1, .slide__text #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .slide__text .infohead, .slide__text #pageTitle h1, #pageTitle .slide__text h1, .slide__text .storeFinderDetail h2, .storeFinderDetail .slide__text h2 { font-size: 30px; font-size: 3rem; } } @media all and (min-width: 50.125em) { .slick-slide .slide__img { right: -110px; } .slick-slide .slide__circle { left: 54%; top: 8px; } } @media all and (min-width: 61.25em) { .slick-slider { height: 425px !important; } .slick-list { height: 425px; } .slick-slide { height: 425px; } .slick-slide .slide__img { right: 0px; } .slick-slide .slide__circle { left: 46%; top: 20px; } .slide__text { left: 6%; top: 20px; width: 35%; } .slide__text .slide__info img, .slide__text .slide__info svg { height: 57px; width: 292px; } .slide__text .slide__info--green { margin-bottom: 28px; } .slide__text h1, .slide__text #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .slide__text .infohead, .slide__text #pageTitle h1, #pageTitle .slide__text h1, .slide__text .storeFinderDetail h2, .storeFinderDetail .slide__text h2 { font-size: 35px; font-size: 3.5rem; line-height: 51px; } .slide__text p { font-size: 17px; font-size: 1.7rem; } } /* ================================ Featherlight ================================ */ @media all { .featherlight { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483647; text-align: center; white-space: nowrap; cursor: pointer; background: #333; background: transparent; } .featherlight:last-of-type { background: rgba(0, 0, 0, 0.8); } .featherlight:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .featherlight .featherlight-content { position: relative; text-align: left; vertical-align: middle; display: inline-block; overflow: auto; padding: 25px 25px 0; border-bottom: 25px solid transparent; min-width: 30%; margin-left: 5%; margin-right: 5%; max-height: 95%; background: #fff; cursor: auto; white-space: normal; } .featherlight .featherlight-inner { /* make sure its visible */ display: block; } .featherlight .featherlight-close-icon { position: absolute; z-index: 9999; top: 0; right: 0; line-height: 25px; width: 25px; cursor: pointer; text-align: center; font-family: Arial, sans-serif; background: #fff; background: rgba(255, 255, 255, 0.3); color: #000; } .featherlight .featherlight-image { width: 100%; } .featherlight-iframe .featherlight-content { border-bottom: 0; padding: 0; } .featherlight iframe { border: none; margin: 0 auto; max-width: 100%; } } @media only screen and (max-width: 2000px) { .featherlight .featherlight-content { margin-left: 10px; margin-right: 10px; max-height: 98%; padding: 10px 10px 0; border-bottom: 10px solid transparent; } } /** * Presets * * @author Jonathan Pilling * @date 24-10-14 * */ /* ================================ Visibility ================================ */ .visible-print { display: none !important; } .hidden-print { display: block !important; } tr.hidden-print { display: table-row !important; } td.hidden-print { display: table-cell !important; } /* ================================ Buttons ================================ */ /** * Primary Buttons */ .button { background-clip: padding-box; background-color: #ffffff; border: 3px solid #fa5f5f; color: #ffffff; cursor: pointer; display: block; font-size: 14px; font-size: 1.4rem; padding: 6px 12px; position: relative; text-align: center; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; width: 100%; z-index: 1; } .button:after { background: #fa5f5f; bottom: 2px; content: ''; left: 2px; position: absolute; right: 2px; top: 2px; z-index: -1; } .button.button--green { border: 3px solid #92bfc3; } .button.button--green:after { background: #92bfc3; } .button.button--green:hover, .button.button--green:focus, .button.button--green:active { background: #b3d2d5; } .button.button--green--dark { border: 3px solid #3d6e77; } .button.button--green--dark:after { background: #3d6e77; } .button.button--green--dark:hover, .button.button--green--dark:focus, .button.button--green--dark:active { background: #4e8d99; } @media all and (min-width: 43.8125em) { .button { display: inline-block; width: auto; } } .button:hover, .button:focus, .button:active { background: #fc9090; color: #ffffff; text-decoration: none; } .button + .button { margin-top: 10px; } @media all and (min-width: 43.8125em) { .button + .button { margin: 0 0 0 10px; } } .button[type=submit] { -webkit-appearance: none; line-height: 22px; padding: 6px 12px; width: 100%; } @media all and (min-width: 43.8125em) { .button[type=submit] { width: auto; } } .button .button__inner { background-color: #fa5f5f; border: 0; cursor: pointer; font-size: 14px; font-size: 1.4rem; outline: 0 none; padding: 0; text-transform: uppercase; } /** * Button overrides */ input.BMBtn, input.BMBtn:link, input.BMBtn:visited, input.BMBtn:active, input.BMBtn:hover, a.BMBtnHi, a.BMBtnHi:link, a.BMBtnHi:visited, a.BMBtnHi:active, a.BMBtn, a.BMBtn:link, a.BMBtn:visited, a.BMBtn:active { font-size: inherit; -webkit-transition: all 0.4s; transition: all 0.4s; } .lightBoxButtons a.BMBtn, .lightBoxButtons a.BMBtn:link, .lightBoxButtons a.BMBtn:visited, .lightBoxButtons a.BMBtn:active { padding: 4px 12px; } #submitRS { width: 100%; } /** * DD and DL overrides */ @media all and (min-width: 43.8125em) { dl.std dt { width: 38%; margin: 20px 0 0 0; } dl.std dt.label { margin: 20px 0 0 0; } dl.std dd { float: left; width: 59%; height: auto; margin: 12px 0 0 3%; line-height: 28px; } } /* ================================ Forms [Fancy form Styles] ================================ */ .required-info { color: #e74c3c; margin: 0 0 10px; } .form__legend { font-size: 30px; font-size: 3rem; border-bottom: 1px solid #bbb; color: #92bfc3; display: block; font-weight: bold; margin: 20px 0; padding: 8px; } /** * Form Item */ .form__item { clear: left; list-style: none; margin-bottom: 10px; padding: 4px 8px 8px; position: relative; *zoom: 1; } /** * Labels */ [disabled] .form__label, .form__label--disabled { cursor: not-allowed; opacity: 0.65; pointer-events: none; } .form__label { display: block; font-weight: 300; margin-bottom: 5px; } .form__label a { font-size: 12px; font-size: 1.2rem; display: block; font-style: italic; } .form__label .form__item-required { color: #e74c3c; float: right; padding: 0 5px; } .form__item-help { clear: both; color: #bbb; display: block; } /** * Disabled */ /** * Default Input Styling */ .form__input, .form__select, .form__textarea { background: #fff; border: 1px solid #d4d4d4; border-radius: 0; color: #515050; font-size: 14px; font-size: 1.4rem; font-style: italic; height: 39px; line-height: 27px; padding: 5px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; width: 100%; /** * Disabled */ } .form__input:focus, .form__input:hover, .form__select:focus, .form__select:hover, .form__textarea:focus, .form__textarea:hover { background: #f6f6f6; border-color: #0e84aa; color: #3d6e77; outline: none; } .form__input[disabled], .form__input[readonly], .form__item--disabled .form__input, [disabled] .form__input, .form__select[disabled], .form__select[readonly], .form__item--disabled .form__select, [disabled] .form__select, .form__textarea[disabled], .form__textarea[readonly], .form__item--disabled .form__textarea, [disabled] .form__textarea { background: #f5f5f5; box-shadow: none; border: 1px solid #f7f7f7; color: #bbb; cursor: not-allowed; opacity: 0.65; pointer-events: none; } /** * Text Inputs */ .form__textarea { height: 93px; line-height: 22px; } .form__input::-webkit-input-placeholder, .form__textarea::-webkit-input-placeholder { color: #777; } .form__input:-moz-placeholder, .form__textarea:-moz-placeholder { color: #777; } .form__input:-ms-input-placeholder, .form__textarea:-ms-input-placeholder { color: #777; } .placeholder { color: #777; } /** * Selects */ .form__select { height: 39px; padding: 4px 5px; } @media all and (max-width: 43.8025em) { .form__select { padding: 6px 5px; } } .selectBorder { float: none; } @media all and (min-width: 43.8125em) { .selectBorder { float: left; } } .date .selectBorder { float: left; } .selectBorder.blue { float: none; padding: 0; position: relative; } .selectBorder.blue:after { content: '\25be'; color: #ffffff; font-size: 21px; font-size: 2.1rem; opacity: 0.45; pointer-events: none; position: absolute; right: 12px; top: 4px; } .selectBorder.blue:before { background: #0e84aa; content: ''; display: block; height: 30px; pointer-events: none; position: absolute; right: 6px; top: 4px; width: 20px; } .selectBorder.blue:hover:after, .selectBorder.blue:focus:after, .selectBorder.blue:active:after { opacity: 0.75; } .selectBorder.blue:hover:before, .selectBorder.blue:focus:before, .selectBorder.blue:active:before { background: #0c7292; } .selectBorder.blue:hover .form__select, .selectBorder.blue:focus .form__select, .selectBorder.blue:active .form__select { background: #0c7292; } .selectBorder.blue .form__select, .selectBorder.blue .selOneChoice { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #0e84aa; border: 0 none; color: #ffffff; cursor: pointer; display: inline-block; font-size: 13px; font-size: 1.3rem; font-style: normal; text-transform: uppercase; -webkit-transition: none; transition: none; } .selectBorder.blue .selOneChoice { height: 36px; padding: 9px 0 0px 8px; width: 100%; } /** * Checkboxes / Radio Buttons */ .form__item--multi .form__checkbox, .form__item--multi .form__radio { display: inline-block; margin-top: 12px; } .form__label--multi { display: inline-block; padding: 0 5px; } /** * Style invalid HTML5 input types, only after blur and not on page load. */ .form__item--blurred:not(:focus):invalid { border-color: #e74c3c; } /** * Submit Buttons */ .form__actions { padding: 4px 8px 8px; } /** * No visible labels */ .form--no-labels .form__item, .form--no-labels .form__actions { padding-top: 8px; } @media all and (min-width: 43.8125em) { /** * Multiple elements on a single line */ .form__share { clear: none; float: left; vertical-align: top; width: 50%; } .form__share--third { width: 33.333333333%; } .form__share--two-thirds { width: 66.666666666%; } .form__share--quarter { width: 25%; } .form__share--three-quarters { width: 75%; } .form__share--fifth { width: 20%; } .form__share--two-fifths { width: 40%; } .form__share--three-fifths { width: 60%; } .form__share--four-fifths { width: 80%; } .form__share--sixth { width: 16.666666666%; } .form__actions { text-align: right; } .form__actions .button { width: auto; } .form__actions.form__share .button { margin-top: 29.0px; width: 100%; } .form--no-labels .form__actions .button { margin-top: 0; } } /** * Errors */ .errorUnder { color: #e74c3c; font-size: 13px; font-size: 1.3rem; } .form__item--invalid, .message { border-radius: 6px; color: #fff; } .form__item--invalid a, .message a { color: #fff; font-weight: bold; } .form__item--invalid a:hover, .message a:hover, .form__item--invalid a:focus, .message a:focus, .form__item--invalid a:active, .message a:active { text-decoration: underline; } .form__item--invalid { background: #f4e3e1; color: #e74c3c; } .form__item--invalid:after { background: #e74c3c; border-radius: 50%; content: "!"; color: #fff; font-weight: bold; line-height: 18px; opacity: 0.3; padding: 0 7px; position: absolute; right: 15px; top: 45px; } .form__item--invalid .form__label { color: #e74c3c; } .form__item--invalid .form__input, .form__item--invalid .form__select, .form__item--invalid .form__textarea, .form__item--invalid .form__item--blurred:invalid { border-color: #e74c3c; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 3px rgba(204, 98, 87, 0.25); } .form__item--invalid .form__input:focus, .form__item--invalid .form__select:focus, .form__item--invalid .form__textarea:focus, .form__item--invalid .form__item--blurred:invalid:focus { border-color: #cc6257; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 6px rgba(204, 98, 87, 0.5); } .form__item--invalid .form__item__help { color: #e74c3c; } .message { background: #3498db; padding: 10px; } .message--error { background: #e74c3c; line-height: 25px; margin: 10px 0; padding: 2px 10px 2px 23px; position: relative; text-transform: capitalize; width: auto; } .message--error:before { color: #ffffff; content: '\25B2'; font-size: 8px; font-size: 0.8rem; left: 9px; position: absolute; top: -1px; } @media all and (min-width: 43.8125em) { .message--error { float: left; width: auto; } } .message--success { background: #2ecc71; } .formError, #formError { clear: none; color: #fa5f5f; display: block; float: none; font-size: 14px; font-size: 1.4rem; line-height: 22px; margin: 14px 0 20px 0; text-align: center; text-transform: uppercase; } @media all and (min-width: 43.8125em) { .formError, #formError { margin: 18px 0; text-align: left; } } .checkout .formError, .checkout #formError { float: left; margin: 16px 0; } /* ================================ Grid System ================================ */ /** * Rows */ .row { box-sizing: border-box; margin-left: -10px; margin-right: -10px; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } /** * Columns */ .col-1, .col-med-1, .col-small-1 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-1 { float: left; width: 8.33333%; } @media all and (max-width: 43.8025em) { .offset-small-1 { margin-left: 8.33333%; } .push-small-1 { left: 8.33333%; } .pull-small-1 { right: 8.33333%; } } .col-2, .col-med-2, .col-small-2 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-2 { float: left; width: 16.66667%; } @media all and (max-width: 43.8025em) { .offset-small-2 { margin-left: 16.66667%; } .push-small-2 { left: 16.66667%; } .pull-small-2 { right: 16.66667%; } } .col-3, .col-med-3, .col-small-3 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-3 { float: left; width: 25%; } @media all and (max-width: 43.8025em) { .offset-small-3 { margin-left: 25%; } .push-small-3 { left: 25%; } .pull-small-3 { right: 25%; } } .col-4, .col-med-4, .col-small-4 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-4 { float: left; width: 33.33333%; } @media all and (max-width: 43.8025em) { .offset-small-4 { margin-left: 33.33333%; } .push-small-4 { left: 33.33333%; } .pull-small-4 { right: 33.33333%; } } .col-5, .col-med-5, .col-small-5 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-5 { float: left; width: 41.66667%; } @media all and (max-width: 43.8025em) { .offset-small-5 { margin-left: 41.66667%; } .push-small-5 { left: 41.66667%; } .pull-small-5 { right: 41.66667%; } } .col-6, .col-med-6, .col-small-6 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-6 { float: left; width: 50%; } @media all and (max-width: 43.8025em) { .offset-small-6 { margin-left: 50%; } .push-small-6 { left: 50%; } .pull-small-6 { right: 50%; } } .col-7, .col-med-7, .col-small-7 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-7 { float: left; width: 58.33333%; } @media all and (max-width: 43.8025em) { .offset-small-7 { margin-left: 58.33333%; } .push-small-7 { left: 58.33333%; } .pull-small-7 { right: 58.33333%; } } .col-8, .col-med-8, .col-small-8 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-8 { float: left; width: 66.66667%; } @media all and (max-width: 43.8025em) { .offset-small-8 { margin-left: 66.66667%; } .push-small-8 { left: 66.66667%; } .pull-small-8 { right: 66.66667%; } } .col-9, .col-med-9, .col-small-9 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-9 { float: left; width: 75%; } @media all and (max-width: 43.8025em) { .offset-small-9 { margin-left: 75%; } .push-small-9 { left: 75%; } .pull-small-9 { right: 75%; } } .col-10, .col-med-10, .col-small-10 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-10 { float: left; width: 83.33333%; } @media all and (max-width: 43.8025em) { .offset-small-10 { margin-left: 83.33333%; } .push-small-10 { left: 83.33333%; } .pull-small-10 { right: 83.33333%; } } .col-11, .col-med-11, .col-small-11 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-11 { float: left; width: 91.66667%; } @media all and (max-width: 43.8025em) { .offset-small-11 { margin-left: 91.66667%; } .push-small-11 { left: 91.66667%; } .pull-small-11 { right: 91.66667%; } } .col-12, .col-med-12, .col-small-12 { min-height: 1px; padding: 0 10px; position: relative; } .col-small-12 { float: left; width: 100%; } @media all and (min-width: 43.8125em) { .col-med-1 { float: left; width: 8.33333%; } .col-med-2 { float: left; width: 16.66667%; } .col-med-3 { float: left; width: 25%; } .col-med-4 { float: left; width: 33.33333%; } .col-med-5 { float: left; width: 41.66667%; } .col-med-6 { float: left; width: 50%; } .col-med-7 { float: left; width: 58.33333%; } .col-med-8 { float: left; width: 66.66667%; } .col-med-9 { float: left; width: 75%; } .col-med-10 { float: left; width: 83.33333%; } .col-med-11 { float: left; width: 91.66667%; } .col-med-12 { float: left; width: 100%; } } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .offset-med-1 { margin-left: 8.33333%; } .push-med-1 { left: 8.33333%; } .pull-med-1 { right: 8.33333%; } .offset-med-2 { margin-left: 16.66667%; } .push-med-2 { left: 16.66667%; } .pull-med-2 { right: 16.66667%; } .offset-med-3 { margin-left: 25%; } .push-med-3 { left: 25%; } .pull-med-3 { right: 25%; } .offset-med-4 { margin-left: 33.33333%; } .push-med-4 { left: 33.33333%; } .pull-med-4 { right: 33.33333%; } .offset-med-5 { margin-left: 41.66667%; } .push-med-5 { left: 41.66667%; } .pull-med-5 { right: 41.66667%; } .offset-med-6 { margin-left: 50%; } .push-med-6 { left: 50%; } .pull-med-6 { right: 50%; } .offset-med-7 { margin-left: 58.33333%; } .push-med-7 { left: 58.33333%; } .pull-med-7 { right: 58.33333%; } .offset-med-8 { margin-left: 66.66667%; } .push-med-8 { left: 66.66667%; } .pull-med-8 { right: 66.66667%; } .offset-med-9 { margin-left: 75%; } .push-med-9 { left: 75%; } .pull-med-9 { right: 75%; } .offset-med-10 { margin-left: 83.33333%; } .push-med-10 { left: 83.33333%; } .pull-med-10 { right: 83.33333%; } .offset-med-11 { margin-left: 91.66667%; } .push-med-11 { left: 91.66667%; } .pull-med-11 { right: 91.66667%; } } @media all and (min-width: 43.8125em) { .col-1 { float: left; width: 8.33333%; } .offset-1 { margin-left: 8.33333%; } .push-1 { left: 8.33333%; } .pull-1 { right: 8.33333%; } .col-2 { float: left; width: 16.66667%; } .offset-2 { margin-left: 16.66667%; } .push-2 { left: 16.66667%; } .pull-2 { right: 16.66667%; } .col-3 { float: left; width: 25%; } .offset-3 { margin-left: 25%; } .push-3 { left: 25%; } .pull-3 { right: 25%; } .col-4 { float: left; width: 33.33333%; } .offset-4 { margin-left: 33.33333%; } .push-4 { left: 33.33333%; } .pull-4 { right: 33.33333%; } .col-5 { float: left; width: 41.66667%; } .offset-5 { margin-left: 41.66667%; } .push-5 { left: 41.66667%; } .pull-5 { right: 41.66667%; } .col-6 { float: left; width: 50%; } .offset-6 { margin-left: 50%; } .push-6 { left: 50%; } .pull-6 { right: 50%; } .col-7 { float: left; width: 58.33333%; } .offset-7 { margin-left: 58.33333%; } .push-7 { left: 58.33333%; } .pull-7 { right: 58.33333%; } .col-8 { float: left; width: 66.66667%; } .offset-8 { margin-left: 66.66667%; } .push-8 { left: 66.66667%; } .pull-8 { right: 66.66667%; } .col-9 { float: left; width: 75%; } .offset-9 { margin-left: 75%; } .push-9 { left: 75%; } .pull-9 { right: 75%; } .col-10 { float: left; width: 83.33333%; } .offset-10 { margin-left: 83.33333%; } .push-10 { left: 83.33333%; } .pull-10 { right: 83.33333%; } .col-11 { float: left; width: 91.66667%; } .offset-11 { margin-left: 91.66667%; } .push-11 { left: 91.66667%; } .pull-11 { right: 91.66667%; } .col-12 { float: left; width: 100%; } } @media all and (max-width: 43.8025em) { .phoneon { display: block; } .phoneon_il { display: inline-block; } .phoneoff, .phoneoff_il { display: none; } .phoneoff_tr { display: none; } .phonewrap { width: 100%; clear: left; } #responsiveOverride { display: block; font-size: 150%; line-height: 1.6em; padding-bottom: 20px; } xbody { font-size: 140%; line-height: 150%; } .resizetip { left: auto; right: 0; bottom: 0; } input { -webkit-text-size-adjust: none; } body { -webkit-overflow-scrolling: touch; background: #fff; } /* full page */ #outerContainer { width: 100%; overflow: visible; margin: 0 auto; text-align: center; } #outerContainerBox { width: 98%; float: left; background: none; padding: 0 0 0 1%; min-width: 316px; background: #fff; border: 0; } /* main page area */ #innerContainer, #secureContainer { width: 100%; height: auto; float: left; text-align: left; padding-bottom: 5px; } #checkoutContainer { width: 100%; float: left; text-align: left; } #mainContainer { width: 100%; float: left; margin: 0; padding: 0; } #orderContainer { width: 100%; display: inline; float: left; padding: 0 0px; } dl.std dt { width: 100%; } dl.std dd { width: 100%; margin-top: 0; } dl.std dd.pwd { width: 100%; } dl.std dd.std50 { width: 100%; } dl.std dt.btn { width: 22%; margin-top: 0; } dl.std dd.btn { width: 74%; margin-top: 0; } dl.std dd.std50Border { width: 100%; } dl.std dt.servicesbtn { float: left; width: auto; margin-top: 0; } dl.std dd.servicesbtn { float: right; width: auto; } dl.addf dd.b, dl.addf dd.d { margin-top: 16px; } ul.std li { width: 100%; } ul.std li.label { width: auto; } ul.std li.std50 { width: 100%; } .infoLeft { float: left; width: 100%; margin: 0; padding-left: 0; padding-right: 0; } .infoRight { float: left; margin-top: 20px; position: relative; top: 0; right: 0; width: 100%; padding-left: 0; padding-right: 0; } /* main area columns */ #leftContainer { display: none; } #leftContainerPerm { float: left; clear: left; width: 100%; min-height: 5px; margin: 0px 0 0 0; padding: 0 0 10px 0; text-align: left; } #rightContainer { display: none; float: right; clear: right; width: 160px; margin: 0px 0 0 0; } #centerContainer { float: left; clear: left; width: 100%; text-align: left; padding: 0px 0px 0px 0px; } xxxx#infoContainer { padding: 10px 1% 0; text-align: left; width: 98%; } xxx.infoFull { line-height: 25px; text-align: justify; } xxx.infoFull .last { padding-top: 20px; } .infoFull.empty { margin-left: 0; } .infoFull.refineEmpty { padding: 0 30px; text-align: center; } xxxx.iframeSize { height: auto; max-width: 100%; width: 98%; } #footer { float: left; width: 100%; } #footerseo, #payment { display: none; } #footerCheckout { float: left; width: 100%; } #payment { display: none; } #basketHelp { width: auto; } /* header */ #headerContainerCheckout { height: auto; } #leftMenu { padding: 0; } .addrbook .addressHldr { width: 97%; } .phoneTopMenu { width: 100%; } .phoneTopMenu ul { width: 100%; background: #CCC; padding: 5px 0; } .phoneTopMenu ul li.aon { color: #fff; } .menuLink { /*margin-top:-2.5px !important;*/ float: left; } .menuLink img { width: 35px; } /* phone top level menu */ #pmd_ax { float: left; xpadding-bottom: 3px; text-align: left; } #pmd_b { float: left; width: 99%; margin: 5px 0; xborder: 1px solid #a4a4a4; padding: 2px 0; } #pmd_b .main li.a { margin: 0px 60px 0px 0px; } #pmd_b .main li.b { float: right; width: 58px; } #pmd_b .main input.schInput { float: left; width: 98%; line-height: 18px; font-size: 16px; padding: 1px 0 0 1%; background: #fff; border: 0; -webkit-appearance: none; xcolor: #666; } #pmd_b .main input.go { float: left; width: 59px; height: 26px; margin: -1px 0 0 0; cursor: pointer; background: #565455; border: 1px solid #402713; color: #fff; } #pmd_b .main input.go:hover { background: #888888; } /* phone footer */ .phoneFooter { float: left; width: 100%; background: #f7f7f7; margin-top: 4px; text-align: left; } .phoneFooter li { float: left; width: 98%; padding: 0 0 0 2%; border-bottom: 2px solid #fff; } .phoneFooter li a { line-height: 30px; } .phoneFooter li a.login { padding-right: 30px; } .phoneFooter li .bar { display: none; } .alertXPrompt { height: 42px; } a.BMBtnBig, a.BMBtnBig:link, a.BMBtnBig:visited, a.BMBtnBig:active, a.BMBtnBig:hover { height: 28px; font-size: 22px; line-height: 28px; } /* crumbs ------ */ #crumbs, #crumbsT, #crumbsh { font-size: 130%; line-height: 1.4em; padding-left: 1%; } #crumbs p, #crumbsT p, #crumbsh p { font-size: 130%; line-height: 1.4em; } /* pp */ .ppHtmlH1 { margin: 0; } .ppHtmlTxt { display: block; } .ppHtmlSearchTxt { float: left; text-align: left; color: #000; font-size: 16px; clear: left; } .ppHtmlSearchTxt1 { margin-top: -100px; padding: 0; } .ppHtmlSearchTxt2 { margin-top: -160px; padding: 0 0 0 30px; font-size: 22px; } .ppHtmlSearchTxt3 { margin-top: -110px; padding: 0 0 0 160px; } .productListLine1 { width: 100%; margin: 0; padding: 0; line-height: 38px; } .productListLine1 div { xborder: 1px solid red; } .productListLine1 div.sortSel { width: 100%; } .productListLine1 div.sortSel .txt { padding: 0; } .productListLine1 div.sortSel .sel { padding: 0; width: 100%; line-height: 38px; } .productListLine1 div.pagerBox { padding: 0; } .productListLine1 div.pager div.pages { display: none; float: left; padding-right: 7px; } .productListLine1 div.pageSizeSel .txt { line-height: 38px; } .pager { line-height: 38px; } .pager a.prev { height: 34px; } .pager a.next { height: 34px; } .productListItem { width: 96%; margin: 5px 0px 0px 0px; min-height: 100px; border: 0; padding: 10px 2%; background: #f7f7f7; } .pli_left { width: 80px; padding-left: 0; } .pli_Img { height: auto; width: 80px; padding: 0; } .pli_Img img { width: 80px; } .pli_w_Img { float: left; width: 80px; height: auto; padding: 0px 0 0px 0px; overflow: hidden; } .pli_w_Img img { float: left; width: 80px; min-height: 60px; cursor: pointer; } .pli_right { float: none; width: auto; margin: 0px 0 0 90px; padding: 0; } .pli_right .pli_descrbox h1, .pli_right .pli_descrbox #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .pli_right .pli_descrbox .infohead, .pli_right .pli_descrbox #pageTitle h1, #pageTitle .pli_right .pli_descrbox h1, .pli_right .pli_descrbox .storeFinderDetail h2, .storeFinderDetail .pli_right .pli_descrbox h2 { text-align: left; } .pli_pricebox { width: 100%; text-align: left; padding: 0; height: 20px; margin-bottom: 12px; } .pli_price_chevron { float: right; font-size: 36px; line-height: 20px; color: #666; font-family: "Edmondsans Regular",sans-serif; } #productListMain .price { float: left; width: auto; text-align: left; } #productListMain .priceChanged { float: left; width: auto; text-align: left; } .pli_reviewboxp { float: left; width: auto; padding: 0 0 0 0px; width: 140px; /*margin-left:6px;*/ } .pli_reviewboxIp { float: left; width: 85px; margin: 0; } .pli_reviewboxIp a.infohi { font-size: 11px; line-height: 12px; } .pli_swatchbox { float: left; xwidth: 91%; margin: 0; padding: 5px; text-align: left; background: #fff; } .pli_swatchbox img { float: left; } #refinerPhoneDiv { float: left; width: 100%; margin-bottom: 5px; } #refinerPhone { display: none; padding-bottom: 10px; } #refinerPhone .lrga { display: block; } #refinerSwitch { float: left; width: 98%; line-height: 30px; font-size: 20px; margin: 5px 0 0 0; cursor: pointer; padding: 0 0 0 2%; background: url(../../images/plus.png) no-repeat 99% 8px #ccc; } .refiner .lmenu div { xzoom: 110%; } .refiner .lmenu div .refineScroll { max-height: none; overflow: visible; } .refiner .lmenu div dl.refinehead dd { margin: 5px 0 0 0; line-height: 30px; font-size: 120%; } .refiner .lmenu div dd div { padding: 6px 3px 6px 20px; } .refiner .lmenu div dd a { width: 92%; padding: 6px 3px 6px 7%; background: url(../../images/refine_off.png) 5px 9px no-repeat; } .refiner .lmenu div dd .refineFilteredOut, .lmenu div dd a.refineFilteredOut { color: #ccc; padding: 2px 0 1px 7%; } /* sp */ #productDetail div.tabArea { border: 0; width: 100%; } #spTabPages { padding: 0; width: 100%; } #productDetailMid { clear: left; width: 100%; padding: 10px 0px 0 0px; xfont-size: 120%; xline-height: 130%; } #spDetailTabs { display: none; } #spTabPages div.expander { display: block; } #productDetailLeft { float: none; margin: 0 auto; /*width: 55%;*/ } #productImage { width: 100%; } #productImage img { width: 100%; height: auto; } #productDetailRight { float: left; width: 100%; padding: 10px 0 0 0px; } #productRel { height: auto; } .viewed { height: auto; } .relBorder { display: none; } #productDetail div.row .voucherMsg { float: left; width: auto; font-size: 16px; padding: 0px; text-decoration: none; color: #333; font-weight: bold; margin-bottom: 30px; } #emailBISMain { width: 90%; } /* basket */ .halfTitle { width: auto; max-width: none; margin: 10px 120px 0 0; float: none; line-height: 30px; } .halfTitle.full { width: 100%; } .basketHead { display: none; } .bsktPhoneLine { float: left; width: 100%; margin-bottom: 10px; } .basketCheckout2 { width: 100%; } .basketCheckout2 img { margin: 0 8px 0 0; width: 24%; max-width: 100px; } .checkoutBtn { width: 100px; } .bsktp div.contents { float: left; width: 100%; } .bsktp div.image { float: left; border: 1px dashed #999; width: 140px; } .bsktp div.txt { margin-left: 150px; } .bsktp div.txt div { /*float:left; width:98%;*/ } .bsktp div.txt div.part { float: left; width: auto; padding-top: 5px; } .bsktp div.txt a.bsktRemoveBtn { float: right; padding-right: 5px; } .bsktp div.qty { padding-top: 5px; } .bsktp div.qty div.qtyi { width: 28px; } .bsktp div.qty input.qty { width: 28px; height: 28px; text-align: center; margin: 0; display: inline; border: 1px solid #999; } .bsktp div.qty .bsktUpdateBtn { width: auto; display: inline-block; margin-left: 4px; float: left; } .bsktp div.tincl { font-size: 18px; margin-top: 62px; } .bsktp div.totcol2 { float: left; width: 78%; padding: 0 3% 0 0%; text-align: right; } .bsktp div.ttincl { float: left; width: 15%; padding: 0 0 0 3%; } #basketCarrierB { width: 100%; padding-top: 20px; } #basketCode { width: 99.7%; max-width: none; } .basketTitle { height: auto; margin-bottom: 12px; text-align: center; } .minusQtyUpdate img, .plusQtyUpdate img { margin: 30px 5px 7px 5px; cursor: pointer; } .minusQtyUpdate { float: left; text-align: center; height: 58px; width: 30px; } .plusQtyUpdate { float: left; text-align: center; height: 58px; width: 30px; } .removeHolder { float: right; width: 60px; } .qtyHolder { height: 48px; width: 33px; float: left; text-align: center; } .updateHolder { width: 100%; float: left; height: auto; padding-left: 20px; margin-bottom: 12px; } div.qty { float: left; width: 100%; height: auto; text-align: left; } div.incl { width: 100%; height: 30px; } div.tincl { width: 100%; height: 30px; } .voucherDescr { float: none; margin-right: 0; text-align: center; } .phoneRow { display: none; } .productRelItem { width: auto; margin: 0px 8px 12px 8px; } .pli_rel_left { float: left; width: 100%; } .pli_rel_left .pli_Img { width: 70px; height: auto; padding: 0; border: 1px solid #ccc; } .pli_rel_left .pli_Img img { width: 70px; height: 85px; } .pli_rel_right { float: left; clear: left; width: 100%; padding: 0; } .pli_rel_right .pli_descrbox { display: none; } .pli_rel_right .pli_rel_pricebox { float: left; width: 100%; height: auto; text-align: center; } .pli_rel_right .pli_rel_pricebox .price { float: left; width: 100%; } .rel_border { display: none; } .pli_rel_right { text-align: left; } .pli_wasword { display: none; } #productRelJoe { background: #fff; } #productRelJoe .top { background: #f7f6f5; margin-bottom: 10px; } /* checkout */ #checkoutMain .expander { display: block; background: #ccc; color: #fff; float: left; width: 100%; } #deliveryLeft { width: 100%; float: left; } #deliveryRight { width: 100%; float: left; } #orderMainLeft { width: 100%; } #orderMainRight { width: 100%; } .orderChoiceDiv dt { width: 100%; } .orderChoiceDiv dd { width: 100%; } .basketSummaryParts .items { margin-top: 10px; } .basketSummaryParts .items td { display: inline-table; } .basketSummaryParts .items .image, .basketSummaryParts .items .title, .basketSummaryParts .items .qty, .basketSummaryParts .items .price, .basketSummaryParts .items .tot { width: 100%; text-align: left; margin: 0; border: 0; padding: 0; } .basketSummaryParts .items tr.evenrow, .basketSummaryParts .items td.evenrow { background: #f7f6f5; } .basketSummaryParts .items tr.oddrow, .basketSummaryParts .items td.oddrow { background: #fff; } /* my account */ x#phoneFooter { float: left; width: 100%; padding: 0 0 10px 0; } x#phoneFooter a.login { float: left; width: 92%; margin: 10px 3% 0 3%; font-size: 120%; line-height: 30px; border: 1px solid #a4a4a4; } x#phoneFooter .bar { display: none; } #loginLeft { width: 98%; margin: 0; padding: 10px 1%; } #logreg { border: none; margin: 0; padding: 0 1% 10px; width: 98%; } ul.addrbook li div.btns .btnsEdit { float: right; } ul.addrbook li div.btns .btnsDel { margin-top: 3px; clear: right; } /* register */ .regFormCol1 { width: 98%; } .regFormCol2 { width: 98%; } /* gift vouchers */ .giftVRight { width: 100%; } .gvSave { width: 100%; } #gvMain #gvCommon dl dt, #gvMain #gvPost dl dt, #gvMain #gvEmail dl dt { width: 100% !important; line-height: 21px; padding: 0; margin: 8px 0px 0px 0px; } #gvMain #gvCommon dl dd, #gvMain #gvPost dl dd, #gvMain #gvEmail dl dd { width: 100% !important; background: none; padding: 0; margin: 8px 0px 0px 0px; } /* login */ #loginMain .retcust { height: auto; } #loginMain .newcust { height: auto; } /* videos */ #videosListDiv { height: auto; overflow: visible; } #videosLeft { width: 100%; margin-top: 0px; } #videosPlayerDiv { width: 100%; height: auto; padding: 10px 0px; } .youtubeTitle { width: 100%; padding: 10px 0 0 0px; } #orderTypeLeft { width: 96.5%; margin: 10px 0 0 0; } #orderTypeRight { width: 96.5%; margin: 10px 0 0 0; } #orderTypeVeryRight { width: 96.5%; margin: 10px 0 0 0; } .bigPic { float: left; padding: 0px; } .bluetop .pad { padding-left: 5px; } #debug { position: relative; float: left; width: 100%; background: #aaf; color: black; z-index: 10002; text-align: left; padding: 10px 0; } .sp_scroll_outer, .hp_scroll_outer { overflow: hidden; width: 100%; } .sp_scroll, .hp_scroll { overflow-x: scroll; overflow-y: hidden; } /* HP Scroll Bespokes */ .hp_scroll_outer { height: 184px; } .hp_scroll { height: 204px; } .hp_scroll_right, .hp_scroll_right_off, .hp_scroll_left, .hp_scroll_left_off { margin-top: -130px; } /* we increased the height */ /* SP Scroll bespokes */ .sp_scroll_outer { height: 170px; } .sp_scroll { height: 190px; } .sp_scroll_right, .sp_scroll_right_off, .sp_scroll_left, .sp_scroll_left_off { margin-top: -130px; } /* we increased the height */ #mobAltImageList { float: left; width: 100%; position: relative; } #imageDiv { float: left; width: 100%; position: relative; } .zoomMobPrompt { position: absolute; color: #fff; background: #777; border: 1px solid #777; padding: 10px; width: 200px; left: 50%; top: 100px; margin: 0 0 0 -100px; text-align: center; display: none; border-radius: 5px; filter: alpha(opacity=80); opacity: 0.80; font-weight: bold; } .swipeImage { display: inline-block; width: 340px; height: auto; text-align: center; } .swipeImage a { float: left; width: 100%; } .swipeImage a img { float: left; width: 100%; } .swipeImage img { max-width: 100%; vertical-align: middle; overflow: hidden; max-height: 344px; } .sp_scroll_outer { float: left; width: 100%; /*min-height:371px;*/ overflow: hidden; height: 366px; } .sp_scroll { position: relative; margin: 0; height: 366px; overflow: hidden; overflow-x: scroll; overflow-y: hidden; } .sp_scroll_inner { position: absolute; width: 20000px; /*height:388px;*/ } .sp_scroll_hctrl { position: relative; float: left; width: 100%; margin-top: -18px; padding: 4px 0; background-color: #fff; } .sp_scroll_hbar { float: left; width: 100%; height: 10px; background: #ccc; border-radius: 5px; } .sp_scroll_hhandle { float: left; width: 20%; height: 10px; background: #830505; cursor: pointer; border-radius: 5px; } /* SP Scroll bespokes */ .sp_scroll_right, .sp_scroll_right_off, .sp_scroll_left, .sp_scroll_left_off { margin-top: -130px; } /* we increased the height */ .live-help { display: none; } #regLeft { max-width: 100%; width: 100%; } #loginMain .loginbtn { margin-top: 0; } xul.addf { width: 99%; } ul.addf li.b { margin: 0 150px 0 0; } dl.std { width: 99.7%; } #contactPic { font-size: 16px; width: 100%; } #contactLeft { width: 100%; margin-top: 12px; } dl.std dt.pwd, #loginLeft h2 { text-align: left; } #loginLeft h2 { margin-bottom: 0; } #loginMain .loginbtn, #logreg .regbtn { float: none; margin: 5px 0 0; width: 100%; } #logreg form { padding-left: 0; } #logreg h2 { margin: 0 auto; } #friendsDetails { max-width: 100%; width: 100%; } #friendsDetails .BMBtn { float: left; margin: 10px 0; width: 99.55%; } /* start of rs */ .footSocial, .footNews { float: none; width: 100%; } .footSocial { border-bottom: 1px solid #fff; height: 50px; margin: 0 auto; text-align: center; width: 320px; } .footNews { width: 98%; } .footCatalogue { float: none; line-height: 0; margin: 12px auto; min-width: 120px; text-align: center; width: 250px; } .footCatalogue { float: none; width: 300px; min-width: 120px; margin: 12px auto 0; line-height: 0; text-align: center; } .footCatalogue span { display: inline-block; line-height: 18px; margin: 25px 0 0 5px; } .footerRowOne { background: #ccc; clear: left; height: 205px; margin: 0 auto; width: 100%; } .footSocial a { display: inline-block; margin: 0 3.2% 12px; } #phoneHead { text-align: center; } xinput.std, xselect.std, xtextarea.std { width: 99.7%; } x.bsktp.contents { clear: left; margin: 0; padding: 10px 0; } x#spTabPages .tab, #spTabPages .taboff { padding: 0 1% 10px; width: 98%; } x.co_title { line-height: 30px; width: 100%; } x#orderMainRight { float: none; width: 100%; } x#deliveryRight { float: none; width: 100%; } x.basketSummary .label { float: left; padding-right: 10px; text-align: right; width: 50%; } x#checkoutChooseAddress { width: 98%; } #checkoutEnterAddress { width: 100%; } a.brandBible { width: 100%; } /*a.brandBible p {text-align: center; font-size: 18px; margin: 0px 0px 10px;}*/ .brandBibles { text-align: center; } #phoneMenu li:focus a { color: red; } #div_pos3a_p li { background: #565455; color: #fff; padding: 6px 0 0; width: 100%; } #productImage { text-align: center; } #productImageList { margin-bottom: 8px; } div.sharearea { margin: 0 auto; float: none; overflow: hidden; } #productImageList div img { margin: 0px 10px; } #viewedList { height: 130px; } .co_loginRadio .logininput { text-align: left; margin-left: 180px; } .co_loginRadio span { float: left; width: 170px; } .basketSummaryParts .items td { padding: 2px; } .pull-left { float: left; } .homepagevideo { width: 310px; height: 174px; } #infoContainer form select { width: 100%; } /* 2nd select 100% mobile */ #newsMain { float: left; width: 100%; margin-top: 0px; } .newsThanksImage { width: 99%; } .homeImg1L, .homeImg1R { position: absolute; top: 54%; width: 30px; height: 30px; margin-top: -15px; cursor: pointer; z-index: 2; } .homeImg1L { left: 20px; } .homeImg1R { right: 20px; } .smOuterHolder { width: 100%; text-align: center; height: 40px; float: left; margin-bottom: 20px; } .productFeefoMob { position: absolute; left: 3px; bottom: 20px; } .reviewstars_overlay { xmargin: -16px 0px 0px; } .rightPriceHolder { float: right; width: 120px; } } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .padon { display: block; } .padon_il { display: inline-block; } .padoff, .padoff_il { display: none; } #responsiveOverride { display: block; } /* full page */ #outerContainer { width: 100%; overflow: visible; margin: 0px auto; text-align: center; } #outerContainerBox { width: 100%; float: left; background: none; margin: 0 0px 0 0; background: #fff; border-left: 0; overflow: hidden; } /* main page area */ #innerContainer, #secureContainer { width: 100%; height: auto; float: left; text-align: left; padding-bottom: 5px; } #checkoutContainer { width: 100%; float: left; text-align: left; } #mainContainer { width: 99%; float: left; min-height: 350px; } #orderContainer { width: 100%; display: inline; float: left; padding: 0 0px; } /* main area columns */ #leftContainer { float: left; clear: left; width: 200px; min-height: 300px; margin: 0px 0 0 0; padding: 0 0 10px 0; text-align: left; } #leftContainerPerm { float: left; clear: left; width: 180px; min-height: 300px; margin: 0px 0 0 0; padding: 0 0 10px 0; text-align: left; } #rightContainer { float: right; clear: right; width: 160px; margin: 0px 0 0 0; } #centerContainer { margin-left: 210px; text-align: left; padding: 0px 0px 0px 0; } #infoContainer .a > img { width: 47%; } #footer { float: left; width: 100%; } #footerseo { display: none; } #footerCheckout { float: left; width: 100%; } #footerCheckout .footRight { display: none; } #footL { padding-top: 12px; } #footM { padding-left: 14px; } #footR { clear: left; padding-top: 5px; } .ppHtmlTxt { display: block; } .addrbook .addressHldr { width: 97%; } #productDetailRight { float: left; width: 100%; padding: 20px 0 0 0px; } x#productDetailMid { float: none; width: auto; padding: 0px 0px 0 20px; margin-left: 373px; } x#productDetailMid #resp1 { clear: left; } x#productRel { width: 100%; margin: 10px 0 0 0; padding-right: 0; } x.viewed { width: 100%; margin: 10px 0 0 0; } /* videos */ #videosListDiv { height: auto; overflow: visible; margin-bottom: 20px; } #orderTypeLeft { width: 46%; margin: 10px 1% 0 0; } #orderTypeRight { width: 46%; margin: 10px 0 0 0; } #orderTypeVeryRight { width: 46%; margin: 10px 0 0 0; } .voucherDetails { float: left; width: 100%; } .infoFull.clearfix > img { float: none; margin-left: 20%; } h4 { font-size: 110%; } .homepagevideo { width: 320px; } } @media all and (min-width: 50.125em) and (max-width: 61.24em) { .desktopon { display: block; } .desktopon_il { display: inline-block; } .desktopoff, .desktopoff_il { display: none; } #responsiveOverride { display: block; } /* full page */ #outerContainer { width: 100%; overflow: visible; margin: 0px auto; text-align: center; } #outerContainerBox { width: 100%; float: left; background: none; margin: 0 0px 0 0; background: #fff; border-left: 0; overflow: hidden; } /* main page area */ #innerContainer, #secureContainer { width: 100%; height: auto; float: left; text-align: left; padding-bottom: 5px; } #checkoutContainer { width: 100%; float: left; text-align: left; } #mainContainer { width: 99%; float: left; min-height: 350px; } #orderContainer { width: 100%; display: inline; float: left; padding: 0 0px; } /* main area columns */ #leftContainer { float: left; clear: left; width: 200px; min-height: 300px; margin: 0px 0 0 0; padding: 0 0 10px; text-align: left; } #leftContainerPerm { float: left; clear: left; width: 185px; min-height: 300px; margin: 0px 0 0 0; padding: 0 10px 10px 0; text-align: left; } #rightContainer { float: right; clear: right; width: 160px; margin: 0px 0 0 0; } #centerContainer { margin-left: 210px; text-align: left; padding: 0px 0px 0px 0; } #infoContainer .a > img { max-width: 288px; width: 47%; } #footer { float: left; width: 100%; } #footerCheckout { float: left; width: 100%; } #headC .back { display: none; } .menu { font-size: 18px; } .ppHtmlTxt { display: block; } #productDetailRight { float: left; width: 100%; padding: 20px 0 0 0px; } x#productDetailMid { float: none; width: auto; padding: 0px 0px 0 20px; margin-left: 373px; } x#productDetailMid #resp1 { clear: left; } x#productRel { width: 100%; margin: 10px 0 0 0; } x.viewed { width: 100%; margin: 10px 0 0 0; } .voucherDetails { float: left; width: 52%; } .DTwomenssizepage > img { float: left; height: auto; margin-bottom: 20px; width: 30%; } #friendsDetails { float: none; } xx#productDetailMid { width: 55%; } } @media all and (min-width: 61.25em) { .designedon { display: block; } .designedon_il { display: inline-block; } .designedoff, .designedoff_il { display: none; } /* full page */ #outerContainer { text-align: center; } #outerContainerBox { width: 100%; display: block; min-height: 170px; } #outerContainerBoxI { margin: 0 auto; background: #fff; } /* full width bars */ /* height of footerRowTwo and the position of the grey block in footbar.png are a matched pair */ .outerContainerCheckout { background: transparent; } /* main page area */ #innerContainer, #secureContainer { height: auto; text-align: left; padding-bottom: 5px; } #checkoutContainer { float: left; text-align: left; } #mainContainer { float: left; } #orderContainer { display: inline; float: left; padding: 0 0px; } /* main area columns */ #leftContainer { float: left; clear: left; width: 200px; min-height: 300px; margin: 0px 0 0 0; padding: 0 0 10px 0; text-align: left; } #leftContainerPerm { float: left; clear: left; width: 185px; min-height: 300px; margin: 0px 0 0 0; padding: 0 0 10px 0; text-align: left; } #rightContainer { float: right; clear: right; width: 160px; margin: 0px 0 0 0; } #centerContainer { float: left; text-align: left; padding: 0px 0px 0px 10px; } #footer { /*float:left; width:100%;height:262px;*/ } /* height must match footbar.png */ #footerCheckout { float: left; width: 100%; } .sp_spacer { float: left; width: 100%; display: block; height: 30px; } } /* ================================ Fonts ================================ */ .form__input, .form__select, .form__textarea, .productListLine1 div.pageSizeSel .txt, .productListLine1 div.sale_legend, .productListLine1 div.pager div.pages, .productListItem .pli_right .sww_outer .sww_name, .widthtaxexprice, .keyLine, .reviews .reviewitem .comment, #centerContainer.top .fitting-advice .blockquote .col-8 > a:not(.button), #centerContainer.top .fitting-advice .blockquote blockquote span, body, #buyingArea dd, #buyingArea .qtymx dd, #centerContainer.top .fitting-advice .blockquote blockquote p, #centerContainer.top .retailers .head, #centerContainer.top .retailers .addr { font-family: 'Times New Roman', Georgia, serif; font-weight: normal; } .productListLine1 div.pageSizeSel .txt, .productListLine1 div.sale_legend, .productListLine1 div.pager div.pages, .productListItem .pli_right .sww_outer .sww_name, .widthtaxexprice, .keyLine, .reviews .reviewitem .comment, #centerContainer.top .fitting-advice .blockquote .col-8 > a:not(.button), #centerContainer.top .fitting-advice .blockquote blockquote span { font-style: italic; } @font-face { font-family: "sinkinsans-500medium"; src: url("../../fonts/sinkin/sinkinsans-500medium-webfont.eot"); src: url("../../fonts/sinkin/sinkinsans-500medium-webfont.eot?#iefix") format("embedded-opentype"), url("../../fonts/sinkin/sinkinsans-500medium-webfont.woff") format("woff"), url("../../fonts/sinkin/sinkinsans-500medium-webfont.ttf") format("truetype"), url("../../fonts/sinkin/sinkinsans-500medium-webfont.svg#sinkinsans-500medium") format("svg"); } .button, .selectBorder.blue .form__select, .selectBorder.blue .selOneChoice, .formError, #formError, html.holding #mainContainer h2, .header, .telephone, body #suggestionBox #sresults li.head, #basketPopupM #basketPopupBot > div, .nav--main .mtop .nav__link, .nav--main .menu div dd.subHead, .nav--main .menu div dd.subHeadFill, #headerContainerPhone, .phoneTopMenu, div#crumbs, div#crumbsT, div#crumbsh, .lmenu div dd.subHead, .lmenu li.lrga a.toponly, #refinerSwitch, #leftContainer #pos1a, #productListHTML .ppHtmlTopText #searchfor, #productListHTML .ppHtmlSearchTxt1 #searchfor, .productListLine1 div.pageSizeSel .sel .pageSizeDiv, .productListLine1 div.pager .pthis, .productListLine1 div.pager a, #partsList .refineEmpty h1, #partsList .refineEmpty #servicesMain .servicesPage .infohead, #servicesMain .servicesPage #partsList .refineEmpty .infohead, #partsList .refineEmpty .storeFinderDetail h2, .storeFinderDetail #partsList .refineEmpty h2, .productListItem .pli_right .sww_outer .sww_price, #productDetailTitle h1 > div, #productDetailTitle #servicesMain .servicesPage .infohead > div, #servicesMain .servicesPage #productDetailTitle .infohead > div, #productDetailTitle #pageTitle h1 > div, #productDetailTitle .storeFinderDetail h2 > div, .storeFinderDetail #productDetailTitle h2 > div, #productDetailMid_I div.tabArea #spDetailTabs li, #productDetailMid_I div.tabArea .expander, .matrixBox h2, #matrixBody, #buyingArea dt, #buyingArea .qtymx dt, #buyingArea ul.buybox #price, #buyingArea ul.buybox li .form__label.form__share, .DDLBox #mob_price, .reviews .reviewitem .head h4, .leaveReview h2, .leaveReview h3, .alertXHeadText, .lightBoxHead, .mainBasket .basketMessage, #basketLeft .bskt th, #basketLeft .bskt td.last, #basketLeft .bsktp div.tincl, #basketLeft .bsktp div.last, #basketLeft .basketCodeLabel, #checkoutTop #checkoutCrumbs li a, #checkoutTop #checkoutCrumbs li span, #checkoutMain div.expander, #checkoutMain .co_subtitle, #checkoutMain #payment_frame #spframeloading, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .head, #checkoutMain #orderChoice_cc_total .infohi, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .total .tot, #loginMain #loginForm h2, #loginMain #logreg h2, .loggedin #loginMain > h2, #regLeft .infotitle, #leftContainerPerm #phoneMenuS a, .servicesPage .editBtn, #servicesMain .servicesPage .addrbook .addressHldr .type h2, #servicesMain .servicesPage #trackMain th, .circle, #contactTop .hrline, .catRequest h2, #centerContainer.top .fitting-advice .blockquote blockquote cite, #siteMap .wrapper-inner div dd.subHead, #siteMap .wrapper-inner div dd.subHead.toponly, #siteMap .wrapper-inner li.lrga a.toponly, #siteMap .wrapper-inner li.lrga dd.toponly, #footer .wrapper:first-of-type, #footer .col-4.pull-4 { font-family: "sinkinsans-500medium", sans-serif; } @font-face { font-family: "sinkinsans-500mediumitalic"; src: url("../../fonts/sinkin/sinkinsans-500mediumitalic-webfont.eot"); src: url("../../fonts/sinkin/sinkinsans-500mediumitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../../fonts/sinkin/sinkinsans-500mediumitalic-webfont.woff") format("woff"), url("../../fonts/sinkin/sinkinsans-500mediumitalic-webfont.ttf") format("truetype"), url("../../fonts/sinkin/sinkinsans-500mediumitalic-webfont.svg#sinkinsans-500mediumitalic") format("svg"); } #productListHTML .ppHtmlTopText #searchfor span, #productListHTML .ppHtmlSearchTxt1 #searchfor span { font-family: "sinkinsans-500mediumitalic", sans-serif; } @font-face { font-family: "bebasneue_book"; src: url("../../fonts/bebas/bebasneue_book-webfont.eot"); src: url("../../fonts/bebas/bebasneue_book-webfont.eot?#iefix") format("embedded-opentype"), url("../../fonts/bebas/bebasneue_book-webfont.woff") format("woff"), url("../../fonts/bebas/bebasneue_book-webfont.ttf") format("truetype"), url("../../fonts/bebas/bebasneue_book-webfont.svg#bebasneue_book") format("svg"); } @font-face { font-family: "bebasneue_regular"; src: url("../../fonts/bebas/bebasneue_regular-webfont.eot"); src: url("../../fonts/bebas/bebasneue_regular-webfont.eot?#iefix") format("embedded-opentype"), url("../../fonts/bebas/bebasneue_regular-webfont.woff") format("woff"), url("../../fonts/bebas/bebasneue_regular-webfont.ttf") format("truetype"), url("../../fonts/bebas/bebasneue_regular-webfont.svg#bebasneue_regular") format("svg"); } #basketPopupM .basketPopupMain .b .bb { font-family: "bebasneue_regular", sans-serif; } /* ================================ Resize tip ================================ */ /*@include mq($to:tablet) { #resizetip.resizetip { left:auto !important; right:0 !important; &:after { content:' JS / CSS phone'; } } } @include mq($from:tablet) { #resizetip.resizetip { left:auto !important; right:0 !important; &:after { content:' JS / CSS pad'; } } } @include mq($from:desktop) { #resizetip.resizetip { left:auto !important; right:0 !important; &:after { content:' JS / CSS desktop'; } } } @include mq($from:wide) { #resizetip.resizetip { left:auto !important; right:0 !important; &:after { content:' JS / CSS designed'; } } }*/ /* ================================ General ================================ */ html { font-size: 58.5%; } @media all and (min-width: 43.8125em) { html { font-size: 62.5%; } } @media all and (max-width: 50.115em) { html { overflow-x: hidden; } } html.varHeight { height: auto; } html.holding { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; } html.holding .varHeight { height: 100%; } html.holding #mainContainer { margin-top: 70px; text-align: center; } html.holding #mainContainer h2 { color: #0e84aa; font-size: 21px; font-size: 2.1rem; } @media all and (min-width: 50.125em) { html.checkoutHtml { height: 100%; } html.checkoutHtml body { height: 100%; } html.checkoutHtml .page-wrapper, html.checkoutHtml #outerContainer, html.checkoutHtml #outerContainerBox, html.checkoutHtml #outerContainerBoxI { height: 100%; } } body { color: #515050; font-size: 16px; font-size: 1.6rem; line-height: 1.5; -webkit-overflow-scrolling: disable; box-orient: vertical; box-direction: normal; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .page-wrapper, #outerContainer, #outerContainerBox, #outerContainerBoxI { box-orient: vertical; box-direction: normal; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .page-wrapper { position: relative; left: 0; -webkit-transition: left 0.4s; transition: left 0.4s; } @media all and (max-width: 50.115em) { .page-wrapper.open { left: 205px; } } .wrapper-inner { background: none; float: none; margin: 0 auto; max-width: 1200px; padding: 0 10px; width: 100%; } @media all and (min-width: 43.8125em) { .wrapper-inner { width: 100%; } } #outerContainerBox, #outerContainerBoxI { float: none; max-width: none; min-height: 0; min-width: 0; overflow: visible; padding: 0; width: 100%; } #mainContainer, #innerContainer { float: none; box-flex: 1; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } #innerContainer > hr { display: none; } @media all and (min-width: 50.125em) { #innerContainer > hr { border-top: 1px solid #e5e5e6; display: block; float: none; margin: 0; } } #mainContainer { width: 100%; } @media all and (min-width: 43.8125em) { #centerContainer { float: none; margin-left: 225px; padding: 0 0 0 25px; } } @media all and (min-width: 61.25em) { #centerContainer { margin-left: 275px; padding: 0 0 0 30px; } } #centerContainer.full { margin-left: 0; padding: 0; width: 100%; } a { color: #515050; } a:hover, a:focus, a:active { color: #1a3034; } a.highlight { color: #a2c9cc; text-decoration: underline; } a.highlight:hover, a.highlight:focus, a.highlight:active { color: #1a3034; } /* ================================ Header - general ================================ */ #headerContainer, #headerContainerCheckout { float: none; } .header { background: #92bfc3; border-bottom: 3px solid #ffffff; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; } .header__login { margin: 45px 0 22px 0; } .header__login .bar { margin: 0 8px; } .header__logo { float: left; margin-top: 13px; text-align: center; width: 52%; } @media all and (min-width: 43.8125em) { .header__logo { height: 90px; width: 29%; } } .header__logo .logo, .header__logo img { max-height: 80px; max-width: 186px; } .header__logo img { margin-bottom: 17px; } .holding .header__logo, .checkout .header__logo { margin-bottom: 20px; } @media all and (min-width: 43.8125em) { .holding .header__logo, .checkout .header__logo { margin-bottom: 0; } } .holding .header__logo { width: 47%; } .telephone { color: #ffffff; margin-top: 13px; width: 25%; } .telephone .telephone__icon, .telephone img { float: left; height: 28px; width: 28px; vertical-align: top; } .telephone span.telephone__number { clear: none; color: #ffffff; font-size: 18px; font-size: 1.8rem; margin: 0 0 0 8px; max-width: none; } .telephone span.telephone__number a { color: #ffffff; } .telephone span { clear: left; display: block; float: left; font-size: 10px; font-size: 1rem; margin-left: 37px; text-align: left; text-transform: uppercase; max-width: 190px; } @media all and (min-width: 43.8125em) { .telephone { float: left; } .checkout .telephone { width: 34%; } } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .telephone { width: 37%; } } .header__right1 { float: right; margin-top: 13px; text-align: right; width: 25%; } @media all and (min-width: 50.125em) { .header__right1 { margin-top: 13px; } } .header__right2 { float: right; margin-top: 13px; text-align: right; width: 21%; } @media all and (min-width: 50.125em) { .header__right2 { margin-top: 13px; } } #miniBasketMain { color: #515050; display: inline-block; margin-top: 5px; text-align: center; vertical-align: top; /** * Mini Basket */ } @media all and (min-width: 43.8125em) { #miniBasketMain { color: #ffffff; float: right; margin-top: 0; } } #miniBasketMain .basket__img { display: inline-block; width: 32px; } #miniBasketMain .basket__img .bag, #miniBasketMain .basket__img img { fill: #49848f; height: 32px; width: 32px; } #miniBasketMain .basketTot { left: -1px; position: absolute; top: 2px; width: 28px; } #miniBasketMain #ajaxBasket #miniBasketMainA, #miniBasketMain .basketTop a.linkco { display: block; font-size: 14px; font-size: 1.4rem; float: none; height: 36px; line-height: 36px; position: relative; -webkit-transition: all 0.4s; transition: all 0.4s; width: auto; } #miniBasketMain #ajaxBasket #miniBasketMainA:hover .bag, #miniBasketMain #ajaxBasket #miniBasketMainA:focus .bag, #miniBasketMain #ajaxBasket #miniBasketMainA:active .bag, #miniBasketMain .basketTop a.linkco:hover .bag, #miniBasketMain .basketTop a.linkco:focus .bag, #miniBasketMain .basketTop a.linkco:active .bag { fill: #ffffff; -webkit-transition: fill 0.5s; transition: fill 0.5s; } #miniBasketMain #ajaxBasket #miniBasketMainA:hover span, #miniBasketMain #ajaxBasket #miniBasketMainA:focus span, #miniBasketMain #ajaxBasket #miniBasketMainA:active span, #miniBasketMain .basketTop a.linkco:hover span, #miniBasketMain .basketTop a.linkco:focus span, #miniBasketMain .basketTop a.linkco:active span { color: #515050; } #miniBasketMain #ajaxBasket #miniBasketMainA span, #miniBasketMain .basketTop a.linkco span { color: #ffffff; display: inline-block; float: left; height: 32px; text-align: center; vertical-align: top; } #miniBasketMain #ajaxBasket #miniBasketMainA span.basket__total, #miniBasketMain .basketTop a.linkco span.basket__total { color: #515050; margin-top: 2px; width: auto; } @media all and (min-width: 43.8125em) { #miniBasketMain #ajaxBasket #miniBasketMainA span.basket__total, #miniBasketMain .basketTop a.linkco span.basket__total { color: #ffffff; } } #miniBasketMain .basketTop a.linkco { background-image: none; } /** * Header Login */ #headLogin { clear: both; float: right; } @media all and (max-width: 43.8025em) { #headLogin { padding: 0 10px 10px 10px; } } #headLogin a, #headLogin span { color: #ffffff; display: inline-block; font-size: 9.7px; font-size: 0.97rem; text-transform: uppercase; } /** * Quick Search */ #pmd_b { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; float: none; margin: 0 auto; } #pmd_b form { border: 1px solid #bbb; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; margin: 15px 0; } #searchBar, #searchBarP, #pmd_b { width: 214px; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #searchBar, #searchBarP, #pmd_b { float: right; margin-right: 10px; } } @media all and (min-width: 50.125em) { #searchBar, #searchBarP, #pmd_b { float: right; width: 194px; } } #searchBar .form__share--two-thirds, #searchBarP .form__share--two-thirds, #pmd_b .form__share--two-thirds { float: left; padding: 0; margin-bottom: 0; width: 80%; } #searchBar .form__share--two-thirds .form__input, #searchBarP .form__share--two-thirds .form__input, #pmd_b .form__share--two-thirds .form__input { border: 0 none; font-size: 15px; font-size: 1.5rem; height: 28px; line-height: 21px; padding-left: 9px; vertical-align: top; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #searchBar .form__share--two-thirds .form__input:hover, #searchBar .form__share--two-thirds .form__input:focus, #searchBarP .form__share--two-thirds .form__input:hover, #searchBarP .form__share--two-thirds .form__input:focus, #pmd_b .form__share--two-thirds .form__input:hover, #pmd_b .form__share--two-thirds .form__input:focus { background: #f6f6f6; } } #searchBar .form__share--third, #searchBarP .form__share--third, #pmd_b .form__share--third { float: left; height: 28px; line-height: 21px; padding: 0; width: 20%; } #searchBar .form__share--third .button, #searchBarP .form__share--third .button, #pmd_b .form__share--third .button { background: #ffffff url(../../images/svg/sprite.svg.bg-magnify.svg) no-repeat 13px 4px; border: 0 none; height: 28px; line-height: 21px; text-indent: -9999px; vertical-align: top; } #searchBar .form__share--third .button:hover, #searchBar .form__share--third .button:focus, #searchBar .form__share--third .button:active, #searchBarP .form__share--third .button:hover, #searchBarP .form__share--third .button:focus, #searchBarP .form__share--third .button:active, #pmd_b .form__share--third .button:hover, #pmd_b .form__share--third .button:focus, #pmd_b .form__share--third .button:active { background-color: #f4f4f4; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #searchBar .form__share--third .button:hover:hover, #searchBar .form__share--third .button:hover:focus, #searchBar .form__share--third .button:focus:hover, #searchBar .form__share--third .button:focus:focus, #searchBar .form__share--third .button:active:hover, #searchBar .form__share--third .button:active:focus, #searchBarP .form__share--third .button:hover:hover, #searchBarP .form__share--third .button:hover:focus, #searchBarP .form__share--third .button:focus:hover, #searchBarP .form__share--third .button:focus:focus, #searchBarP .form__share--third .button:active:hover, #searchBarP .form__share--third .button:active:focus, #pmd_b .form__share--third .button:hover:hover, #pmd_b .form__share--third .button:hover:focus, #pmd_b .form__share--third .button:focus:hover, #pmd_b .form__share--third .button:focus:focus, #pmd_b .form__share--third .button:active:hover, #pmd_b .form__share--third .button:active:focus { background-color: #f6f6f6; } } .no-svg #searchBar .form__share--third .button, .no-svg #searchBarP .form__share--third .button, .no-svg #pmd_b .form__share--third .button { background: #ffffff url(../../images/svg/sprite.svg.bg-magnify.png) no-repeat 13px 4px; } @media all and (min-width: 43.8125em) { #searchArea { margin-top: 7px; } } @media all and (min-width: 50.125em) { #searchArea { margin-top: 11px; } } #searchMain { line-height: normal; } /** * Search Suggestions / Type Ahead Box */ body #suggestionBox #sresults { background: #ffffff; border: none; box-shadow: 0px 2px 1px 0px #bbb; margin-top: 0; padding: 0 12px; } body #suggestionBox #sresults ul { padding: 0; } body #suggestionBox #sresults li.head { color: #0e84aa; font-size: 11px; font-size: 1.1rem; margin: 14px 0 5px; text-transform: uppercase; } body #suggestionBox #sresults a { color: #6b6969; font-size: 15px; font-size: 1.5rem; height: auto; line-height: 17px; } body #suggestionBox #sresults a .match { color: #fa5f5f; } body #suggestionBox #sresults a:hover, body #suggestionBox #sresults a:focus, body #suggestionBox #sresults a:active { background: #ededed; text-decoration: none; } body #suggestionBox #sresults table { margin: 0; } body #suggestionBox #sresults table > tbody > tr > td { border-top: none; padding: 5px 0 0 0; } /** * Mini Basket Popup */ #basketPopup { width: 249px; } @media all and (max-width: 50.115em) { #basketPopup { display: none !important; } } #basketPopupT, #basketPopupM { clear: none; float: none; } #basketPopupM .basketPopupMain { float: none; } #basketPopupM .basketPopupMain div { display: inline-block; float: none; vertical-align: top; } #basketPopupM .basketPopupMain .a { margin-right: 3px; } #basketPopupM .basketPopupMain .a a { display: block; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } #basketPopupM .basketPopupMain .a a:hover, #basketPopupM .basketPopupMain .a a:focus, #basketPopupM .basketPopupMain .a a:active { opacity: 0.6; } #basketPopupM .basketPopupMain .b { margin-left: 0; width: 143px; } #basketPopupM .basketPopupMain .b > div { display: block; margin-bottom: 2px; } #basketPopupM .basketPopupMain .b .ba { color: #0e84aa; font-size: 18px; font-size: 1.8rem; letter-spacing: -1px; line-height: 25px; text-transform: uppercase; } #basketPopupM .basketPopupMain .b .bb { font-size: 18px; font-size: 1.8rem; } #basketPopupM .basketPopupMain .o { padding: 9px 4%; width: 100%; } #basketPopupM #basketPopupScroll { float: none; display: block; } #basketPopupM #basketPopupBot { float: none; padding: 12px 0 2px 0; } #basketPopupM #basketPopupBot > div { color: #3d6e77; font-size: 18px; font-size: 1.8rem; text-transform: uppercase; } #basketPopupM #basketPopupBtn { float: none; line-height: normal; margin: 7px auto 10px auto; } @media all and (min-width: 43.8125em) { #basketPopupM #basketPopupBtn { width: 95%; } } #basketPopupM #basketPopupBtn a { display: block; } /* ================================ Main Navigation ================================ */ /** * Basic global nav styles */ .nav__list { margin: 0 auto; max-width: 1200px; } .nav__item { list-style: none; } @media all and (min-width: 50.125em) { .nav__item { display: inline-block; vertical-align: top; } } @media all and (min-width: 61.25em) { .nav__item { display: block; float: left; } } /** * Main Desktop Navigation */ .nav--main { border-top: 5px solid #92bfc3; text-align: center; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; /** * Desktop Menu Links */ /** * Main nav styles overrides and Nav Items */ } .nav--main .gutter-sizer { display: none; } .nav--main .mtop { background: #e5e5e6; } .nav--main .mtop .nav__link { color: #515050; display: block; font-size: 12px; font-size: 1.2rem; line-height: 22px; padding: 11px 8px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.4s; transition: all 0.4s; } @media all and (min-width: 61.25em) { .nav--main .mtop .nav__link { font-size: 14.5px; font-size: 1.45rem; line-height: 24px; padding: 11px 9px; } } .nav--main .mtop .nav__link.red { background-color: #fa5f5f; color: #ffffff; } .nav--main .mtop .nav__link.red:before { border-right: 0 none; } .nav--main .mtop > ul { position: relative; padding: 0; } .nav--main .mtop > ul > li > a.menu_expander + .nav__link { padding: 11px 3px 10px 9px; display: inline-block; vertical-align: middle; } @media all and (min-width: 61.25em) { .nav--main .mtop > ul > li > a.menu_expander + .nav__link { padding: 11px 5px 10px 11px; } } .nav--main .mtop > ul > li > a:before { border-right: 1px solid #bbb; content: ''; left: 0; height: 59%; position: absolute; top: 9px; width: 0; } .nav--main .mtop > ul > li > .menu_expander + a:after { color: #999; content: '\25bc'; display: inline-block; font-size: 10px; font-size: 1rem; height: 15px; line-height: 7px; margin-left: 5px; vertical-align: middle; } .nav--main .mtop > ul li:first-of-type a:before, .nav--main .mtop > ul li:last-of-type a:before { border-right: 0 none; } .nav--main .mbottom .nav__link { color: #515050; display: block; font-size: 15px; font-size: 1.5rem; padding: 7px 5px; text-decoration: none; -webkit-transition: all 0.4s; transition: all 0.4s; } @media all and (min-width: 61.25em) { .nav--main .mbottom .nav__link { font-size: 18px; font-size: 1.8rem; padding: 7px 9px; } } .nav--main .mbottom > ul { padding: 0; } .nav--main .mbottom > ul > li { position: relative; } .nav--main .mbottom > ul > li:first-of-type a:before { border-right: 0 none; } .nav--main .mbottom > ul > li > a.menu_expander + .nav__link { padding: 7px 4px 7px 5px; } @media all and (min-width: 61.25em) { .nav--main .mbottom > ul > li > a.menu_expander + .nav__link { padding: 7px 4px 7px 8px; } } .nav--main .mbottom > ul > li > a:before { border-right: 1px solid #bbb; content: ''; left: 0; height: 59%; position: absolute; top: 9px; width: 0; } .nav--main .mbottom > ul > li > .menu_expander + a:after { color: #999; content: '\25bc'; display: inline-block; font-size: 10px; font-size: 1rem; height: 18px; line-height: 17px; margin-left: 5px; vertical-align: middle; } .nav--main .mbottom > ul div { left: 0; top: 36px; } @media all and (min-width: 61.25em) { .nav--main .mbottom > ul div { top: 40px; } } .nav--main .nav__link:hover, .nav--main .nav__link:focus, .nav--main .nav__link:active, .nav--main .nav__item:hover > .nav__link, .nav--main .nav__item--hover > .nav__link { background-color: #3d6e77; color: #ffffff; text-decoration: none; } .nav--main .nav__item:hover a + a:before, .nav--main .nav__item:hover + li a + a:before, .nav--main .nav__item--hover a + a:before, .nav--main .nav__item--hover + li a + a:before { border-right: 0 none; } .nav--main .nav__item:hover .menu_expander + a:after, .nav--main .nav__item--hover .menu_expander + a:after { color: #92bfc3; } .nav--main .menu { font-size: 0; } .nav--main .menu .lrga { display: inline-block; float: none; } .nav--main .menu .lrga[data-class="nb"] { border-right: none; } .nav--main .menu .lrga[data-class="access"], .nav--main .menu .lrga[data-class="brands"] { position: relative; } .nav--main .menu .lrga[data-id="LOGIN"], .nav--main .menu .lrga[data-id="INFO"] { display: none; } .nav--main .menu div { background: #ffffff; border: 7px solid #3d6e77; display: none; font-size: 16px; font-size: 1.6rem; height: auto; left: 10px; overflow: visible; padding: 0 28px 22px 28px; z-index: 20000; /** * Bottom Menu Sub Menus */ } .nav--main .menu div.col1_3 { left: 0; width: 660px; } .nav--main .menu div.col1_2 { width: 480px; } .nav--main .menu div.mens { left: 16%; } .nav--main .menu div.brands { left: -10px; right: 15%; } .nav--main .menu div.new { left: auto; right: 5%; } .nav--main .menu div.access { left: -10px; right: auto; } .nav--main .menu div dl { background: #ffffff; } .nav--main .menu div dl.col1 { margin-right: 45px; width: 28%; } .nav--main .menu div dl.col1:last-of-type, .nav--main .menu div dl.col1.last { margin-right: 0; } .nav--main .menu div dd a { line-height: 19px; padding: 4px 0; text-transform: capitalize; white-space: normal; } .nav--main .menu div dd a:hover, .nav--main .menu div dd a:focus, .nav--main .menu div dd a:active { background: transparent; color: #55949a; } .nav--main .menu div dd.subHead, .nav--main .menu div dd.subHeadFill { border-bottom: 1px solid #bbb; color: #fa5f5f; font-size: 14px; font-size: 1.4rem; margin-bottom: 7px; padding: 22px 0 7px 0; text-transform: uppercase; } .nav--main .menu div.col1_3_sub { padding: 15px 30px 15px 15px; width: 184px; } .nav--main .menu div.col1_3_sub dl.col1 { padding: 0; margin-right: 0; width: 100%; } @media all and (min-width: 50.125em) and (max-width: 61.24em) { .nav--main .menu div.col1_3_sub.trade { left: auto; right: 0; } } /** * Mobile & Tablet Navigation */ .nav--mobile { background: #3d6e77; bottom: 0; position: absolute; right: 100%; top: 0; -webkit-transition: right 0.4s; transition: right 0.4s; width: 205px; z-index: 2; /** * Lists */ /** * Mobile Menu Links */ } .nav--mobile .menu { float: left; height: auto; padding: 0; width: 100%; } @media all and (min-width: 50.125em) { .nav--mobile .menu { display: none; } } .nav--mobile .menu .wrapper-inner { padding: 0; } .nav--mobile .menu.open { display: block; } .nav--mobile .menu span.menufill { display: none; } .nav--mobile .menu li.lrga { background: none; border-bottom: 1px solid #335b63; display: block; float: left; height: auto; width: 100%; } .nav--mobile .menu li.lrga .menu_expander:after { color: #92bfc3; content: '\25B2'; float: right; font-size: 10px; font-size: 1rem; } .nav--mobile .menu li.lrga.hide .menu_expander:after { content: '\25bc'; font-size: 10px; font-size: 1rem; } .nav--mobile .menu li.lrga .link.menu_expander:after { content: ''; } .nav--mobile .menu li.lrga a.expanded, .nav--mobile .menu li.lrga div { display: block; padding: 0; position: relative; width: 100%; } .nav--mobile .menu li.lrga.hide > div { display: none; } .nav--mobile .menu li.lrga.open > div { display: block; } .nav--mobile .menu li.lrga a.toponly, .nav--mobile .menu li.lrga a.toponlySelected, .nav--mobile .menu li.lrga span.toponly, .nav--mobile .menu li.lrga li.lrga span.toponlySelected { display: none; } .nav--mobile .menu li.lrga a.menu_expander, .nav--mobile .menu li.lrga .link { background-color: #3d6e77; color: #ffffff; display: block; font-size: 17px; font-size: 1.7rem; height: 33px; line-height: 33px; padding: 0 12px; text-align: left; text-decoration: none; text-transform: uppercase; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; width: 100%; } .nav--mobile .menu li.lrga a.menu_expander.red, .nav--mobile .menu li.lrga .link.red { background-color: #fa5f5f; color: #ffffff; } .nav--mobile .menu li.lrga a.menu_expander.tall, .nav--mobile .menu li.lrga .link.tall { height: auto; line-height: 23px; padding: 6px 12px; } .nav--mobile .menu li.lrga a.menu_expander:hover, .nav--mobile .menu li.lrga a.menu_expander:focus, .nav--mobile .menu li.lrga a.menu_expander:active, .nav--mobile .menu li.lrga .link:hover, .nav--mobile .menu li.lrga .link:focus, .nav--mobile .menu li.lrga .link:active { background: #335b63; } .nav--mobile .menu li.lrga div.menu_expander { display: block; float: left; } .nav--mobile .menu li.lrga div dl { width: 100%; } .nav--mobile .menu li.lrga div dl dd { border-bottom: 1px solid #ffffff; } .nav--mobile .menu li.lrga div dl dd.subHead { background: #ddd; color: #515050; padding: 3px 10px; width: 100%; } .nav--mobile .menu li.lrga div dl dd.subHead.link { padding: 0; } .nav--mobile .menu li.lrga div dl dd.subHeadFill { display: none; } .nav--mobile .menu li.lrga div dl dd a { color: #6b6969; font-size: 14px; font-size: 1.4rem; padding: 6px 20px; text-align: left; text-transform: uppercase; white-space: normal; width: 100%; } .nav--mobile .menu li[data-id="INFO"] { display: none; } .nav--mobile .menu div { font-size: 16px; font-size: 1.6rem; } .nav--mobile .menu div dt { background: #92bfc3; color: #fa5f5f; font-size: inherit; margin-bottom: 0; padding: 5px 15px; } .nav--mobile .menu div dl.head2 { margin-top: 0; } .nav--mobile .menu div dd a:hover, .nav--mobile .menu div dd a:focus, .nav--mobile .menu div dd a:active { background: #bbb; color: #1a3034; } /** * Hamburger Menu Button */ .nav__expand--button { background: none; border: none; cursor: pointer; display: none; float: left; height: 17px; margin: 14px 8px 0 10px; outline: 0; overflow: hidden; padding: 0; position: relative; width: 17px; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .nav__expand--button { display: block; } } .nav__hamburger, .nav__hamburger:before, .nav__hamburger:after { background: #999; display: block; height: 3px; } .nav__hamburger { overflow: visible; position: relative; text-indent: 17px; width: 100%; } .nav__hamburger, .nav__hamburger:before, .nav__hamburger:after { -webkit-transition: all 0.4s; transition: all 0.4s; } .open .nav__hamburger { background: none; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .nav__hamburger:before, .nav__hamburger:after { content: ""; left: 0; position: absolute; right: 0; } .nav__hamburger:before { top: -6px; } .open .nav__hamburger:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 0; } .nav__hamburger:after { bottom: -6px; } .open .nav__hamburger:after { bottom: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* ================================ Phone quick search and basket menu ================================ */ #phoneHead { background: #92bfc3; border-bottom: 3px solid #ffffff; } #phoneHead .telephone, #phoneHead > p, #phoneHead > img { color: #ffffff; display: inline-block; font-size: 18px; font-size: 1.8rem; margin: 8px 0 30px 0; vertical-align: middle; } #phoneHead .telephone, #phoneHead > img { height: 18px; width: 18px; } @media all and (min-width: 43.8125em) { #phoneHead .telephone, #phoneHead > img { height: 28px; width: 28px; } } @media all and (max-width: 43.8025em) { #phoneHead .telephone, #phoneHead > img, #phoneHead > p { float: right; font-size: 13px; font-size: 1.3rem; margin-right: 7px; } } .phoneTopMenu { border-top: 5px solid #92bfc3; box-flex: 0; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; } .phoneTopMenu ul { background: none; float: left; padding: 0; width: 100%; } .phoneTopMenu ul li { background: #e5e5e6; float: left; height: 45px; line-height: 45px; text-align: center; text-transform: uppercase; width: 49.5%; } @media all and (min-width: 43.8125em) { .phoneTopMenu ul li { width: 50%; } } .phoneTopMenu ul li.mid { width: 1%; } .phoneTopMenu ul li.mid hr { border-bottom: 0 none; border-left: 0 none; border-right: 1px solid #bbb; border-top: 0 none; display: block; height: 54%; margin: 10px 0 0 0; width: 1px; } .phoneTopMenu ul li .menuText { cursor: pointer; display: inline-block; line-height: 44px; -webkit-transition: all 0.5s; transition: all 0.5s; } @media all and (min-width: 43.8125em) { .phoneTopMenu ul li .menuText { float: left; } } .phoneTopMenu ul li .menuText:hover, .phoneTopMenu ul li .menuText:focus, .phoneTopMenu ul li .menuText:active { color: #999; } .phoneTopMenu ul li .menuText:after { color: #999; content: ' \25C0'; display: inline-block; font-size: 12px; font-size: 1.2rem; padding-left: 4px; vertical-align: top; } /* ================================ Homepage ================================ */ /** * Category blocks */ .categories { text-align: center; } .categories .col-3 { display: inline-block; margin-bottom: 15px; position: relative; text-align: center; z-index: 0; } .categories .col-3 img { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .categories .col-3:hover img, .categories .col-3:focus img, .categories .col-3:active img { -webkit-transform: scale(1.035); -ms-transform: scale(1.035); transform: scale(1.035); } .categories .col-3 p { bottom: 24px; color: #ffffff; font-size: 22px; font-size: 2.2rem; left: 20px; line-height: 27px; margin: 0; padding: 0; position: absolute; right: 20px; text-transform: uppercase; z-index: 1; } .categories .col-3 p.black { color: #1e1d1d; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .categories { margin-bottom: 35px; margin-top: 30px; } .categories .col-3 { margin-bottom: 0; width: 33.3%; } .categories .col-3:last-of-type { display: none; } } @media all and (min-width: 50.125em) and (max-width: 61.24em) { .categories { margin-bottom: 40px; margin-top: 28px; } .categories .col-3 { margin-bottom: 0; width: 25%; } .categories .col-3 p { bottom: 25px; line-height: 24px; font-size: 20px; font-size: 2rem; } } @media all and (min-width: 61.25em) { .categories { margin-bottom: 45px; margin-top: 35px; } .categories .col-3 { margin-bottom: 0; } .categories .col-3 p { bottom: 24px; font-size: 24px; font-size: 2.4rem; } } /** * General Home Page Text */ .home-text h1, .home-text #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .home-text .infohead, .home-text #pageTitle h1, #pageTitle .home-text h1, .home-text .storeFinderDetail h2, .storeFinderDetail .home-text h2 { border-image: url(../../images/bg-heading-green.png) stretch 100% 0 100% 0; border-color: #3d6e77; color: #3d6e77; font-size: 24px; font-size: 2.4rem; margin: 20px 0 25px 0; padding-top: 12px; } .home-text h2 { font-size: 17px; font-size: 1.7rem; font-weight: bold; line-height: 20px; margin-bottom: 10px; text-align: left; text-transform: capitalize; } .home-text p { color: #3d6e77; font-size: 17px; font-size: 1.7rem; line-height: 21px; } .home-text a { color: #fa5f5f; text-decoration: underline; } .home-text a:hover, .home-text a:focus, .home-text a:active { color: #fc9090; } @media all and (max-width: 43.8025em) { .home-text h1, .home-text #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .home-text .infohead, .home-text #pageTitle h1, #pageTitle .home-text h1, .home-text .storeFinderDetail h2, .storeFinderDetail .home-text h2 { border-bottom: 0 none; padding: 12px 80px 0; } } @media all and (min-width: 43.8125em) { .home-text h1, .home-text #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .home-text .infohead, .home-text #pageTitle h1, #pageTitle .home-text h1, .home-text .storeFinderDetail h2, .storeFinderDetail .home-text h2 { border-top: 0 none; font-size: 30px; font-size: 3rem; margin: 0 0 35px 0; padding-bottom: 15px; } .home-text p { margin: 0; } } @media all and (min-width: 50.125em) { .home-text h1, .home-text #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .home-text .infohead, .home-text #pageTitle h1, #pageTitle .home-text h1, .home-text .storeFinderDetail h2, .storeFinderDetail .home-text h2 { font-size: 35px; font-size: 3.5rem; letter-spacing: 2.5px; } } /** * Associations */ .associations { margin-top: 10px; } @media all and (min-width: 43.8125em) { .associations { margin-bottom: 17px; margin-top: 60px; } } .associations .shadow { display: block; height: 100%; position: relative; z-index: 40; } .associations .shadow:before { bottom: 0; box-shadow: inset 0px 30px 180px 10px #040404; content: ""; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } .associations .shadow:hover:before, .associations .shadow:focus:before, .associations .shadow:active:before { box-shadow: inset 0px 30px 180px 10px #515050; } .associations .associations__item { display: block; height: 292px; margin-bottom: 30px; position: relative; text-align: center; z-index: 0; } .associations .associations__item:last-of-type { margin-bottom: 0; } .associations .associations__item .shadow { background-image: url("../../images/homepageimages/footwear-guide.jpg"); background-repeat: no-repeat; background-size: cover; } .associations .associations__item > img { max-width: none; } @media all and (min-width: 43.8125em) { .associations .associations__item { margin-bottom: 0; } } .associations .associations__item--england .shadow { background-image: url("../../images/homepageimages/made-in-england.jpg"); } .associations .associations__item--england .associations__text img { height: 75px; width: auto; } @media all and (min-width: 43.8125em) { .associations .associations__item--england .associations__text h3 { margin: 14px 0; } } .associations .associations__text { left: 0; margin: 0; padding: 0 7%; position: absolute; right: 0; top: 15px; z-index: 1; } @media all and (min-width: 43.8125em) { .associations .associations__text { padding: 0 5%; } } @media all and (min-width: 50.125em) { .associations .associations__text { left: auto; width: 75%; } } @media all and (min-width: 61.25em) { .associations .associations__text { width: 64%; } } .associations .associations__text h3 { color: #ffffff; line-height: 27px; margin: 7px 0; } @media all and (min-width: 43.8125em) { .associations .associations__text h3 { margin: 10px 0; } } .associations .associations__text p { color: #ffffff; font-size: 17px; font-size: 1.7rem; line-height: 19px; margin: 0; } .associations .associations__text svg { height: 75px; width: 80px; } .associations .associations__text img { height: 75px; width: 75px; } /** * Cta blocks */ .cta-wrapper { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .cta { margin-top: 25px; } .cta__item { margin: 25px 0; } .cta__item:first-of-type { margin-top: 0; } @media all and (min-width: 43.8125em) { .cta__item { margin: 0; } .cta__item > div { min-height: 450px; padding: 40px 10px; } .cta__item .push-6 { float: none; left: auto; width: 100%; } .cta__item .pull-6 { float: none; right: auto; width: 100%; } } @media all and (min-width: 43.8125em) { .cta__item > div { min-height: 474px; } } @media all and (min-width: 61.25em) { .cta__item > div { min-height: 302px; } .cta__item h3 { width: 240px; } .cta__item .push-6 { float: left; left: 45%; width: 55%; } .cta__item .pull-6 { float: left; right: 53%; width: 45%; } } .cta__item > div { background: #faf6ed; padding: 40px 10px 5px 10px; text-align: center; } .cta__item form { border: 2px solid #92bfc3; margin-left: auto; margin-right: auto; } @media all and (max-width: 43.8025em) { .cta__item form { max-width: 220px; } } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .cta__item form { max-width: none; width: auto; } } @media all and (min-width: 50.125em) { .cta__item form { width: 220px; } } .cta__item .form__share--two-thirds { float: left; padding: 0; margin-bottom: 0; width: 80%; } .cta__item .form__share--two-thirds .form__input { border: 0 none; font-size: 15px; font-size: 1.5rem; height: 28px; line-height: 21px; padding-left: 9px; vertical-align: top; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .cta__item .form__share--two-thirds .form__input:hover, .cta__item .form__share--two-thirds .form__input:focus { background: #f6f6f6; } } .cta__item .form__share--third { float: left; height: 28px; line-height: 21px; padding: 0; width: 20%; } .cta__item .form__share--third .button { background: #ffffff url(../../images/svg/sprite.svg.bg-magnify.svg) no-repeat 50% 4px; border: 0 none; height: 28px; line-height: 21px; text-indent: -9999px; vertical-align: top; } .cta__item .form__share--third .button:hover, .cta__item .form__share--third .button:focus, .cta__item .form__share--third .button:active { background-color: #f4f4f4; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .cta__item .form__share--third .button:hover:hover, .cta__item .form__share--third .button:hover:focus, .cta__item .form__share--third .button:focus:hover, .cta__item .form__share--third .button:focus:focus, .cta__item .form__share--third .button:active:hover, .cta__item .form__share--third .button:active:focus { background-color: #f6f6f6; } } .no-svg .cta__item .form__share--third .button { background: #ffffff url(../../images/svg/sprite.svg.bg-magnify.png) no-repeat 50% 4px; } .cta__item h3 { color: #515050; line-height: normal; margin: 0 auto; text-transform: uppercase; } @media all and (min-width: 43.8125em) and (max-width: 61.24em) { .cta__item h3 { width: 170px; } } .cta__item p { font-size: 17px; font-size: 1.7rem; margin: 3px auto 15px auto; max-width: 87%; } .cta__item span { color: #0e84aa; display: block; font-size: 17px; font-size: 1.7rem; margin: 13px 0; text-transform: uppercase; } .cta__item span:before, .cta__item span:after { content: '-----------'; letter-spacing: -2px; } .cta__item span:before { margin-right: 10px; } .cta__item span:after { margin-left: 10px; } .cta__item svg, .cta__item img { fill: #3d6e77; height: 35px; width: 24px; } .cta__item.cta__item--newsletter > div { background: #92bfc3; color: #ffffff; } .cta__item.cta__item--newsletter h3 { color: #ffffff; } @media all and (min-width: 43.8125em) { .cta__item.cta__item--newsletter h3 { margin-top: 10px; } } .cta__item.cta__item--newsletter svg, .cta__item.cta__item--newsletter img { fill: #ffffff; height: 25px; width: 38px; } @media all and (min-width: 43.8125em) { .cta__item.cta__item--newsletter svg, .cta__item.cta__item--newsletter img { margin-top: 8px; } } @media all and (max-width: 43.8025em) { .cta__item.cta__item--newsletter form { max-width: 250px; } } @media all and (min-width: 43.8125em) { .cta__item.cta__item--newsletter form { width: 100%; } } @media all and (min-width: 50.125em) { .cta__item.cta__item--newsletter form { width: 90%; } } .cta__item.cta__item--newsletter .form__share--two-thirds { width: 70%; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .cta__item.cta__item--newsletter .form__share--two-thirds { float: none; width: 100%; } } @media all and (min-width: 50.125em) { .cta__item.cta__item--newsletter .form__share--two-thirds { width: 65%; } } .cta__item.cta__item--newsletter .form__share--third { width: 30%; } .cta__item.cta__item--newsletter .form__share--third .button { background: #fa5f5f; border: 0 none; font-size: 11px; font-size: 1.1rem; height: 28px; line-height: 15px; text-indent: 0; text-transform: uppercase; vertical-align: top; } .cta__item.cta__item--newsletter .form__share--third .button:hover, .cta__item.cta__item--newsletter .form__share--third .button:focus, .cta__item.cta__item--newsletter .form__share--third .button:active { background: #515050; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .cta__item.cta__item--newsletter .form__share--third { float: none; margin: 10px auto 0; width: 55%; } } @media all and (min-width: 43.8125em) { .cta__item.cta__item--newsletter .form__share--third input { padding: 0 5px; } } @media all and (min-width: 50.125em) { .cta__item.cta__item--newsletter .form__share--third { width: 35%; } } .cta__item.cta__item--newsletter .message { font-size: 15px; font-size: 1.5rem; margin: 7px 0; max-width: 183px; padding: 6px 6px 6px 28px; text-align: left; width: 100%; } .cta__item.cta__item--catalogue > div { padding-top: 48px; } .cta__item.cta__item--catalogue h3 { width: auto; } @media all and (min-width: 43.8125em) { .cta__item.cta__item--catalogue h3 { font-size: 18px; font-size: 1.8rem; } } @media all and (min-width: 50.125em) { .cta__item.cta__item--catalogue h3 { font-size: 22px; font-size: 2.2rem; } } @media all and (min-width: 61.25em) { .cta__item.cta__item--catalogue h3 { font-size: 24px; font-size: 2.4rem; } } .cta__item.cta__item--catalogue .cta__image { height: auto; margin: 8px auto 20px auto; } @media all and (max-width: 61.24em) { .cta__item.cta__item--catalogue .cta__image { margin: 20px auto; width: auto; } } /* ================================ Crumbs ================================ */ div#crumbs, div#crumbsT, div#crumbsh { font-size: 12px; font-size: 1.2rem; line-height: normal; padding: 3px 0 20px; text-transform: uppercase; } @media all and (min-width: 43.8125em) { div#crumbs, div#crumbsT, div#crumbsh { padding: 14px 0 14px 0; } } @media all and (min-width: 43.8125em) { div#crumbs.prodp, div#crumbsT.prodp, div#crumbsh.prodp { padding: 14px 0 14px 0; } } div#crumbs.services, div#crumbsT.services, div#crumbsh.services { padding: 3px 0 20px; } @media all and (min-width: 43.8125em) { div#crumbs.services, div#crumbsT.services, div#crumbsh.services { padding: 14px 0 14px 0; } } div#crumbs span.delim, div#crumbsT span.delim, div#crumbsh span.delim { color: #92bfc3; } /* ================================ Left Menu ================================ */ .lmenu div dd.subHead { background: #92bfc3; color: #ffffff; display: block; font-size: 14px; font-size: 1.4rem; font-weight: normal; margin-bottom: 10px; padding: 10px; text-transform: uppercase; } .lmenu div dd a { font-size: 17px; font-size: 1.7rem; } /** * Static Pages left menu */ .lmenu li.lrga a.toponly { background: #92bfc3; color: #ffffff; display: block; font-size: 14px; font-size: 1.4rem; margin-bottom: 10px; padding: 10px; text-transform: uppercase; } .lmenu li.lrga a.menu_expander { display: none; } .lmenu li.lrga span.toponly { display: block; } .lmenu .wrapper-inner { background: none; float: none; margin: 0; max-width: none; padding: 0; width: 100%; } .lmenu .wrapper-inner > li > div > dl > dd > a { text-decoration: none; width: 100%; } .lmenu .wrapper-inner > li > div > dl > dd > a:before { color: #0e84aa; content: '\220e'; font-size: 13px; font-size: 1.3rem; margin-right: 8px; } .lmenu .wrapper-inner > li > div > dl > dd > a:hover, .lmenu .wrapper-inner > li > div > dl > dd > a:focus, .lmenu .wrapper-inner > li > div > dl > dd > a:active { color: #fa5f5f; } /** * Category page left menu */ .lmenu .ghead { border-bottom: 1px solid #ddd; font-size: 17px; font-size: 1.7rem; line-height: 120%; margin-bottom: 8px; padding-bottom: 3px; text-transform: uppercase; } /* ================================ Top Level Group / Category Page ================================ */ .groups > h1, #servicesMain .servicesPage .groups > .infohead, #pageTitle .groups > h1, .storeFinderDetail .groups > h2 { border-bottom: 0 none; font-size: 30px; font-size: 3rem; margin-bottom: 0; } @media all and (min-width: 43.8125em) { .groups > h1, #servicesMain .servicesPage .groups > .infohead, #pageTitle .groups > h1, .storeFinderDetail .groups > h2 { font-size: 35px; font-size: 3.5rem; } } .groups > p { margin-left: auto; margin-right: auto; text-align: center; width: 80%; } @media all and (max-width: 43.8025em) { .groups > p { font-size: 14px; font-size: 1.4rem; line-height: 19px; } } #catDivArea { padding: 0 0 20px; } @media all and (min-width: 43.8125em) { #catDivArea { border-top: 1px solid #bbb; padding: 40px 0 20px; } } @media all and (min-width: 43.8125em) { #groupList { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } #groupList > div { border-bottom: 1px solid #ddd; display: block; margin: 35px auto; max-width: 275px; } @media all and (max-width: 43.8025em) { #groupList > div:first-of-type { margin-top: 0; } #groupList > div:last-of-type { margin-bottom: 0; } } @media all and (min-width: 43.8125em) { #groupList > div { display: inline-block; margin: 35px 0; max-width: none; vertical-align: top; } .no-svg #groupList > div { margin: 35px 0.7%; } } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #groupList > div { margin: 0 0 40px; width: 31.3%; } #groupList > div:nth-child(3n+2) { margin: 0 3% 40px 3%; } } @media all and (min-width: 50.125em) { #groupList > div { margin: 0 0 50px; width: 23.5%; } #groupList > div:nth-child(4n+2) { margin: 0 1% 50px 2%; } #groupList > div:nth-child(4n+3) { margin: 0 2% 50px 1%; } } #groupList .catDiv { margin: 0; padding: 0 0 20px; } #groupList .catDiv img { margin-bottom: 10px; max-width: none; -webkit-transition: all 0.5s; transition: all 0.5s; width: 100%; } #groupList .catDiv span.title { display: block; float: none; font-size: 24px; font-size: 2.4rem; line-height: 27px; margin: 0 auto; text-transform: uppercase; width: auto; } #groupList .catDiv:hover, #groupList .catDiv:focus, #groupList .catDiv:active { color: #9e9c9c; } #groupList .catDiv:hover img, #groupList .catDiv:focus img, #groupList .catDiv:active img { opacity: 0.7; } /* ================================ PP Page ================================ */ /** * Main Refiner - mobile specific */ #refinerPhoneDiv { float: none; margin: 0; } #refinerSwitch { background-color: #92bfc3; background-image: none; color: #ffffff; float: none; line-height: 30px; font-size: 14px; font-size: 1.4rem; margin: 0; padding: 10px 0 10px 13px; position: relative; text-transform: uppercase; width: 100%; } #refinerSwitch:after { content: '\25bc'; display: inline-block; font-size: 10px; font-size: 1rem; opacity: 0.55; float: right; margin-right: 5.5%; } #refinerSwitch.expanded { background-color: #3d6e77; } #refinerSwitch.expanded:after { content: '\25B2'; font-size: 10px; font-size: 1rem; } /** * Main Refiner */ #leftContainer { margin: 0 0 20px 0; } @media all and (min-width: 43.8125em) { #leftContainer { float: left; width: 225px; } } @media all and (min-width: 61.25em) { #leftContainer { width: 275px; } } #leftContainer #pos1a { background-color: #92bfc3; color: #ffffff; line-height: 30px; font-size: 14px; font-size: 1.4rem; margin: 0; padding: 10px 0 10px 13px; text-transform: uppercase; width: 100%; } .refinesubhead { display: inline-block; padding: 10px 0 0 24px; color: #4c858a; } .refiner .s_uk { display: inline-block; width: 35%; text-align: left; } .refiner .s_eu { display: inline-block; width: 60%; text-align: center; } .refiner .s_eum { display: inline-block; width: 30%; text-align: center; } .refiner .s_eul { display: inline-block; width: 30%; text-align: center; } .refiner { float: none; } .refiner .lmenu li.lrga { float: none; padding: 0; } .refiner .lmenu li.lrga .col1, .refiner .lmenu li.lrga .col2 { float: none; font-size: 24px; font-size: 2.4rem; margin-bottom: 6px; text-transform: uppercase; } .refiner .lmenu li.lrga .col1 img, .refiner .lmenu li.lrga .col2 img { float: none; max-width: none; padding: 0 !important; width: auto; } .refiner .lmenu li.lrga dl { float: none; } .refiner .lmenu li.lrga dd { float: none; padding: 1px 0; } .refiner .lmenu li.lrga dd a { color: #515050; width: 100%; } .refiner .lmenu li.lrga div .refineScroll { float: none; } .refiner .lmenu li.lrga div dl#refine_lines_COLR dd { margin: 0; width: 100%; } .refiner .lmenu li.lrga div dl#refine_lines_COLR dd a { border: none; vertical-align: top; width: auto; } .refiner .lmenu li.lrga div dl#refine_lines_COLR dd img { float: none; height: auto; max-width: none; width: auto; } .refiner .lmenu li.lrga div dl.refine { float: none; padding: 10px 0; } .refiner .lmenu li.lrga div dl.refine dd { vertical-align: top; } .refiner .lmenu li.lrga div dl.refine dd.refineEmpty { display: none; } .refiner .lmenu li.lrga div dl.refine dd .refineFilteredOut, .refiner .lmenu li.lrga div dl.refine dd a.refineFilteredOut { font-size: 17px; font-size: 1.7rem; line-height: 20px; padding: 0px 2px 0px 24px; width: auto; } .refiner .lmenu li.lrga div dl.refine dd .refineFilteredOk, .refiner .lmenu li.lrga div dl.refine dd a.refineFilteredOk { color: #a6a6a6; } .refiner .lmenu li.lrga div dl.refine dd a { background: url(../../images/refine_off.png) 0 2px no-repeat; border: none; font-size: 17px; font-size: 1.7rem; line-height: 20px; padding: 0 2px 0 24px; width: auto; } .refiner .lmenu li.lrga div dl.refine dd a:hover, .refiner .lmenu li.lrga div dl.refine dd a:focus, .refiner .lmenu li.lrga div dl.refine dd a:active { font-weight: normal; text-decoration: underline; } .refiner .lmenu li.lrga div dl.refine dd a.refineSelected { color: #b3d2d5; background: url(../../images/refine_on.png) 0 2px no-repeat; text-decoration: none; } .refiner .lmenu li.lrga div dl.refine dd a.refineSelected:hover, .refiner .lmenu li.lrga div dl.refine dd a.refineSelected:focus, .refiner .lmenu li.lrga div dl.refine dd a.refineSelected:active { text-decoration: underline; } .refiner .lmenu li.lrga div dl.refinehead dd { background-color: #faf6ed; background-position: 95% 50%; border-bottom: 1px solid #ddd; font-size: 19px; font-size: 1.9rem; line-height: normal; margin: 0; padding: 8px 0 8px 13px; text-transform: uppercase; } /** * PP Header - Normal and search results */ #productListHTML { float: none; position: relative; } @media all and (min-width: 43.8125em) { #productListHTML { color: #ffffff; } } #productListHTML .ppHtmlImg { float: none; height: 220px; max-height: none; } @media all and (max-width: 43.8025em) { #productListHTML .ppHtmlImg { height: 140px; } } #productListHTML .ppHtmlImg img { max-width: none; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media all and (max-width: 43.8025em) { #productListHTML .ppHtmlImg img { display: none; } } @media all and (min-width: 43.8125em) { #productListHTML .ppHtmlImg img { left: 28%; } } @media all and (min-width: 50.125em) { #productListHTML .ppHtmlImg img { left: 36%; } } @media all and (min-width: 61.25em) { #productListHTML .ppHtmlImg img { left: 50%; } } .no-csstransforms #productListHTML .ppHtmlImg img { position: absolute; left: 25%; top: 0; margin-left: -220px; } #productListHTML .ppHtmlTxt { float: none; line-height: 20px; margin: 0; padding: 0; text-align: center; width: 100%; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #productListHTML .ppHtmlTxt { font-size: 14px; font-size: 1.4rem; } } #productListHTML .ppHtmlH1 { border-image: url(../../images/bg-heading.png) stretch 100% 0 100% 0; border-color: #515050; border-bottom: 0; font-size: 30px; font-size: 3rem; line-height: 30px; margin: 25px auto 0 auto; padding: 15px 0 10px; width: 100%; } @media all and (min-width: 43.8125em) { #productListHTML .ppHtmlH1 { border-image: url(../../images/bg-heading-white.png) stretch 100% 0 100% 0; border-color: #ffffff; font-size: 25px; font-size: 2.5rem; line-height: 25px; margin-top: 5px; padding: auto 0 7px; width: 100%; } } @media all and (min-width: 50.125em) { #productListHTML .ppHtmlH1 { font-size: 28px; font-size: 2.8rem; line-height: 28px; margin-top: 0; width: 90%; } } @media all and (min-width: 61.25em) { #productListHTML .ppHtmlH1 { font-size: 33px; font-size: 3.3rem; line-height: 33px; } } @media all and (min-width: 43.8125em) { #productListHTML.LST1, #productListHTML.LCS1, #productListHTML.LCL1, #productListHTML.MCA1, #productListHTML.MDR1, #productListHTML.MHO1, #productListHTML.MST1, #productListHTML.L-EV, #productListHTML.L-2V, #productListHTML.L-6E, #productListHTML.L-6V, #productListHTML.Lbar, #productListHTML.LLACE, #productListHTML.L-Greys, #productListHTML.L-Whites, #productListHTML.M-2V, #productListHTML.Mbar, #productListHTML.MLACE, #productListHTML.M-Whites, #productListHTML.EB, #productListHTML.DAB, #productListHTML.ppHtmlSearch { color: #515050; } #productListHTML.LST1 .ppHtmlH1, #productListHTML.LCS1 .ppHtmlH1, #productListHTML.LCL1 .ppHtmlH1, #productListHTML.MCA1 .ppHtmlH1, #productListHTML.MDR1 .ppHtmlH1, #productListHTML.MHO1 .ppHtmlH1, #productListHTML.MST1 .ppHtmlH1, #productListHTML.L-EV .ppHtmlH1, #productListHTML.L-2V .ppHtmlH1, #productListHTML.L-6E .ppHtmlH1, #productListHTML.L-6V .ppHtmlH1, #productListHTML.Lbar .ppHtmlH1, #productListHTML.LLACE .ppHtmlH1, #productListHTML.L-Greys .ppHtmlH1, #productListHTML.L-Whites .ppHtmlH1, #productListHTML.M-2V .ppHtmlH1, #productListHTML.Mbar .ppHtmlH1, #productListHTML.MLACE .ppHtmlH1, #productListHTML.M-Whites .ppHtmlH1, #productListHTML.EB .ppHtmlH1, #productListHTML.DAB .ppHtmlH1, #productListHTML.ppHtmlSearch .ppHtmlH1 { border-image: url(../../images/bg-heading.png) stretch 100% 0 100% 0; border-color: #515050; } #productListHTML[class^="16"] { background: #fa5f5f; } #productListHTML[class^="16"] img { display: none; } } #productListHTML.ppHtmlSearch .ppHtmlImg img { left: 30%; -webkit-transform: translate(-30%, -50%); -ms-transform: translate(-30%, -50%); transform: translate(-30%, -50%); } .no-csstransforms #productListHTML.ppHtmlSearch .ppHtmlImg img { position: absolute; left: 25%; top: 0; margin-left: -220px; } #productListHTML .ppHtmlTopText, #productListHTML .ppHtmlSearchTxt1 { text-align: center; width: 100%; } @media all and (min-width: 43.8125em) { #productListHTML .ppHtmlTopText, #productListHTML .ppHtmlSearchTxt1 { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 220px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; left: 15px; margin: 0; position: absolute; top: 0; width: 50%; } } @media all and (min-width: 50.125em) { #productListHTML .ppHtmlTopText, #productListHTML .ppHtmlSearchTxt1 { left: 25px; } } @media all and (min-width: 61.25em) { #productListHTML .ppHtmlTopText, #productListHTML .ppHtmlSearchTxt1 { left: 35px; } } .no-flexbox #productListHTML .ppHtmlTopText, .no-flexbox #productListHTML .ppHtmlSearchTxt1 { top: 20px; } #productListHTML .ppHtmlTopText #searchfor, #productListHTML .ppHtmlSearchTxt1 #searchfor { font-size: 20px; font-size: 2rem; letter-spacing: -1px; text-transform: uppercase; } #productListHTML .ppHtmlTopText #we_have1, #productListHTML .ppHtmlSearchTxt1 #we_have1 { font-size: 20px; font-size: 2rem; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #productListHTML .ppHtmlSearchTxt1 { left: 30px; width: 60%; } } @media all and (min-width: 50.125em) and (max-width: 61.24em) { #productListHTML .ppHtmlSearchTxt1 { left: 20px; width: 57%; } } @media all and (min-width: 61.25em) { #productListHTML .ppHtmlSearchTxt1 { left: 20px; } } /** * Page View Refiner */ #productListMain { margin: 0; } @media all and (min-width: 43.8125em) { #pageControls { border-top: 0 none; } #pageControls1 { border-bottom: 0 none; margin: 50px 0 0 0; padding: 4px 0 0 0; } } .productListLine1 { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; clear: left; float: left; font-size: 17px; font-size: 1.7rem; line-height: normal; margin: 30px 0 0 0; padding: 18px 0; width: 100%; } @media all and (min-width: 43.8125em) { .productListLine1 { font-size: 14px; font-size: 1.4rem; margin: 18px 0 10px 0; padding: 0 0 2px; } } .productListLine1 div.showall { line-height: normal; padding: 8px 0 3px 0; min-width: 0; } .productListLine1 div.pageSizeSel { float: none; min-width: 0; padding: 0; } .productListLine1 div.pageSizeSel .txt { font-size: 17px; font-size: 1.7rem; line-height: 34px; } .productListLine1 div.pageSizeSel .sel { line-height: 34px; width: auto; } .productListLine1 div.pageSizeSel .sel .pageSizeDiv { display: inline-block; font-size: 12px; font-size: 1.2rem; font-style: normal; padding: 0 5px; text-transform: uppercase; } .productListLine1 div.pageSizeSel .sel .pageSizeDiv:hover, .productListLine1 div.pageSizeSel .sel .pageSizeDiv:focus, .productListLine1 div.pageSizeSel .sel .pageSizeDiv:active { color: #fa5f5f; cursor: pointer; } .productListLine1 div.pageSizeSel .sel .psd_On { color: #fa5f5f; font-weight: bold; } .productListLine1 div.pageSizeSel .sel select { padding: 4px 5px; } @media all and (min-width: 43.8125em) { .productListLine1 div.pageSizeSel .sel select { padding: 2px 5px; } } .productListLine1 div.sizerBox { float: none; } @media all and (max-width: 43.8025em) { .productListLine1 div.sizerBox { text-align: center; width: 100%; } } @media all and (min-width: 43.8125em) { .productListLine1 div.sizerBox { float: left; margin-top: 0; } } .productListLine1 div.sortSel { margin-top: 6px; width: 30%; } @media all and (min-width: 43.8125em) { .productListLine1 div.sortSel { margin-top: 0; width: auto; } } .productListLine1 div.sortSel .sel { line-height: 25px; padding: 0; } @media all and (min-width: 43.8125em) { .productListLine1 div.sortSel .sel { width: 120px; } } @media all and (min-width: 50.125em) { .productListLine1 div.sortSel .sel { padding: 0px 0px 0 5px; width: 125px; } } .productListLine1 div.sortSel .sel select { padding: 4px 5px; } @media all and (min-width: 43.8125em) { .productListLine1 div.sortSel .sel select { padding: 2px 5px; } } .productListLine1 div.sale_legend { display: none; font-size: 17px; font-size: 1.7rem; line-height: 34px; text-align: center; } .productListLine1 div.sale_legend span { display: inline-block; vertical-align: middle; } .productListLine1 div.sale_legend:before { border: 2px solid #fa5f5f; content: ''; display: inline-block; height: 20px; margin-right: 5px; vertical-align: middle; width: 20px; } @media all and (min-width: 50.125em) { .productListLine1 div.sale_legend:before { margin-right: 10px; } } @media all and (min-width: 43.8125em) { .productListLine1 div.sale_legend { float: left; margin-left: 20px; text-align: left; } } @media all and (min-width: 50.125em) { .productListLine1 div.sale_legend { margin-left: 35px; } } .productListLine1 div.pagerBox { float: none; text-align: center; } @media all and (min-width: 43.8125em) { .productListLine1 div.pagerBox { float: right; margin-top: 0; padding-left: 25px; text-align: left; } } .productListLine1 div.pagerBoxFullWidth { float: right; } .productListLine1 div.pager { float: none; line-height: 34px; margin-top: 10px; padding: 0; } @media all and (min-width: 43.8125em) { .productListLine1 div.pager { margin-top: 0; } } .productListLine1 div.pager div.pages { display: inline-block; float: none; font-size: 17px; font-size: 1.7rem; line-height: 34px; padding: 0; } .productListLine1 div.pager .pthis, .productListLine1 div.pager a { color: #515050; display: inline-block; float: none; font-size: 12px; font-size: 1.2rem; line-height: 34px; margin: 0; padding: 0 5px; width: auto; } .productListLine1 div.pager .pthis:hover, .productListLine1 div.pager .pthis:focus, .productListLine1 div.pager .pthis:active, .productListLine1 div.pager a:hover, .productListLine1 div.pager a:focus, .productListLine1 div.pager a:active { color: #fa5f5f; text-decoration: none; } .productListLine1 div.pager .pthis { color: #fa5f5f; } .productListLine1 .selectBorder { width: auto; } /** * PP Results */ @media all and (min-width: 43.8125em) { #productsMain #productsMain { float: left; } } #partsList .refineEmpty { padding: 0; } #partsList .refineEmpty h1, #partsList .refineEmpty #servicesMain .servicesPage .infohead, #servicesMain .servicesPage #partsList .refineEmpty .infohead, #partsList .refineEmpty .storeFinderDetail h2, .storeFinderDetail #partsList .refineEmpty h2 { border: 0 none; font-size: 20px; font-size: 2rem; padding: 10px 0; } #partsList .refineEmpty h2 { font-size: 19px; font-size: 1.9rem; text-transform: capitalize; } .productListItem { background: #ffffff; border: none; box-sizing: content-box; margin: 0; padding: 10px 0; width: 100%; } @media all and (max-width: 43.8025em) { .productListItem { height: auto !important; } } @media all and (min-width: 43.8125em) { .productListItem { background: #ffffff; padding: 20px 0; width: 49.7%; } } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .productListItem:nth-child(2n) { border-right: 0 none; } } @media all and (min-width: 50.125em) { .productListItem { width: 33.2%; } .productListItem:nth-child(3n) { border-right: 0 none; } } .productListItem .pli_left { float: none; padding: 0 0 10px; text-align: center; width: 100%; } @media all and (min-width: 43.8125em) { .productListItem .pli_left { padding: 0 4%; width: auto; } } .productListItem .pli_w_Img { float: none; height: 200px; margin: 0 auto; position: relative; width: auto; } @media all and (min-width: 43.8125em) { .productListItem .pli_w_Img { height: 160px; padding: 0; } } @media all and (min-width: 50.125em) { .productListItem .pli_w_Img { height: 150px; padding: 0; } } @media all and (min-width: 61.25em) { .productListItem .pli_w_Img { height: 180px; padding: 0; } } .productListItem .pli_w_Img img { display: block; float: none; margin: 0 auto; min-height: 0; width: auto; } @media all and (min-width: 43.8125em) { .productListItem .pli_w_Img img { bottom: 0; position: absolute; } } .productListItem .pli_right { margin: 0 auto; max-width: 100%; } @media all and (min-width: 43.8125em) { .productListItem .pli_right { margin: 0; max-width: none; padding: 0 4%; width: 100%; } } .productListItem .pli_right a.pli_product { margin: 0 auto; width: auto; } .productListItem .pli_right .pli_descrbox { border-top: 1px solid #ddd; height: auto; line-height: normal; padding: 10px 0 0 0; vertical-align: middle; } @media all and (min-width: 43.8125em) { .productListItem .pli_right .pli_descrbox { padding: 10px 0; } } .productListItem .pli_right .pli_descrbox h1, .productListItem .pli_right .pli_descrbox #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .productListItem .pli_right .pli_descrbox .infohead, .productListItem .pli_right .pli_descrbox #pageTitle h1, #pageTitle .productListItem .pli_right .pli_descrbox h1, .productListItem .pli_right .pli_descrbox .storeFinderDetail h2, .storeFinderDetail .productListItem .pli_right .pli_descrbox h2 { border: 0 none; font-size: 24px; font-size: 2.4rem; font-weight: normal; line-height: normal; margin-bottom: 8px; text-align: center; } .productListItem .pli_right .pli_descrbox h1:hover, .productListItem .pli_right .pli_descrbox #servicesMain .servicesPage .infohead:hover, #servicesMain .servicesPage .productListItem .pli_right .pli_descrbox .infohead:hover, .productListItem .pli_right .pli_descrbox #pageTitle h1:hover, #pageTitle .productListItem .pli_right .pli_descrbox h1:hover, .productListItem .pli_right .pli_descrbox .storeFinderDetail h2:hover, .storeFinderDetail .productListItem .pli_right .pli_descrbox h2:hover, .productListItem .pli_right .pli_descrbox h1:focus, .productListItem .pli_right .pli_descrbox #servicesMain .servicesPage .infohead:focus, #servicesMain .servicesPage .productListItem .pli_right .pli_descrbox .infohead:focus, .productListItem .pli_right .pli_descrbox #pageTitle h1:focus, #pageTitle .productListItem .pli_right .pli_descrbox h1:focus, .productListItem .pli_right .pli_descrbox .storeFinderDetail h2:focus, .storeFinderDetail .productListItem .pli_right .pli_descrbox h2:focus, .productListItem .pli_right .pli_descrbox h1:active, .productListItem .pli_right .pli_descrbox #servicesMain .servicesPage .infohead:active, #servicesMain .servicesPage .productListItem .pli_right .pli_descrbox .infohead:active, .productListItem .pli_right .pli_descrbox #pageTitle h1:active, #pageTitle .productListItem .pli_right .pli_descrbox h1:active, .productListItem .pli_right .pli_descrbox .storeFinderDetail h2:active, .storeFinderDetail .productListItem .pli_right .pli_descrbox h2:active { text-decoration: none; } @media all and (min-width: 43.8125em) { .productListItem .pli_right .pli_descrbox h1, .productListItem .pli_right .pli_descrbox #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .productListItem .pli_right .pli_descrbox .infohead, .productListItem .pli_right .pli_descrbox #pageTitle h1, #pageTitle .productListItem .pli_right .pli_descrbox h1, .productListItem .pli_right .pli_descrbox .storeFinderDetail h2, .storeFinderDetail .productListItem .pli_right .pli_descrbox h2 { margin: 0; padding: 0; } } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { .productListItem .pli_right .pli_descrbox h1, .productListItem .pli_right .pli_descrbox #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .productListItem .pli_right .pli_descrbox .infohead, .productListItem .pli_right .pli_descrbox #pageTitle h1, #pageTitle .productListItem .pli_right .pli_descrbox h1, .productListItem .pli_right .pli_descrbox .storeFinderDetail h2, .storeFinderDetail .productListItem .pli_right .pli_descrbox h2 { font-size: 22px; font-size: 2.2rem; } } .productListItem .pli_right .pli_pricebox { border-bottom: 1px solid #ddd; display: none; height: auto; margin-bottom: 8px; padding-bottom: 10px; } @media all and (min-width: 43.8125em) { .productListItem .pli_right .pli_pricebox { margin-bottom: 0; } } .productListItem .pli_right .pli_pricebox .price { font-size: 23px; font-size: 2.3rem; padding-right: 3%; } @media all and (min-width: 43.8125em) { .productListItem .pli_right .pli_pricebox .price { padding-right: 0; } } .productListItem .pli_right .pli_was { display: block; height: auto; line-height: normal; } @media all and (min-width: 43.8125em) { .productListItem .pli_right .pli_reviewbox { height: auto; } } .productListItem .pli_right .pli_reviewboxp { width: 74%; } .productListItem .pli_right .pli_reviewboxI > .pli_product { display: block; } .productListItem .pli_right .pli_reviewboxIp { float: none; width: auto; } .productListItem .pli_right .pli_reviewstarbox { float: none; height: auto; padding: 3px 0 0 0px; width: 100%; } @media all and (min-width: 43.8125em) { .productListItem .pli_right .pli_reviewstarbox { padding: 0; } } .productListItem .pli_right .pli_fill { height: auto; } @media all and (min-width: 43.8125em) { .productListItem .pli_right .pli_fill { height: 47px; margin-top: 3px; } } .productListItem .pli_right .pli_fill .pli_swatchbox { background: transparent; padding: 0; } .productListItem .pli_right .pli_xfill { padding-bottom: 8px; } @media all and (max-width: 43.8025em) { .productListItem .pli_right .pli_xfill { border-bottom: 1px solid #ddd; } } .productListItem .pli_right .pli_xfill .pli_swatchbox { float: none; margin: 0; padding: 0; text-align: center; width: 100%; } .productListItem .pli_right .pli_xfill .pli_swatchbox img { float: none; height: 21px; width: 21px; vertical-align: top; } .productListItem .pli_right .pli_xfill .pli_swatchbox .dbs_width_hi { border: 2px solid #fa5f5f; height: 25px; width: 25px; } .productListItem .pli_right .sww_outer { display: inline-block; vertical-align: top; padding: 5px 7px; vertical-align: top; } .productListItem .pli_right .sww_outer .sww_name { font-size: 17px; font-size: 1.7rem; } .productListItem .pli_right .sww_outer .sww_price { color: #0e84aa; font-size: 12px; font-size: 1.2rem; } .productListItem .pli_right .sww_outer .sww_price.sww_price_was { color: #fa5f5f; } .productListItem .pli_right .sww_outer .pli_wasword, .productListItem .pli_right .sww_outer .pli_wasprice { color: #0e84aa; display: block; } .productListItem .pli_right .sww_outer .pli_wasword { display: none; } .infoFull.empty { margin-top: 30px; text-align: center; } @media all and (min-width: 43.8125em) { .infoFull.empty { margin-left: -122px; } } @media all and (min-width: 50.125em) { .infoFull.empty { margin-left: -124px; } } @media all and (min-width: 61.25em) { .infoFull.empty { margin-left: -155px; } } /* ================================ Product Details Page ================================ */ .productZoomImage { min-height: 300px; } @media all and (min-width: 61.25em) { .productZoomImage { min-width: 300px; } } .imageLoading { display: block; font-size: 20px; font-size: 2rem; text-align: center; width: 100%; } #emailfriend_iframe footer { display: none; } /** * Price for all sizes */ #productDetailTitle h1, #productDetailTitle #servicesMain .servicesPage .infohead, #servicesMain .servicesPage #productDetailTitle .infohead, #productDetailTitle .storeFinderDetail h2, .storeFinderDetail #productDetailTitle h2 { font-size: 25px; font-size: 2.5rem; margin-bottom: 23px; padding: 6px 0; } @media all and (min-width: 50.125em) { #productDetailTitle h1, #productDetailTitle #servicesMain .servicesPage .infohead, #servicesMain .servicesPage #productDetailTitle .infohead, #productDetailTitle .storeFinderDetail h2, .storeFinderDetail #productDetailTitle h2 { margin-bottom: 15px; } } #productDetailTitle h1 > div, #productDetailTitle #servicesMain .servicesPage .infohead > div, #servicesMain .servicesPage #productDetailTitle .infohead > div, #productDetailTitle #pageTitle h1 > div, #productDetailTitle .storeFinderDetail h2 > div, .storeFinderDetail #productDetailTitle h2 > div { line-height: normal; font-size: 14px; font-size: 1.4rem; padding: 0; } .price, .priceChanged { color: #0e84aa; display: inline-block; float: none; line-height: normal; padding: 0; } .mainprice { font-size: 18px; font-size: 1.8rem; } @media all and (min-width: 43.8125em) { .mainprice { font-size: 22px; font-size: 2.2rem; } } .price + .price, .priceChanged + .priceChanged { color: #fa5f5f; } .wasprice { opacity: 0.45; text-decoration: line-through; } /** * Product Details */ #productDetail { float: none; width: 100%; /** * Mobile Specific */ } #productDetail .sp_phoneHead { background: none; padding: 0; width: 100%; } #productDetail .sp_phoneHead .row { text-align: center; } #productDetail .sp_phoneHead .row .code { float: none; padding: 0; } #productDetail .sp_phoneHead .row .voucherMsg { color: #848383; float: none; font-size: 15px; font-size: 1.5rem; margin-bottom: 20px; } /** * Left Column */ @media all and (min-width: 43.8125em) { #productDetailLeft { max-width: none; padding: 0; width: 41.5%; } } #productDetailLeft.col-4 { padding: 0; } @media all and (min-width: 43.8125em) { #productDetailLeft.col-4 { max-width: none; text-align: center; width: 56.5%; } } @media all and (min-width: 50.125em) { #productDetailLeft.col-4 { width: 34.5%; } .no-svg #productDetailLeft.col-4 { width: 400px; } } #productImage { clear: none; height: 358px; margin-bottom: 25px; width: 100%; } .no-svg #productImage { width: 400px; } #productImage > img { display: block; margin: 0 auto; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #productImage > img { min-height: 188px; } } @media all and (min-width: 61.25em) { #productImage > img { min-height: 217px; } } .no-svg #productImage > img { height: auto; width: auto; } #pimage_prompt { border: 1px solid #515050 !important; font-size: 13px !important; font-size: 1.3rem !important; } .altImageWrapper { float: left; margin-top: 10px; width: 100%; height: 77px; } .alt_scroll_outer { float: none; height: 80px; margin: 0 auto; width: 100%; } @media all and (min-width: 43.8125em) { .alt_scroll_outer { width: 315px; } } @media all and (min-width: 50.125em) { .alt_scroll_outer { width: 231px; } } @media all and (min-width: 61.25em) { .alt_scroll_outer { width: 320px; } } .alt_scroll_button, .alt_scroll_buttonr { height: 77px; } #altImageList { height: 77px; overflow: hidden; } .alt_scroll { height: 77px; } #productImageList { height: 77px; } #productImageList > div { margin: 0 8px; } @media all and (min-width: 61.25em) { #productImageList > div { margin: 0 7px; } } #productImageList div img { margin: 0; } #productImageList > div, #productImageList div img { height: 77px; width: auto; } .alt_scroll_right, .alt_scroll_right_off, .alt_scroll_left, .alt_scroll_left_off { margin-top: -53px; } @media all and (min-width: 50.125em) { .alt_scroll_right, .alt_scroll_right_off, .alt_scroll_left, .alt_scroll_left_off { margin-top: -53px; } } .smInnerHolder { height: auto; line-height: normal; width: 187px; } .smInnerHolder .smShare { display: inline-block; float: none; vertical-align: middle; } .smInnerHolder .smIcon { display: inline-block; float: none; line-height: normal; margin: 0; vertical-align: middle; width: 26px; } .smInnerHolder .smIcon a { display: block; height: 26px; } /** * Middle Column */ #productDetailMid { padding: 0; } @media all and (min-width: 43.8125em) { #productDetailMid { padding: 0 0 0 1.5%; width: 58.4%; } } @media all and (min-width: 43.8125em) { #productDetailMid.col-6 { padding: 0 0 0 2.5%; width: 43.4%; } } @media all and (min-width: 50.125em) { #productDetailMid.col-6 { padding: 0 2.5%; width: 49.777777%; } } #productDetailMid_I #buyingArea .DDLBox { float: none; } #productDetailMid_I div .row .code { font-size: 12px; font-size: 1.2rem; } #productDetailMid_I div.tabArea { border: none; float: none; margin-top: 0; width: 100%; } #productDetailMid_I div.tabArea #spTabPages { margin-top: 22px; min-height: 0; padding: 0; width: 100%; xheight: 200px; } @media all and (min-width: 43.8125em) { #productDetailMid_I div.tabArea #spTabPages { margin-top: 15px; } } @media all and (min-width: 50.125em) { #productDetailMid_I div.tabArea #spTabPages { background: #faf6ed; margin: 0; font-size: 17px; font-size: 1.7rem; } } #productDetailMid_I div.tabArea #spDetailTabs { background: #ffffff; border-bottom: 5px solid #92bfc3; display: none; margin: 0 0 6px; } @media all and (min-width: 50.125em) { #productDetailMid_I div.tabArea #spDetailTabs { display: block; } } #productDetailMid_I div.tabArea #spDetailTabs li { border-right: 1px solid #e5e5e6; font-size: 11.5px; font-size: 1.15rem; line-height: 35px; padding: 0 1%; text-transform: uppercase; -webkit-transition: all 0.4s; transition: all 0.4s; white-space: normal; width: 36.3%; } @media all and (min-width: 50.125em) and (max-width: 61.24em) { #productDetailMid_I div.tabArea #spDetailTabs li { line-height: 18px; padding: 7px 1%; } #productDetailMid_I div.tabArea #spDetailTabs li span { display: block; margin: 0 auto; width: 75%; } } @media all and (min-width: 61.25em) { #productDetailMid_I div.tabArea #spDetailTabs li span { width: 100%; } } #productDetailMid_I div.tabArea #spDetailTabs li:first-of-type, #productDetailMid_I div.tabArea #spDetailTabs li#tab1 { width: 27.4%; } #productDetailMid_I div.tabArea #spDetailTabs li:hover, #productDetailMid_I div.tabArea #spDetailTabs li:focus { background: #b3d2d5; color: #515050; } #productDetailMid_I div.tabArea #spDetailTabs li.off { background-color: #ffffff; } #productDetailMid_I div.tabArea #spDetailTabs li.on { background: #92bfc3; border-right: none; color: #ffffff; } #productDetailMid_I div.tabArea .expander { cursor: pointer; } @media all and (max-width: 50.115em) { #productDetailMid_I div.tabArea .expander { background-color: transparent; border: none; display: block; position: relative; margin: 4px 0; } } #productDetailMid_I div.tabArea .expander div { background-color: #ffffff; border: 1px solid #0e84aa; color: #0e84aa; opacity: 0.55; padding: 0 8px; text-transform: uppercase; -webkit-transition: all 0.5s; transition: all 0.5s; width: 100%; } #productDetailMid_I div.tabArea .expander div span { font-size: 12px; font-size: 1.2rem; line-height: 32px; } #productDetailMid_I div.tabArea .expander div:hover, #productDetailMid_I div.tabArea .expander div:focus, #productDetailMid_I div.tabArea .expander div:active { opacity: 1; } #productDetailMid_I div.tabArea .expander div:after { color: #0e84aa; content: '\25bc'; display: inline-block; font-size: 10px; font-size: 1rem; opacity: 0.55; position: absolute; right: 12px; top: 9px; } #productDetailMid_I div.tabArea .expander div.expanded { opacity: 1; } #productDetailMid_I div.tabArea .expander div.expanded:after { opacity: 1; } #productDetailMid_I div.tabArea .expander div.expanded:after { content: '\25B2'; font-size: 10px; font-size: 1rem; } #productDetailMid_I div.tabArea .tab { background: #faf6ed; margin: 5px 0; padding: 15px 10px; } @media all and (min-width: 50.125em) { #productDetailMid_I div.tabArea .tab { min-height: 180px; max-height: 180px; overflow-y: scroll; margin: 0; padding: 15px 3%; } } #productDetailMid_I div.tabArea .tab #productSummary, #productDetailMid_I div.tabArea .tab #productSummary h2 { font-size: 16px; font-size: 1.6rem; margin: 0; text-align: left; text-transform: none; } #productDetailMid_I div.tabArea .tab #productSpecs { clear: left; font-size: 14px; font-size: 1.4rem; margin-left: 15px; } #productDetailMid_I div.tabArea .tab #productSpecs li { display: list-item; list-style: circle outside; } #productDetailMid_I div.tabArea .tab #productSpecs li span, #productDetailMid_I div.tabArea .tab #productSpecs li p, #productDetailMid_I div.tabArea .tab #productSpecs li a { display: inline; margin: 0; } #productDetailMid_I div.tabArea .tab #productSpecs li p, #productDetailMid_I div.tabArea .tab #productSpecs li p a, #productDetailMid_I div.tabArea .tab #productSpecs li p span { color: #0e84aa; } #productDetailMid_I div.tabArea .tab #productSpecs li .r-arrow { color: #1096c2; } #productDetailMid_I div.tabArea .tab hr { margin: 8px 0; } #productDetailMid_I div.tabArea .tab .deliveryCharges { font-size: 16px; font-size: 1.6rem; } #productDetailMid_I div.tabArea .tab .deliveryCharges th { border: none; } #productDetailMid_I div.tabArea .tab .returns__info h3 { font-size: 16px; font-size: 1.6rem; margin: 24px 0 5px 0; text-align: left; } #productDetailMid_I div.tabArea .tab .returns__info p { font-size: 15px; font-size: 1.5rem; } #productDetailMid_I div.tabArea .tab .returns__info a { font-size: 12px; font-size: 1.2rem; } #productDetailMid_I div.tabArea .tab br { line-height: 30px; } #productDetailMid_I div.tabArea .tab.reviews { line-height: 17px; } /** * 3D Matrix */ #matrixTop { float: none; } .matrixBox { float: none; padding: 0; } .matrixBox h2 { color: #0e84aa; font-size: 14px; font-size: 1.4rem; margin-bottom: 17px; text-align: left; } .matrixHeadO { display: none; margin-bottom: 14px; padding-bottom: 45px; text-align: center; } .matrixColours { display: inline-block; text-align: center; margin: 0 auto 0 auto; } .variation { vertical-align: top; } .colourbox { padding: 1px 8px; -webkit-transition: all 0.5s; transition: all 0.5s; width: 100%; text-align: left; } .no-cssanimations .cb_selected img.colourimg { font-weight: bold; } .cb_selected:hover .colourname a, .cb_selected:focus .colourname a, .cb_selected:active .colourname a { color: #fa5f5f; } .cb_selected .colourname a { color: #fa5f5f; } div.colourimg { text-align: left; display: inline-block; vertical-align: middle; height: 20px; } img.colourimg { cursor: pointer; height: 20px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; width: 20px; } .colourname { display: inline-block; padding-left: 10px; text-align: left; } .colourname a { display: block; line-height: 19px; } .colourname a:hover, .colourname a:focus, .colourname a:active { color: #fa5f5f; text-decoration: none; } .matrixBodyO { float: none; } #matrixBody { float: none; font-size: 12px; font-size: 1.2rem; margin-bottom: 15px; } @media all and (min-width: 50.125em) { #matrixBody { border-bottom: 1px solid #ddd; margin-bottom: 18px; padding-bottom: 5px; } } .widthrow { border-bottom: 1px solid #ddd; margin: 8px 0 0 0; padding: 0 0 3px 0; width: 100%; } .widthrow:last-of-type { border-bottom: 0; } .widthrow__sizes { float: left; } .widthtitle { display: inline-block; margin: 7px 7px 0 0; max-width: 77px; min-width: 30px; vertical-align: top; } .sizebox { color: #ffffff; display: inline-block; line-height: 30px; padding: 2px 0; vertical-align: top; width: 28px; } .sizebutton { display: block; margin-right: 1px; text-align: center; } .sb_soon { background: #fa5f5f; } .sb_loStock { background: #ff962f; } .sb_inStock { background: #92bfc3; } .sb_selected { color: #515050; } .widthrow__prices { float: right; line-height: 31px; } .widthprice, .widthexvat, .widthwasprice, .widthtaxexprice { display: inline-block; padding: 0 6px; vertical-align: middle; text-align: right; } .widthprice { color: #0e84aa; font-size: 13px; font-size: 1.3rem; font-weight: bold; } .widthprice.widthwasset { color: #fa5f5f; text-decoration: none; } .widthwasprice, .widthtaxexprice { line-height: normal; text-align: center; width: 70px; } .widthwasset { color: #0e84aa; line-height: 16px; } .widthwasset .widthwasprice_price { text-decoration: line-through; } .widthtaxexprice { font-size: 17px; font-size: 1.7rem; font-weight: bold; } .keyLine { border-bottom: 1px solid #bbb; display: none; font-size: 16px; font-size: 1.6rem; margin-bottom: 23px; padding-bottom: 19px; } @media all and (min-width: 50.125em) { .keyLine { border-bottom: 0; display: block; margin: 0 2.5% 0 0; padding: 0; width: 66%; } } .keyLine p { margin: 0; } .keyLine #vatExPriceTxt { display: none; } .keyLine a { color: #fa5f5f; } .keyLine span { display: inline-block; height: 10px; margin-right: 6px; width: 10px; } .keyLine span.primary { background-color: #92bfc3; } .keyLine span.secondary { background-color: #fa5f5f; } .keyLine span.orange { background-color: #ff962f; } .stockdate { visibility: visible; } .nostockdate { visibility: hidden; } #buyingArea { margin-top: 30px; } @media all and (min-width: 50.125em) { #buyingArea { margin-top: 20px; } } #buyingArea #buyArea { border-bottom: 1px solid #bbb; margin-bottom: 20px; padding-bottom: 10px; } @media all and (min-width: 50.125em) { #buyingArea #buyArea { margin-top: 15px; } } #buyingArea #detailsDesktop { float: left; width: 100%; } #buyingArea #detailsDesktop p { margin: 10px 0 0; } #buyingArea #detailsDesktop #vatExTxtD { display: none; } #buyingArea #detailsPhone { margin-top: 20px; } #buyingArea dt, #buyingArea .qtymx dt { color: #0e84aa; float: left; font-size: 13px; font-size: 1.3rem; padding: 3px 0 2px 0; text-transform: uppercase; width: 95px; } #buyingArea .qtymx { margin-top: 10px; } #buyingArea .qtymx dt { font-style: normal; padding: 7px 0 0; } #buyingArea dd, #buyingArea .qtymx dd { float: left; font-size: 16px; font-size: 1.6rem; padding: 1px 0; width: 53%; } #buyingArea dd.txt:after, #buyingArea .qtymx dd.txt:after { content: "\00a0"; /* only needed to tidy up empty list */ } #buyingArea .qtymx .form__input, #buyingArea .qtydd .form__input { background: #b3d2d5; border: 0; font-size: 16px; font-size: 1.6rem; float: left; font-style: normal; height: 28px; line-height: normal; text-align: center; width: 37px; } #buyingArea .qbuttons { background-color: #92bfc3; float: left; height: 28px; } #buyingArea .qbuttons .qbutton { height: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 22px; } #buyingArea .qbuttons .qbutton:before, #buyingArea .qbuttons .qbutton:after { color: #ffffff; display: block; font-size: 20px; font-size: 2rem; height: 14px; line-height: 14px; text-align: center; } #buyingArea .qbuttons .qbutton.inc:after { content: "\25B2"; font-size: 10px; font-size: 1rem; } #buyingArea .qbuttons .qbutton.dec:after { content: "\25bc"; font-size: 10px; font-size: 1rem; } #buyingArea .qbuttons .qbutton:hover, #buyingArea .qbuttons .qbutton:focus, #buyingArea .qbuttons .qbutton:active { cursor: pointer; } #buyingArea .qbuttons .qbutton:hover:before, #buyingArea .qbuttons .qbutton:hover:after, #buyingArea .qbuttons .qbutton:focus:before, #buyingArea .qbuttons .qbutton:focus:after, #buyingArea .qbuttons .qbutton:active:before, #buyingArea .qbuttons .qbutton:active:after { color: #515050; } #buyingArea .buyBtn-off { visibility: hidden; } #buyingArea .buyBtn-on { visibility: visible; } #buyingArea ul.buybox { float: none; } @media all and (max-width: 50.115em) { #buyingArea ul.buybox { border-bottom: 1px solid #bbb; padding-bottom: 15px; margin-bottom: 7px; } } @media all and (min-width: 50.125em) { #buyingArea ul.buybox { float: left; margin: 0; text-align: center; width: 31.5%; } } #buyingArea ul.buybox p { margin: 10px 0 0; } #buyingArea ul.buybox #price { color: #515050; font-size: 22px; font-size: 2.2rem; line-height: 33px; opacity: 0; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; width: 100%; } #buyingArea ul.buybox #price.priceChanged { opacity: 1; } #buyingArea ul.buybox #price.priceChanged + .buy .button[type=submit] { white-space: pre-line; } #buyingArea ul.buybox li { float: none; } @media all and (min-width: 50.125em) { #buyingArea ul.buybox li { text-align: center; } } #buyingArea ul.buybox li .form__share { float: left; margin: 0; width: auto; } #buyingArea ul.buybox li .form__label.form__share { color: #0e84aa; float: left; font-size: 13px; font-size: 1.3rem; padding: 4px 0 0; text-transform: uppercase; width: 95px; } #buyingArea ul.buybox li.buy { margin-top: 15px; } @media all and (min-width: 50.125em) { #buyingArea ul.buybox li.buy { margin-top: 10px; } } #buyingArea ul.buybox li .button[type=submit] { width: auto; } #buyingArea ul.buybox #vatExTxt { display: none; } #DDLBox, #DDLBox2, #matrixTop { display: none; } .matrixBodyO { background: none; } .DDLBox #mob_price { color: #515050; font-size: 22px; font-size: 2.2rem; line-height: 33px; opacity: 0; text-align: center; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; width: 100%; } .DDLBox #mob_price.priceChanged { opacity: 1; } .DDLBox li { float: none; clear: none; padding: 5px 0; } .DDLBox li li { padding: 0; } .DDLBox li li.buy { padding: 7px 0; text-align: center; } .DDLBox li dd { float: none; } .matrixDiv .variation, .matrixDiv .colourRow { width: 100%; } .matrixDiv .variation { margin-bottom: 20px; } .matrixDiv .colour { float: left; padding-right: 4%; width: 32%; } .matrixDiv .colourimg { float: left; height: 20px; margin-bottom: 6px; padding: 3px 2px 2px 3px; } .matrixDiv .colourname { float: left; margin: 5px 0px 0 3px; } .matrixDiv .sizecolours { float: left; width: 68%; } .matrixDiv .sizecolour { background: #f94646; float: left; margin-bottom: 8px; padding: 4px 1.5% 0px 1.5%; width: 35px; } .matrixDiv .size { height: 39px; line-height: normal; } .matrixDiv .sizebutton img { width: 20px; } .matrixTable { float: left; font-size: 14px; font-size: 1.4rem; width: auto; } .matrixTable td { padding: 5px 0 !important; min-width: 21px; vertical-align: middle; } @media all and (min-width: 50.125em) and (max-width: 61.24em) { .matrixTable td:first-of-type { padding-left: 0 !important; } } .matrixTable td:last-of-type { padding-right: 0 !important; } .matrixTable td.t_colourname { padding-left: 2px !important; padding-right: 20px !important; } @media all and (min-width: 50.125em) and (max-width: 61.24em) { .matrixTable td.t_colourname { padding-left: 0 !important; padding-right: 7px !important; } } .matrixTable td.t_sizebutton img { height: auto; max-width: none; vertical-align: middle; } .matrixTable td img.t_colourimg { max-width: none; } .keyLine img.key { height: auto; width: auto; } /** * Product Reviews - Read reviews */ .reviews { /** * Review Items */ } .reviews .reviewlink { margin: 0 0 10px; width: 100%; } @media all and (min-width: 50.125em) { .reviews .reviewlink { margin: 0 0 10px; width: auto; } } .reviews .reviewList { float: none; } .reviews .reviewitem { border-bottom: 1px solid #ddd; float: none; margin: 22px 0; padding: 0 0 22px; /** * Header */ /** * Comment */ } .reviews .reviewitem:first-of-type { margin: 0 0 22px 0; } .reviews .reviewitem:last-of-type { border-bottom: 0 none; margin: 22px 0 0 0; } .reviews .reviewitem .image { display: none; } @media all and (min-width: 50.125em) { .reviews .reviewitem .image { display: block; float: left; height: 60px; width: 60px; } } @media all and (min-width: 50.125em) { .reviews .reviewitem .header__text { margin: 0 0 10px 70px; } } .reviews .reviewitem .head h4 { font-size: 14px; font-size: 1.4rem; margin: 0 0 6px; text-align: left; } .reviews .reviewitem .head p { font-size: 13px; font-size: 1.3rem; margin: 0 0 15px; } .reviews .reviewitem .comment { font-size: 14px; font-size: 1.4rem; margin: 15px 0; } .reviews .reviewitem .comment:last-of-type { margin-bottom: 0; } .reviews .reviewitem .ratings .review { float: left; margin: 2px 0; padding: 0 4% 0 0; width: 46%; } .reviews .reviewitem .ratings .rtype { float: left; font-size: 14px; font-size: 1.4rem; padding-right: 10px; width: 55px; } @media all and (min-width: 43.8125em) { .reviews .reviewitem .ratings .rtype { width: 70px; } } .reviews .reviewitem .ratings .stars { float: left; margin-top: 3px; } .reviewstars_overlay { background: url(../../images/review-stars-ovl.png) 0 0 no-repeat; clear: left; float: left; height: 10px; margin: -12px 0 0 0px; width: 60px; } /** * Product Reviews - Leave a review */ .leaveReview { background: #faf6ed; margin-bottom: 30px; padding: 30px 2%; } .leaveReview #reviewForm { margin: 0; } @media all and (max-width: 43.8025em) { .leaveReview .col-6:last-of-type { margin-top: 30px; } } .leaveReview h1, .leaveReview #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .leaveReview .infohead, .leaveReview #pageTitle h1, #pageTitle .leaveReview h1, .leaveReview .storeFinderDetail h2, .storeFinderDetail .leaveReview h2 { margin-bottom: 40px; } .leaveReview h2 { color: #0e84aa; font-size: 18px; font-size: 1.8rem; margin: 0; } .leaveReview h3 { color: #0e84aa; font-size: 20px; font-size: 2rem; text-align: left; } .leaveReview dl { margin-bottom: 30px; } .leaveReview dl dt { float: left; font-weight: bold; width: 27%; padding-right: 3%; } .leaveReview dl dd { float: left; margin-left: 0; padding-right: 5%; width: 73%; } .leaveReview .form__textarea + .message--error { margin-bottom: 20px; } @media all and (min-width: 43.8125em) { .leaveReview .form__textarea + .message--error { float: none; margin-bottom: 0; width: 160px; } } .leaveReview .revRatings .reviewRate:last-of-type { margin-bottom: 0; } .leaveReview .reviewRate { margin-bottom: 18px; } @media all and (min-width: 50.125em) { .leaveReview .reviewRate { margin-bottom: 0; } } .leaveReview .reviewRate:before { color: #0e84aa; content: '\25b8'; float: left; font-size: 10px; font-size: 1rem; line-height: 17px; margin-right: 5px; } .leaveReview .reviewRate:last-child { margin-bottom: 30px; } .leaveReview .reviewRate .head { float: left; line-height: 20px; max-width: 75%; padding-right: 3%; } .leaveReview .reviewRate .ratestar { float: right; margin-top: 5px; width: 60px; } .leaveReview hr { border-bottom: 1px solid #e1e0df; border-top: 1px solid #ffffff; margin: 23px 0; margin: 2.3rem 0; } .leaveReview .form__textarea { height: 178px; width: 100%; } @media all and (min-width: 43.8125em) { .leaveReview .form__textarea { width: 75%; } } .leaveReview .button { display: block; float: none; margin: 20px 0 0 0; } @media all and (min-width: 43.8125em) { .leaveReview .button { float: right; } } .leaveReview img { width: 100%; max-width: 106px; margin-bottom: 10px; } #reviewDone { display: none; } #reviewError span { display: block; margin: 10px 0; } /** * Right Column - You may also like.... */ #productDetailRight.col-2 { clear: left; float: none; padding: 20px 0 0; width: 100%; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #productDetailRight.col-2 { height: 55px; } } @media all and (min-width: 50.125em) { #productDetailRight.col-2 { clear: none; float: left; padding: 0; width: 15.66667%; } } @media all and (min-width: 43.8125em) { #productDetailRight .slide__circle { display: block; left: auto; margin: 0 auto; position: relative; top: auto; } } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #productDetailRight .slide__circle { left: 0; margin: 0; position: absolute; top: -130px; } } @media all and (min-width: 50.125em) and (max-width: 61.24em) { #productDetailRight .slide__circle { height: 116px; width: 116px; } #productDetailRight .slide__circle svg, #productDetailRight .slide__circle img { margin-top: 11px; width: 77px; } } @media all and (min-width: 61.25em) { #productDetailRight .slide__circle { height: 140px; width: 140px; } #productDetailRight .slide__circle svg, #productDetailRight .slide__circle img { height: auto; width: 99px; } } @media all and (min-width: 50.125em) and (max-width: 61.24em) { #productDetailRight .productRelItem { min-width: 80%; max-width: 80%; } } #productRel { background: #faf6ed; height: auto; margin-top: 40px; } @media all and (min-width: 43.8125em) { #productRel { margin-top: 30px; } } @media all and (min-width: 50.125em) { #productRel { margin-top: 20px; } } #productRel .top { background: none; font-size: 24px; font-size: 2.4rem; line-height: 32px; margin: 19px 0 10px; text-align: center; text-transform: uppercase; width: 100%; } @media all and (min-width: 43.8125em) { #productRel .top { font-size: 17px; font-size: 1.7rem; line-height: 22px; padding: 0 15%; margin: 18px 0 12px; } } #productRel .parts { float: none; margin: 0 0 10px; max-width: none; text-align: center; } /** * Recently Viewed items */ .productRelItem { display: inline-block; float: none; height: auto !important; margin: 10px 2.5% 15px 2.5%; max-width: 127px; min-width: 127px; padding: 0; vertical-align: top; width: auto; } @media all and (min-width: 43.8125em) { .productRelItem { margin: 5px 1.2% 15px 1.2%; } } .productRelItem .pli_rel_pricebox .pli_wasprice { color: #0e84aa; } .productRelItem .pli_rel_pricebox .price { color: #0e84aa; float: left; font-style: italic; width: 100%; } .productRelItem .pli_rel_pricebox.was_price_set .price { color: #fa5f5f; } .productRelItem .pli_rel_left { float: none; } .productRelItem .pli_rel_left .pli_Img { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; float: none; padding: 0; overflow: hidden; margin: 0 auto; width: 100%; } @media all and (min-width: 43.8125em) { .productRelItem .pli_rel_left .pli_Img { height: auto; } } .productRelItem .pli_rel_left .pli_Img img { cursor: pointer; display: block; float: none; height: 84px; margin: 0 auto; width: 100%; } .productRelItem .pli_rel_left .pli_Img img:hover, .productRelItem .pli_rel_left .pli_Img img:focus, .productRelItem .pli_rel_left .pli_Img img:active { opacity: 0.8; } .productRelItem .pli_rel_right { display: block; float: none; margin-top: 3px; padding: 0; text-align: center; width: 100%; } .productRelItem .pli_descrbox { display: block; height: 25px; line-height: normal; overflow: hidden; padding: 5px 0 0 0; width: 100%; } .productRelItem .pli_rel_pricebox { display: block; font-size: 17px; font-size: 1.7rem; width: 100%; } .productRelItem .pli_product:hover, .productRelItem .pli_product:focus, .productRelItem .pli_product:active { display: block; } .relBorder { border-left: 1px solid #c8c8c8; height: 250px; margin-top: 0; } @media all and (min-width: 50.125em) { .relBorder { height: 280px; } } .relBorder:last-of-type { display: none; } #relativesList_viewed .viewed { height: auto; margin: 25px 0 0 0; max-width: none; } @media all and (min-width: 43.8125em) { #relativesList_viewed .viewed { margin: 0; } } @media all and (min-width: 50.125em) { #relativesList_viewed .viewed { margin: 30px 0 0 0; } } #relativesList_viewed .viewedHead { background: #ffffff; border-bottom: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4; font-size: 24px; font-size: 2.4rem; float: none; line-height: 30px; margin-bottom: 20px; padding: 8px 0; text-align: center; text-transform: uppercase; width: 100%; } #relativesList_viewed #viewedList { height: auto; margin: 0; max-width: none; text-align: center; } .sp_spacer { display: none; } /** * Add to basket popup */ .alertX { max-width: 97%; padding: 0; } .alertX h2 { margin-bottom: 10px; } .alertXMessage { float: none; padding: 3%; width: 100% !important; } .alertXMessage > div { float: none !important; margin: 0 auto; } .alertXMessage a:not(.button) { color: #fa5f5f; } .alertXCloseHide { border-top: none; margin: 0; } .alertXCloseHide img { right: -12px; top: -12px; } .alertXClose img { top: -22px; right: -12px; } .alertXHeadText { color: #515050; font-size: 18px; font-size: 1.8rem; } .alertXHead { margin: 10px 0 0 0; } .alertXHead_hide { margin: 0; } .alertXPrompt { height: auto; width: 100%; } .alertXPrompt td { border: 0 none; } .lightBox { float: none; padding: 0; width: auto !important; } @media all and (min-width: 43.8125em) { .lightBox { width: 330px !important; } } .lightBoxHead { background: #faf6ed; font-size: 14px; font-size: 1.4rem; line-height: 21px; padding: 10px 0; text-transform: uppercase; } .lightBoxImg { float: right; height: auto; margin: 12px 3% 0 0; width: 69px; } .lightBoxRight { padding: 10px 0 0 3%; width: 72%; } .lightBoxRight div { padding: 1px 0 0 0; } .lightBoxButtons .button { font-size: 12px; font-size: 1.2rem; } /* ================================ Basket Page ================================ */ .halfTitle { color: #515050; line-height: normal; margin: 0 0 10px 0; padding: 5px 10px; text-align: center; width: auto; } @media all and (min-width: 43.8125em) { .halfTitle { min-width: 400px; text-align: left; } } .mainBasket > h1, #servicesMain .servicesPage .mainBasket > .infohead, #pageTitle .mainBasket > h1, .storeFinderDetail .mainBasket > h2 { font-size: 30px; font-size: 3rem; } .mainBasket .basketMessage { display: none; float: none; font-size: 15px; font-size: 1.5rem; margin: 10px 0 24px; padding: 10px; text-align: center; text-transform: uppercase; width: 100%; } .mainBasket .basketMessage b { font-weight: normal; } .mainBasket .basketMessage:before { content: ''; } @media all and (min-width: 43.8125em) { .mainBasket .basketMessage { margin: 25px 0 0 0; } } @media all and (min-width: 43.8125em) { .basketHeader { margin-top: 25px; } } .basketCheckout1 { margin: 9px 0 20px 0; } #bsktForm { margin: 0; } #basketLeft #basketMain, #basketLeft .basketMain { float: none; } #basketLeft .basketMain.phoneon { margin-top: 10px; } #basketLeft table { margin: 0; } #basketLeft .qtyUpdater { margin-top: 6px; } #basketLeft .bsktLinePhone { border-bottom: 1px solid #ddd; padding-bottom: 20px; } #basketLeft .bskt th { background: #dddddf; padding: 5px 2%; text-align: center; } #basketLeft .bskt td { padding: 0 2%; text-align: center; } #basketLeft .bskt td.contents { padding-left: 5px; text-align: left; } #basketLeft .bskt td.contents.code { border: 0 none; vertical-align: top; } #basketLeft .bskt td.totcol2 { border-left: 0 none; padding: 0 1%; text-align: left; } #basketLeft .bskt td.totcol2 .basketCarrierLabel { line-height: 20px; margin-top: 25px; } #basketLeft .bskt td.totcol2 #basketCarrierB { font-size: 13px; font-size: 1.3rem; } #basketLeft .bskt td.tincl { border-bottom: 1px solid #ddd; } #basketLeft .bskt td.tincl.carrier { padding-top: 45px; vertical-align: top; } #basketLeft .bskt td.incl { padding: 0 2%; } #basketLeft .bskt td .wasprice { opacity: 0.8; text-decoration: none; } #basketLeft .bskt td .wasprice .wasprice_price { text-decoration: line-through; } #basketLeft .bskt td.last { background: #dddddf; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; border-top: 1px solid #ddd; font-size: 14px; font-size: 1.4rem; font-weight: bold; } #basketLeft .bskt div.image { min-height: 107px; width: 90px; } #basketLeft .bskt div.image .bsktimg { width: 90px; } #basketLeft .bskt div.txt { margin-left: 100px; } #basketLeft a.bsktTitle { font-size: 16px; font-size: 1.6rem; text-transform: uppercase; } @media all and (max-width: 43.8025em) { #basketLeft a.bsktTitle { display: block; margin-bottom: 10px; } } #basketLeft a.bsktTitle .part { font-size: 13px; font-size: 1.3rem; } #basketLeft .partInfo { color: #71acb1; font-size: 14px; font-size: 1.4rem; font-weight: bold; } @media all and (min-width: 43.8125em) { #basketLeft .partInfo { font-size: 12px; font-size: 1.2rem; } } #basketLeft .bsktRemoveBtn { font-size: 13px; font-size: 1.3rem; padding-left: 20px; } #basketLeft .bsktRemoveBtn:before { color: #000; content: "\2718"; padding-right: 5px; } #basketLeft .bsktRemoveBtn:hover, #basketLeft .bsktRemoveBtn:focus, #basketLeft .bsktRemoveBtn:active { color: #1a3034; } #basketLeft .bsktRemoveBtn:hover:before, #basketLeft .bsktRemoveBtn:focus:before, #basketLeft .bsktRemoveBtn:active:before { color: #1a3034; } #basketLeft .checkout__img { float: right; margin: 20px 0; } @media all and (min-width: 43.8125em) { #basketLeft .checkout__img { float: left; margin: 23px 0 0 61%; } } @media all and (min-width: 50.125em) { #basketLeft .checkout__img { margin: 23px 0 0 66%; } } @media all and (min-width: 61.25em) { #basketLeft .checkout__img { margin: 23px 0 0 72%; } } #basketLeft .bsktp { margin: 15px 0 0 0; } #basketLeft .bsktp div.txt { margin-left: 0; } #basketLeft .bsktp div.image { border: 0 none; text-align: center; width: 100%; } @media all and (min-width: 43.8125em) { #basketLeft .bsktp div.image { float: left; } } #basketLeft .bsktp div.image .bsktimg { width: auto; } #basketLeft .bsktp div.ttincl { float: left; text-align: left; width: 70%; } #basketLeft .bsktp div.qty { float: left; padding-top: 0; } #basketLeft .bsktp div .bsktRemoveBtn { padding-top: 26px; } @media all and (min-width: 43.8125em) { #basketLeft .bsktp div .bsktRemoveBtn { padding-top: 6px; } } #basketLeft .bsktp div.tincl { float: left; font-size: 16px; font-size: 1.6rem; height: auto; margin-top: 0; } @media all and (max-width: 43.8025em) { #basketLeft .bsktp div.tincl { font-size: 18px; font-size: 1.8rem; margin-top: 5px; text-align: center; } } #basketLeft .bsktp div.totcol2 { text-align: left; width: 30%; } #basketLeft .bsktp div.last { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; font-size: 18px; font-size: 1.8rem; margin-top: 10px; padding-bottom: 7px; padding-top: 7px; } @media all and (min-width: 43.8125em) { #basketLeft .bsktp div.last { font-size: 16px; font-size: 1.6rem; } } #basketLeft #respMove_carrier_phone { padding-bottom: 20px; } #basketLeft #basketCarrierB { padding-top: 0; } #basketLeft #codePromptPhone { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; float: none; padding: 15px 0; } #basketLeft #taxex { display: none; padding: 25px 0 5px 0; text-align: center; } #basketLeft #taxex p { margin: 0; } @media all and (min-width: 43.8125em) { #basketLeft #taxex { float: right; padding: 27px 0 0 0; text-align: right; } } #basketLeft #codeInputPhone { float: none; padding: 10px 0 15px 0; } #basketLeft #basketCode { width: 100%; } #basketLeft .basketCodeLabel { border: 1px solid #bbb; border-bottom: 0 none; width: 100%; } #basketLeft .basketCodeIn { border: 1px solid #bbb; padding: 10px 2%; width: 100%; } @media all and (min-width: 43.8125em) { #basketLeft .basketCodeIn { padding: 10px 6%; } } #basketLeft .basketCodeInput { padding: 0; width: 100%; } #basketLeft .basketCodeButton { padding: 11px 0 0 0; width: 100%; } #basketLeft .carrierNotes { font-size: 13px; font-size: 1.3rem; line-height: 15px; margin: 10px 0; text-transform: none; } #basketLeft .form__item.tncs { clear: right; margin: 20px 0 0 0; padding: 0; } @media all and (min-width: 43.8125em) { #basketLeft .form__item.tncs { float: right; width: 602px; } } #basketLeft .form__item.tncs .form__item--multi { text-align: center; } @media all and (min-width: 43.8125em) { #basketLeft .form__item.tncs .form__item--multi { text-align: right; } } #basketLeft .form__item.tncs .form__item--multi .form__checkbox { margin-top: 5px; vertical-align: top; width: 12px; } #basketLeft .form__item.tncs .form__label--multi { line-height: 18px; width: 80%; } @media all and (min-width: 43.8125em) { #basketLeft .form__item.tncs .form__label--multi { padding: 0; width: 86%; } } @media all and (min-width: 43.8125em) { #basketLeft .form__item.tncs .message--error { float: right; text-align: left; width: 543px; } } .basketCheckout1, .basketCheckout2 { width: 100%; } @media all and (min-width: 43.8125em) { .basketCheckout1, .basketCheckout2 { width: auto; } } .basketCheckout1 .buttons, .basketCheckout2 .buttons { float: none; } .basketCheckout1 .button, .basketCheckout2 .button { float: none; width: 100%; } @media all and (min-width: 43.8125em) { .basketCheckout2 { margin: 20px 0 0 0; } } /** * Empty Basket */ .basket__empty { min-height: 300px; text-align: center; } .basket__empty .button { margin-top: 30px; } /* ================================ Checkout ================================ */ #checkoutTop { float: none; margin: 30px auto 0; } #checkoutTop #checkoutCrumbs { max-width: none; } #checkoutTop #checkoutCrumbs li { background: #ddd; color: #515050; font-size: 13px; font-size: 1.3rem; height: auto; letter-spacing: -1px; line-height: normal; padding: 0; -webkit-transition: all 0.5s; transition: all 0.5s; width: 20%; } @media all and (min-width: 50.125em) { #checkoutTop #checkoutCrumbs li { font-size: 14px; font-size: 1.4rem; letter-spacing: 0; } } #checkoutTop #checkoutCrumbs li a, #checkoutTop #checkoutCrumbs li span { border-right: 1px solid #ddd; display: block; margin: 10px 0; } #checkoutTop #checkoutCrumbs li a:hover, #checkoutTop #checkoutCrumbs li a:focus, #checkoutTop #checkoutCrumbs li span:hover, #checkoutTop #checkoutCrumbs li span:focus { color: #515050; text-decoration: none; } #checkoutTop #checkoutCrumbs li:hover, #checkoutTop #checkoutCrumbs li:focus { background: #c4c4c4; color: #515050; cursor: pointer; } #checkoutTop #checkoutCrumbs li.on, #checkoutTop #checkoutCrumbs li.laston { background: #3d6e77; color: #ffffff; } #checkoutTop #checkoutCrumbs li.on a, #checkoutTop #checkoutCrumbs li.on span, #checkoutTop #checkoutCrumbs li.laston a, #checkoutTop #checkoutCrumbs li.laston span { border-right: 0 none; } #checkoutTop #checkoutCrumbs li.on a:hover, #checkoutTop #checkoutCrumbs li.on a:focus, #checkoutTop #checkoutCrumbs li.on span:hover, #checkoutTop #checkoutCrumbs li.on span:focus, #checkoutTop #checkoutCrumbs li.laston a:hover, #checkoutTop #checkoutCrumbs li.laston a:focus, #checkoutTop #checkoutCrumbs li.laston span:hover, #checkoutTop #checkoutCrumbs li.laston span:focus { color: #ffffff; } #checkoutTop #checkoutCrumbs li.lastoff a, #checkoutTop #checkoutCrumbs li.lastoff span { border-right: 0 none; } #checkoutContainer { float: none; } @media all and (min-width: 50.125em) { #checkoutContainer { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } } #checkoutMain { float: none; padding: 0; width: 100%; /** * Login / Register during Checkout */ /** * Delivery */ /** * Tax exemption code specific to checkout process. * See below for tax exemption code common to checkout * review and SP page */ /** * Review items */ /** * Payment Details */ /** * Payment Frames */ /** * Thank You */ } @media all and (min-width: 43.8125em) { #checkoutMain #mainCheckoutDivs { margin-bottom: 30px; } } #checkoutMain .basketError { background-color: #f8c9c4; border: 5px solid #e74c3c; font-size: 20px; font-size: 2rem; font-weight: bold; margin: 20px 0; padding: 20px; text-align: center; } #checkoutMain div.expander { background: #ddd; color: #515050; width: 100%; } #checkoutMain div.expander:hover, #checkoutMain div.expander:focus, #checkoutMain div.expander:active, #checkoutMain div.expander .expanded { background: #c4c4c4; cursor: pointer; } #checkoutMain div.expander .expanded { background: #3d6e77; color: #ffffff; } #checkoutMain div.expander div, #checkoutMain div.expander > a.collapsed { background-image: none; border-bottom: 1px solid #ffffff; display: block; font-size: 16px; font-size: 1.6rem; line-height: 40px; padding: 0 2%; text-transform: uppercase; width: 100%; } #checkoutMain div.expander div:hover, #checkoutMain div.expander div:focus, #checkoutMain div.expander div:active, #checkoutMain div.expander > a.collapsed:hover, #checkoutMain div.expander > a.collapsed:focus, #checkoutMain div.expander > a.collapsed:active { text-decoration: none; } #checkoutMain div.expander span:after { content: "\25BC"; float: right; font-size: 11px; font-size: 1.1rem; } #checkoutMain div.expander .collapsed span:after { content: "\25b6"; font-size: 13px; font-size: 1.3rem; } #checkoutMain .co_subtitle, #checkoutMain #payment_frame #spframeloading, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .head { color: #0e84aa; font-size: 17px; font-size: 1.7rem; line-height: 28px; text-align: center; text-transform: uppercase; } @media all and (min-width: 43.8125em) { #checkoutMain .co_subtitle, #checkoutMain #payment_frame #spframeloading, #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .head { text-align: left; } } #checkoutMain #loginForm { margin: 0; } #checkoutMain #loginForm .row { margin-left: 0; margin-right: 0; padding: 30px 15px; } @media all and (min-width: 50.125em) { #checkoutMain #loginForm .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } #checkoutMain #loginForm .co_subtitle { float: none; } #checkoutMain #loginForm .col-6 { border-bottom: 1px solid #ddd; padding-bottom: 30px; width: 100%; } @media all and (min-width: 50.125em) { #checkoutMain #loginForm .col-6 { border-bottom: none; border-right: 1px solid #ddd; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; padding-bottom: 0; padding-right: 7%; width: 50%; } } #checkoutMain #loginForm .col-6.right { border-bottom: 0 none; padding-bottom: 0; text-align: right; width: 100%; } #checkoutMain #loginForm .col-6.right.register { border-bottom: 1px solid #ddd; padding-bottom: 30px; } @media all and (min-width: 50.125em) { #checkoutMain #loginForm .col-6.right { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-right: none; padding-right: 0; text-align: center; width: 25%; } #checkoutMain #loginForm .col-6.right.register { border-bottom: 0 none; border-right: 1px solid #ddd; padding-bottom: 0; } } #checkoutMain #loginForm .col-6.right .co_subtitle { margin-top: 20px; } @media all and (max-width: 43.8025em) { #checkoutMain #loginForm .col-6.right .co_subtitle { margin-bottom: 10px; } } @media all and (min-width: 50.125em) { #checkoutMain #loginForm .col-6.right .co_subtitle { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 15px; font-size: 1.5rem; margin: 56px auto 0; text-align: center; width: 70%; } .no-flexbox #checkoutMain #loginForm .col-6.right .co_subtitle { margin-bottom: 10px; } } @media all and (min-width: 61.25em) { #checkoutMain #loginForm .col-6.right .co_subtitle { font-size: 19px; font-size: 1.9rem; margin: 86px auto 0; width: 80%; } } #checkoutMain .co_box_100 { border: 1px solid #ddd; margin: 0 0 30px 0; padding: 30px 15px; width: 100%; } @media all and (min-width: 50.125em) { #checkoutMain .co_box_100 { margin: 0; } } #checkoutMain #loginEcusDetails { margin-top: 17px; } #checkoutMain #loginEcusDetails .co_loginEmail, #checkoutMain #loginEcusDetails .co_loginPass { margin-top: 20px; max-width: none; } #checkoutMain #loginEcusDetails .co_loginEmail { margin-top: 0; } #checkoutMain #loginEcusDetails .logininput { margin-left: 0; } @media all and (min-width: 50.125em) { #checkoutMain #loginEcusDetails .logininput { margin-left: 48%; } } @media all and (max-width: 50.115em) { #checkoutMain #loginEcusDetails .loginlabel { float: none; line-height: 31px; width: 100%; } } #checkoutMain #loginEcusDetails .co_loginButton { float: left; margin-top: 20px; text-align: right; } @media all and (min-width: 50.125em) { #checkoutMain #loginEcusDetails .co_loginButton { margin: 21px 0 0 48%; width: 52%; } #checkoutMain #loginEcusDetails .co_loginButton .button { width: 100%; } } #checkoutMain #loginEcusDetails .info { margin: 18px 0 0 0; float: left; } @media all and (min-width: 43.8125em) { #checkoutMain #loginEcusDetails .info { margin: 20px 0 0 48%; } } #checkoutMain #new_address_button_block .button--green + .button--green, #checkoutMain #new_address_button_block .button + .button { margin-top: 0; } #checkoutMain #new_address_form_block { border: 1px solid #ddd; margin: 0; padding: 0 20px 30px 20px; width: 100%; } #checkoutMain #new_address_form_block .co_subtitle { padding-top: 30px; } #checkoutMain #new_address_form_block .button--green + .button--green, #checkoutMain #new_address_form_block .button + .button { margin-top: 0; } #checkoutMain #new_address_form_block #deliveryAddress { margin: 0; } #checkoutMain #new_address_form_block #checkoutAddCust, #checkoutMain #new_address_form_block #checkoutAddAddress, #checkoutMain #new_address_form_block #addFind { float: none; } #checkoutMain #new_address_form_block #checkoutAddCust { margin-bottom: 0; } #checkoutMain #new_address_form_block #checkoutAddAddress { padding: 0 0 32px 0; } #checkoutMain #new_address_form_block #checkoutAddAddress #addFind { margin: 0; } #checkoutMain #new_address_form_block #checkoutAddAddress .terms .info { padding: 21px 0; } #checkoutMain #new_address_form_block #checkoutAddAddress .terms .stdcb { float: left; margin: 2px 14px 0 0; width: 15px; } #checkoutMain #new_address_form_block #checkoutAddAddress .terms label { float: left; line-height: 17px; width: 80%; } #checkoutMain #new_address_form_block dl.std { float: none; } @media all and (max-width: 43.8025em) { #checkoutMain #new_address_form_block dl.std dd { float: none; } } #checkoutMain #new_address_form_block dl.std dt { line-height: 34px; margin: 8px 0 0 0; } @media all and (min-width: 43.8125em) { #checkoutMain #new_address_form_block dl.std dt { margin: 14px 0 0 0; } } #checkoutMain #new_address_form_block .pwd { margin-bottom: 35px; } @media all and (min-width: 43.8125em) { #checkoutMain #new_address_form_block .co_registerButtonBack { float: left; } } #checkoutMain #new_address_form_block .button { width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain #new_address_form_block .button { float: right; width: auto; } } #checkoutMain #new_address_form_block .button.button--green { float: left; } @media all and (max-width: 43.8025em) { #checkoutMain #new_address_form_block .button.button--green { margin-bottom: 15px; width: 100%; } } #checkoutMain #coPersonalTitle, #checkoutMain #coDeliveryTitle { line-height: 33px; margin: 0 0 8px; padding: 0; text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #coPersonalTitle, #checkoutMain #coDeliveryTitle { text-align: left; } } #checkoutMain #showAddress { text-align: right; } #checkoutMain #postcodefind { float: left; } @media all and (min-width: 43.8125em) { #checkoutMain #saveInvButton { float: right; width: auto; } } #checkoutMain .co_add_delivery_button { margin: 20px 0 0 0; width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain .co_add_delivery_button { float: left; margin: 30px 0 0 0; width: auto; } } @media all and (max-width: 43.8025em) { #checkoutMain .co_add_delivery_button .button { float: left; margin-bottom: 0 !important; width: 68%; } #checkoutMain .co_add_delivery_button .button + .button { margin-top: 0; } #checkoutMain .co_add_delivery_button .button.backBtn { margin-bottom: 0 !important; width: 30%; } } #checkoutMain .co_add_delivery_button a + a { margin-left: 2%; } @media all and (min-width: 43.8125em) { #checkoutMain .co_add_delivery_button a + a { margin-left: 10px; } } @media all and (max-width: 43.8025em) { #checkoutMain #deliveryLeft { margin-bottom: 30px; } } #checkoutMain #checkoutChooseAddress { border: 1px solid #ddd; margin: 0; padding: 30px 20px; width: 100%; } #checkoutMain #checkoutChooseAddress > p { text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #checkoutChooseAddress > p { text-align: left; } } #checkoutMain #checkoutChooseAddress #deliveryContinue { float: left; margin-top: 20px; width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain #checkoutChooseAddress #deliveryContinue { margin-top: 0; } } #checkoutMain #checkoutChooseAddress .co_select_address { float: none; margin-bottom: 18px; text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #checkoutChooseAddress .co_select_address { text-align: left; } } #checkoutMain #checkoutChooseAddress .addline { background: #faf6ed; border: 1px solid #ddd; padding: 10px 0; -webkit-transition: all 0.5s; transition: all 0.5s; } #checkoutMain #checkoutChooseAddress .addline.checked { background: #f7f0e1; border: 1px solid #515050; } #checkoutMain #checkoutChooseAddress .addline div.i { padding: 2px 4% 0 4%; width: 13%; } @media all and (min-width: 43.8125em) { #checkoutMain #checkoutChooseAddress .addline div.i { padding: 2px 0 0 1.7%; width: 5%; } } #checkoutMain #checkoutChooseAddress .addline div.n { width: 85%; } #checkoutMain #checkoutChooseAddress .col-6 .form__item { margin-bottom: 0; padding: 20px 0 0; } @media all and (min-width: 43.8125em) { #checkoutMain #checkoutChooseAddress .col-6 .form__item { padding: 27px 7px 0; } } #checkoutMain div.co_sel_address_button { margin: 0; width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain div.co_sel_address_button { margin: 30px 0 0 0; width: auto; } } #checkoutMain #basketSummaryParts { margin-top: 27px; } @media all and (max-width: 43.8025em) { #checkoutMain #basketSummaryParts { border: 1px solid #ddd; margin: 15px 0 0 0; padding: 3%; } } #checkoutMain #basketSummaryParts .head { line-height: 40px; text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #basketSummaryParts .head { text-align: left; } } #checkoutMain #basketSummaryParts .items { border-collapse: inherit; text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #basketSummaryParts .items { text-align: left; } } @media all and (max-width: 43.8025em) { #checkoutMain #basketSummaryParts .items .item .image img { float: none; } #checkoutMain #basketSummaryParts .items .item .pull-left { display: inline-block; float: none; } } #checkoutMain #basketSummaryParts .items .item td { padding: 0 10px; } @media all and (max-width: 43.8025em) { #checkoutMain #basketSummaryParts .items .item td { text-align: center; } } #checkoutMain #basketSummaryParts .items .item td:first-of-type, #checkoutMain #basketSummaryParts .items .item td:last-of-type { padding: 10px; } #checkoutMain #basketSummaryParts .items .phoneoff_tr th:first-of-type div { margin-left: 0; } #checkoutMain #basketSummaryParts .items .phoneoff_tr th:last-of-type div { margin-right: 0; } #checkoutMain #taxex_page { margin-bottom: 32px; } @media all and (min-width: 43.8125em) { #checkoutMain #taxex_page { margin-bottom: 0; } } #checkoutMain #taxexform .co_taxexButtonBack, #checkoutMain #taxexform .co_taxexButton { float: left; margin-top: 15px; width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain #taxexform .co_taxexButtonBack, #checkoutMain #taxexform .co_taxexButton { float: right; margin: 30px 0 0 0; width: auto; } } #checkoutMain #taxexform .co_taxexButtonBack .BMBtn, #checkoutMain #taxexform .co_taxexButtonBack .button, #checkoutMain #taxexform .co_taxexButton .BMBtn, #checkoutMain #taxexform .co_taxexButton .button { margin: 0 !important; width: 100%; } @media all and (max-width: 43.8025em) { #checkoutMain #taxexform .co_taxexButtonBack { margin-top: 30px; } } @media all and (min-width: 43.8125em) { #checkoutMain #taxexform .co_taxexButtonBack { float: left; } } #checkoutMain #orderConfirmMain { padding: 30px 0 0 0; } #checkoutMain #orderConfirmMain .co_subtitle { margin-bottom: 5px; } #checkoutMain #orderConfirmMain .bsktRemoveBtn { display: none; } #checkoutMain #orderConfirmMain .revAddWrapper { text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #orderConfirmMain .revAddWrapper { text-align: left; } } #checkoutMain #orderConfirmMain .revAddWrapper p { line-height: 21px; } #checkoutMain #orderConfirmLeft, #checkoutMain #orderConfirmRight { border-bottom: 1px solid #ddd; display: block; float: none; margin: 0 0 5px; padding: 0; width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain #orderConfirmLeft, #checkoutMain #orderConfirmRight { border-bottom: 0; margin: 0 0 15px; width: 50%; } } #checkoutMain #orderConfirmLeft .data span, #checkoutMain #orderConfirmRight .data span { display: block; } #checkoutMain #orderConfirmLeft { border-bottom: 0 none; } @media all and (min-width: 43.8125em) { #checkoutMain #orderConfirmLeft { border-right: 1px solid #ddd; float: left; padding: 0 8% 0 0; } #checkoutMain #orderConfirmRight { float: right; padding: 0 0 0 8%; } } #checkoutMain #basketReview .co_subtitle { margin-top: 20px; text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #basketReview .co_subtitle { margin: 30px 0 20px; } } #checkoutMain #basketReview #basketLeft .bskt td.tincl.carrier { padding-top: 0; } #checkoutMain #basketReview .basketMain, #checkoutMain #basketReview .basketMain .bsktp { margin-top: 0; } #checkoutMain #basketReview .bsktp div.qty { text-align: center; } #checkoutMain #basketCheckout2 { margin: 25px 0; } @media all and (min-width: 43.8125em) { #checkoutMain #basketCheckout2 { margin: 15px 0 0 0; } } #checkoutMain .basketCheckout2 { width: 100%; } #checkoutMain .basketCheckout2 .button { width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain .basketCheckout2 .button { float: right; width: auto; } } #checkoutMain .basketCheckout2 .backBtn { display: block; float: none; width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain .basketCheckout2 .backBtn { float: left; width: auto; } } #checkoutMain #orderMain { padding: 0; } #checkoutMain #checkout_form { margin: 0; } #checkoutMain #orderChoice_invaddr, #checkoutMain #orderChoice_voucher, #checkoutMain #orderChoice_carddata, #checkoutMain #orderChoice_cardNTP, #checkoutMain #orderChoice_savedTokens, #checkoutMain #orderChoice_cardChoicesOuter { border: 1px solid #ddd; margin: 0; padding: 30px 20px; width: 100%; } #checkoutMain #orderChoice_cc_total { clear: none; padding: 0; } @media all and (min-width: 43.8125em) { #checkoutMain #orderChoice_cc_total { width: auto; } } #checkoutMain #orderChoice_cc_total .infohi { color: #fa5f5f; font-size: 14px; font-size: 1.4rem; margin: 0 0 20px 0; text-transform: uppercase; } #checkoutMain #orderChoice_cardChoices { float: none; margin-bottom: 15px; width: auto; } #checkoutMain #orderChoice_cardChoices .co_subtitle { float: none; margin-bottom: 10px; } #checkoutMain #orderChoice_cardChoices p { text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #orderChoice_cardChoices p { text-align: left; } } #checkoutMain #orderChoice_cardChoices #orderChoice_cardBtns { float: none; margin: 20px 0; } @media all and (min-width: 43.8125em) { #checkoutMain #orderChoice_cardChoices #orderChoice_cardBtns { float: left; margin: 0 30px 20px 0; width: 420px; } } #checkoutMain #orderChoice_cardChoices #orderChoice_cardBtns .button--green { display: block; float: none; margin: 0 0 20px 0; } @media all and (min-width: 43.8125em) { #checkoutMain #orderChoice_cardChoices #orderChoice_cardBtns .button--green { float: left; margin: 0 20px 0 0; width: 90px; } } #checkoutMain #orderChoice_cardChoices #orderChoice_cardBtns .orderButton { float: none; width: auto; } #checkoutMain #orderChoice_ccimg { text-align: center; width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain #orderChoice_ccimg { text-align: left; } } @media all and (min-width: 43.8125em) { #checkoutMain #orderMainRight { float: right; width: 39%; } } #checkoutMain #payment_frame #spframeloading { margin: 20px 0; text-align: center; } #checkoutMain .paymentFrame { min-height: 550px; width: 100%; } #checkoutMain #payment_auth_message .co_subtitle { margin: 20px 0; text-align: center; } #checkoutMain #thanksInProgress .co_subtitle { padding: 30px 0; } #checkoutMain #thanks_main { margin-top: 30px; } #checkoutMain #thanks_main #orderThanksLeft { float: none; width: 100%; } @media all and (min-width: 43.8125em) { #checkoutMain #thanks_main #orderThanksLeft { float: left; width: 59%; } } #checkoutMain #thanks_main #orderThanksLeft #thanksInProgress { border: 1px solid #ddd; float: none; padding: 17px 20px; text-align: center; width: 100%; } #checkoutMain #thanks_main #orderThanksLeft #thanksInProgress .co_subtitle { text-align: center; } #checkoutMain #thanks_main #orderThanksLeft #thanksFinished { border: 1px solid #ddd; float: none; padding: 17px 20px; text-align: center; width: 100%; } #checkoutMain #thanks_main #orderThanksLeft #thanksFinished .co_subtitle { margin-bottom: 15px; padding: 0; text-align: center; } #checkoutMain #thanks_main #orderThanksLeft #thanksFinished .basketError { margin-bottom: 0; } #checkoutMain #thanks_main #orderThanksLeft #orderThanksText { border: 0 none; float: none; padding: 0; width: 100%; } #checkoutMain #thanks_main #orderThanksLeft #orderThanksText .info { margin-bottom: 25px; padding: 0; } #checkoutMain #thanks_main #orderThanksRight { margin-top: 30px; } @media all and (min-width: 43.8125em) { #checkoutMain #thanks_main #orderThanksRight { margin-top: 0; } } #checkoutMain #thanks_main #checkoutBasketSummary { border: 1px solid #ddd; float: none; width: 100%; } #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary { padding: 17px 20px; float: none; width: 100%; } #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .total .tot { font-size: 14px; font-size: 1.4rem; font-weight: bold; text-transform: uppercase; } #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .head { float: none; text-align: center; } @media all and (min-width: 43.8125em) { #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .head { text-align: left; } } #checkoutMain #thanks_main #checkoutBasketSummary .basketSummary .data { text-align: right; } @media all and (max-width: 43.8025em) { #checkoutMain #thanks_main #orderThanksRight { float: none; width: 100%; } } .alertClass { float: left; padding: 20px; } /** * Tax Exemption Code common to * SP page and Checkout Review page */ #taxexform { margin-bottom: 0; } #taxexform h3 { margin: 10px 0; } #taxexform .info { padding: 15px 0 13px 0; text-align: center; } @media all and (min-width: 43.8125em) { #taxexform .info { text-align: left; } } #taxexform .info1 { margin-top: 10px; } #taxexform #confirmit { padding: 0; } @media all and (min-width: 43.8125em) { #taxexform #confirmit { float: right; width: 58.8%; } } #taxexform #confirmit .form__item--multi { margin-top: 0; } #taxexform .form__item--multi { font-size: 14px; font-size: 1.4rem; margin-top: 30px; } #taxexform .message--error { float: none; } @media all and (min-width: 43.8125em) { #taxexform .message--error { width: 100%; } } #taxexform .form__checkbox { float: left; width: 15px; } #taxexform label.form__label--multi { margin-left: 10px; margin-top: 8px; width: 90%; } #taxexform > .co_taxexButton { float: right; margin-top: 30px; } /* ================================ Login & Register ================================ */ /** * Login */ #loginMain #loginLeft { border-bottom: 1px solid #ddd; margin: 0; padding: 0 0 12px 0; width: 100%; } @media all and (min-width: 43.8125em) { #loginMain #loginLeft { border-bottom: 0 none; border-right: 1px solid #ddd; margin: 0; padding: 0 2.5% 0 0; width: 65%; } } @media all and (min-width: 50.125em) { #loginMain #loginLeft { padding: 0 4% 0 0; } } #loginMain #loginForm h2 { color: #0e84aa; font-size: 20px; font-size: 2rem; margin: 0 0 1.5rem 0; text-align: center; text-transform: uppercase; } @media all and (min-width: 43.8125em) { #loginMain #loginForm h2 { font-size: 17px; font-size: 1.7rem; margin: 1.8rem 21px 1.5rem 0; text-align: left; } } @media all and (min-width: 50.125em) { #loginMain #loginForm h2 { margin: 1.8rem 10px 1.5rem 0; } } @media all and (min-width: 61.25em) { #loginMain #loginForm h2 { margin: 1.8rem 2px 1.5rem 0; } } #loginMain #loginForm .loginbtn { height: auto; margin: 29px 0 0 0; width: 100%; } @media all and (min-width: 43.8125em) { #loginMain #loginForm .loginbtn { margin: 29px 4.7% 0 0; width: 55.4%; } } #loginMain #loginForm .pwd { text-align: left; } @media all and (max-width: 43.8025em) { #loginMain #loginForm .empty { line-height: 0; margin: 0; padding: 0; } #loginMain #loginForm #lostpw { margin: 20px 0; } } #loginMain #logreg { border-left: none; margin: 0; min-width: 0; padding: 0; width: 100%; } @media all and (min-width: 43.8125em) { #loginMain #logreg { padding-top: 53px; width: 35%; } } @media all and (min-width: 50.125em) { #loginMain #logreg { padding-top: 72px; } } @media all and (min-width: 61.25em) { #loginMain #logreg { padding-top: 45px; } } #loginMain #logreg form { padding: 0; } @media all and (min-width: 43.8125em) { #loginMain #logreg form { padding: 0 12%; text-align: center; } } @media all and (min-width: 50.125em) { #loginMain #logreg form { padding: 0 11%; } } #loginMain #logreg h2 { color: #0e84aa; font-size: 20px; font-size: 2rem; line-height: normal; margin: 3.2rem 0 1.5rem 0; text-align: center; width: 100%; } @media all and (min-width: 43.8125em) { #loginMain #logreg h2 { margin: 0 0 1.5rem 0; } } @media all and (min-width: 61.25em) { #loginMain #logreg h2 { padding: 0 40px; } } #loginMain #logreg .newcust { float: none; height: auto; margin: 0; text-align: center; width: 100%; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #loginMain #logreg .newcust { margin: 0 auto; width: 98.7%; } } #loginMain #logreg .regbtn { float: none; height: auto; margin: 28px auto 0 auto; width: 100%; } @media all and (min-width: 43.8125em) { #loginMain #logreg .regbtn { margin: 57px auto 0 auto; width: 170px; } } /** * Login Password reminder */ #loginMain.forgot { text-align: center; } #loginMain.forgot h2 { text-align: center; } /** * Logged in / welcome page */ @media all and (max-width: 50.115em) { .loggedin #centerContainer { margin-left: 0; padding: 0; } } .loggedin #loginMain > h2 { color: #0e84aa; } .loggedin #leftContainer { display: block; } @media all and (max-width: 50.115em) { .loggedin #leftContainer { min-height: 0; width: 100%; } } @media all and (max-width: 43.8025em) { .loggedin #leftContainer .col1 { margin-bottom: 20px; } } @media all and (max-width: 50.115em) { .loggedin #leftContainer .col1 a { display: inline-block; padding: 5px 0; width: auto; text-decoration: none; } .loggedin #leftContainer .col1 a:not(.button) { color: #515050; } .loggedin #leftContainer .col1 a:hover, .loggedin #leftContainer .col1 a:focus, .loggedin #leftContainer .col1 a:active { color: #fa5f5f; } } @media all and (max-width: 50.115em) { .loggedin #leftContainer .toponly { display: none; } } /** * Register Page */ #regLeft { margin-right: 0; max-width: none; width: 100%; } #regLeft #showAddress { text-align: right; } #regLeft #postcodefind { float: left; } #regLeft .regFormCol1, #regLeft .regFormCol2 { border-bottom: 1px solid #ddd; border-left: 0 none; border-right: 0 none; border-top: 0 none; margin: 15px 0; padding: 10px 3% 35px 3%; width: 100%; } @media all and (min-width: 43.8125em) { #regLeft .regFormCol1, #regLeft .regFormCol2 { margin: 10px 0; padding: 10px 0 35px 0; } } #regLeft .infotitle { color: #0e84aa; font-size: 17px; font-size: 1.7rem; font-weight: normal; margin: 0; padding: 0 0 10px; text-transform: uppercase; } @media all and (min-width: 43.8125em) { #regLeft .infotitle { padding: 0 0 15px; } } #regLeft p { margin: 10px 0 0 0; } #regLeft dl.std { width: 100%; } #regLeft dl.std dt.label { margin: 17px 0 0 0; } #regLeft dl.addend { font-size: 14px; font-size: 1.4rem; } #regLeft dl.addend dd:last-of-type { margin-top: 15px; } #regLeft dl.addend dt.req { font-size: 14px; font-size: 1.4rem; margin: 0 0 15px 0; } @media all and (min-width: 43.8125em) { #regLeft dl.addend dt.req { margin: 8px 0 0px 0; } } @media all and (min-width: 43.8125em) { #regLeft dd { margin: 12px 0 0px 0; width: 62%; } } #regLeft dd.date .selectBorder { float: left; } #regLeft dd.nm { margin: 0; } @media all and (min-width: 43.8125em) { #regLeft dd.nm { margin-top: 18px; } } #regLeft .selectBorder { float: none; } /* ================================ Account Area ================================ */ /** * Mobile Menu */ @media all and (min-width: 43.8125em) { #leftContainerPerm { float: left; width: 225px; } } @media all and (min-width: 61.25em) { #leftContainerPerm { width: 275px; } } #leftContainerPerm #phoneMenuS { background: none; float: none; } #leftContainerPerm #phoneMenuS a { background-color: #92bfc3; background-image: none; color: #ffffff; display: block; float: none; line-height: 30px; font-size: 14px; font-size: 1.4rem; margin: 0; padding: 10px 0 10px 13px; position: relative; text-transform: uppercase; text-decoration: none; width: 100%; } #leftContainerPerm #phoneMenuS a:after { content: '\25bc'; display: inline-block; font-size: 10px; font-size: 1rem; opacity: 0.55; float: right; margin-right: 20px; } #leftContainerPerm #phoneMenuS a.expanded { background-color: #3d6e77; } #leftContainerPerm #phoneMenuS a.expanded:after { content: '\25B2'; font-size: 10px; font-size: 1rem; } #leftContainerPerm #leftMenu a { text-decoration: none; } #leftContainerPerm #leftMenu a:before { color: #0e84aa; content: '\220e'; font-size: 13px; font-size: 1.3rem; margin-right: 8px; } #leftContainerPerm #leftMenu a:hover, #leftContainerPerm #leftMenu a:focus, #leftContainerPerm #leftMenu a:active { color: #fa5f5f; } @media all and (max-width: 43.8025em) { #leftContainerPerm #leftMenu { background: #faf6ed; padding: 16px 10px; } #leftContainerPerm #leftMenu .subHead { display: none; } #leftContainerPerm #leftMenu a { font-size: 16px; font-size: 1.6rem; padding: 6px 0; } } /** * Main Sections */ .servicesPage .editBtn { color: #ffffff; background: #999; display: block; font-size: 13px; font-size: 1.3rem; padding: 2px; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s; transition: all 0.3s; width: 74px; } .servicesPage .editBtn:hover, .servicesPage .editBtn:focus, .servicesPage .editBtn:active { background: #b8b8b8; } #servicesRight { float: none; margin-top: 20px; } @media all and (min-width: 43.8125em) { #servicesRight { margin-top: 0; } } #servicesMain { float: none; } @media all and (max-width: 43.8025em) { #servicesMain dl dt:first-of-type { margin: 0; } #servicesMain dl.std dt.label:first-of-type { margin: 0; } } #servicesMain .servicesCore { float: none; margin-top: 11px; } @media all and (min-width: 43.8125em) { #servicesMain .servicesCore { margin-top: 20px; } } #servicesMain .servicesPage { /** * Personal Details */ /** * Address Change & Password */ /** * Order History */ } #servicesMain .servicesPage .serviceName, #servicesMain .servicesPage .serviceEmail, #servicesMain .servicesPage .serviceTel, #servicesMain .servicesPage .servicePrefs { background-color: #f2f2f2; border: none; float: none; margin: 0 0 20px 0; padding: 12px; width: 100%; } @media all and (min-width: 43.8125em) { #servicesMain .servicesPage .serviceName, #servicesMain .servicesPage .serviceEmail, #servicesMain .servicesPage .serviceTel, #servicesMain .servicesPage .servicePrefs { margin: 0 0 14px 0; } } #servicesMain .servicesPage .serviceName form, #servicesMain .servicesPage .serviceEmail form, #servicesMain .servicesPage .serviceTel form, #servicesMain .servicesPage .servicePrefs form { margin: 0; } #servicesMain .servicesPage .serviceName .servicesNameDOB, #servicesMain .servicesPage .serviceName .servicesEmail, #servicesMain .servicesPage .serviceName .servicesTel, #servicesMain .servicesPage .serviceName .servicesPrefs, #servicesMain .servicesPage .serviceEmail .servicesNameDOB, #servicesMain .servicesPage .serviceEmail .servicesEmail, #servicesMain .servicesPage .serviceEmail .servicesTel, #servicesMain .servicesPage .serviceEmail .servicesPrefs, #servicesMain .servicesPage .serviceTel .servicesNameDOB, #servicesMain .servicesPage .serviceTel .servicesEmail, #servicesMain .servicesPage .serviceTel .servicesTel, #servicesMain .servicesPage .serviceTel .servicesPrefs, #servicesMain .servicesPage .servicePrefs .servicesNameDOB, #servicesMain .servicesPage .servicePrefs .servicesEmail, #servicesMain .servicesPage .servicePrefs .servicesTel, #servicesMain .servicesPage .servicePrefs .servicesPrefs { padding: 10px 15px; width: 100%; } #servicesMain .servicesPage .serviceName .servicesEmail dt, #servicesMain .servicesPage .serviceEmail .servicesEmail dt, #servicesMain .servicesPage .serviceTel .servicesEmail dt, #servicesMain .servicesPage .servicePrefs .servicesEmail dt { width: 100%; } #servicesMain .servicesPage .serviceName .servicesEmail dd, #servicesMain .servicesPage .serviceEmail .servicesEmail dd, #servicesMain .servicesPage .serviceTel .servicesEmail dd, #servicesMain .servicesPage .servicePrefs .servicesEmail dd { width: 100%; } @media all and (min-width: 43.8125em) { #servicesMain .servicesPage .serviceName .servicesEmail dd, #servicesMain .servicesPage .serviceEmail .servicesEmail dd, #servicesMain .servicesPage .serviceTel .servicesEmail dd, #servicesMain .servicesPage .servicePrefs .servicesEmail dd { margin: 12px 0 0 0; } } #servicesMain .servicesPage .containerLeft, #servicesMain .servicesPage .containerRight { float: none; width: 100%; } #servicesMain .servicesPage .servicesBtnRight { margin: 15px 0 !important; } #servicesMain .servicesPage .addrbook { float: none; } #servicesMain .servicesPage .addrbook .addressHldr { border: 1px solid #ddd; margin: 0 0 20px; width: 100%; } @media all and (min-width: 50.125em) { #servicesMain .servicesPage .addrbook .addressHldr { margin: 0 2% 14px 0; width: 49%; } #servicesMain .servicesPage .addrbook .addressHldr:nth-child(2n) { margin-right: 0; } } #servicesMain .servicesPage .addrbook .addressHldr form { margin: 0; } #servicesMain .servicesPage .addrbook .addressHldr .type { color: #515050; } #servicesMain .servicesPage .addrbook .addressHldr .type h2 { background-color: #f2f2f2; color: #0e84aa; font-size: 16px; font-size: 1.6rem; margin: 0; padding: 6px 13px; width: 100%; } #servicesMain .servicesPage .addrbook .addressHldr .addr { font-size: 15px; font-size: 1.5rem; padding: 5px 13px 0 13px; } #servicesMain .servicesPage .addrbook .addressHldr .addr p { margin: 0; } #servicesMain .servicesPage .addrbook .addressHldr .editHolder { background: #f7f7f7; padding: 4px 13px; } #servicesMain .servicesPage .addrbook .addressHldr .editHolder .editBtn { margin-left: 14px; } #servicesMain .servicesPage .addrbook .addressHldr .defHolder { bottom: 0px; height: 54px; padding: 6px 13px; } #servicesMain .servicesPage .addrbook .addressHldr .defHolder label { font-size: 14px; font-size: 1.4rem; } #servicesMain .servicesPage dl.std dd.btn, #servicesMain .servicesPage dl.std dt.btn, #servicesMain .servicesPage dd.servicesbtn, #servicesMain .servicesPage dt.servicesbtn { float: none; padding: 0; width: 100%; } #servicesMain .servicesPage dl.std dd.btn .BMBtn, #servicesMain .servicesPage dl.std dt.btn .BMBtn, #servicesMain .servicesPage dd.servicesbtn .BMBtn, #servicesMain .servicesPage dt.servicesbtn .BMBtn { display: block; float: none; width: 100%; } @media all and (min-width: 43.8125em) { #servicesMain .servicesPage dd.servicesbtn, #servicesMain .servicesPage dl.std dd.btn { float: right; margin-top: 20px; width: auto; } #servicesMain .servicesPage dd.servicesbtn .BMBtn, #servicesMain .servicesPage dl.std dd.btn .BMBtn { float: right; width: auto; } } @media all and (min-width: 43.8125em) { #servicesMain .servicesPage dt.servicesbtn, #servicesMain .servicesPage dl.std dt.btn { float: left; width: auto; } #servicesMain .servicesPage dt.servicesbtn .BMBtn, #servicesMain .servicesPage dl.std dt.btn .BMBtn { float: left; width: auto; } } #servicesMain .servicesPage .button.editAddr { float: left; width: 100%; } @media all and (min-width: 43.8125em) { #servicesMain .servicesPage .button.editAddr { float: right; width: auto; } } #servicesMain .servicesPage .button { margin: 23px 0 17px !important; } @media all and (min-width: 43.8125em) { #servicesMain .servicesPage .button { margin: 18px 0 5px 0 !important; } } #servicesMain .servicesPage .servicesAddr form dl:last-of-type dd:last-of-type { margin-bottom: 10px; } #servicesMain .servicesPage .postcode { float: left; } #servicesMain .servicesPage #showAddressNEW dl.std dd { text-align: right; } #servicesMain .servicesPage #trackMain th { color: #0e84aa; font-size: 14px; font-size: 1.4rem; font-weight: normal; } #servicesMain .servicesPage #trackMain td { border-bottom: 1px solid #ddd; font-size: 14px; font-size: 1.4rem; } .alertXMessage .pwdConfirm div { padding: 3px 0; } /* ================================ Reusable Snippets & SVG ================================ */ /** * Responsive Video Wrapper */ .videowrapper { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative; text-align: center; } .videowrapper iframe, .videowrapper object, .videowrapper embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .videowrapper img { margin-top: -30px; } .videowrapper img:hover, .videowrapper img:focus, .videowrapper img:active { cursor: pointer; } /** * SVG Free Returns Circle */ .slide__circle { background-clip: padding-box; border: 3px solid #fa5f5f; border-radius: 75px; display: none; height: 155px; left: 53%; position: absolute; text-align: center; top: 6px; width: 155px; z-index: 100; } .slide__circle:before { background: #fa5f5f; border-radius: 75px; bottom: 2px; content: ''; left: 2px; position: absolute; right: 2px; top: 2px; z-index: -1; } .slide__circle img, .slide__circle svg { height: 121px; margin-top: 10px; width: 111px; } /** * SVG Perfect Fit Box */ .decal { background-clip: padding-box; height: auto; position: relative; text-align: center; width: auto; z-index: 100; } .decal:before { bottom: 2px; content: ''; left: 2px; position: absolute; right: 2px; top: 2px; z-index: -1; } .decal__icon--svg svg, .decal__icon--svg img { margin: 0 auto; max-width: 100%; } .decal--perfect { border: 3px solid #3d6e77; margin-bottom: 28px; padding: 18px 17px 9px 17px; width: 395px; } .decal--perfect .decal__icon--svg svg, .decal--perfect .decal__icon--svg img { height: 77px; width: 395px; } .decal--perfect:before { background: #3d6e77; } /** * Fitting Circles V, 2V, etc */ .circle { border-radius: 50%; color: #ffffff; display: inline-block; font-size: 25px; font-size: 2.5rem; height: 56px; padding: 28px 0; position: relative; line-height: 0; margin: 0 5px; text-align: center; vertical-align: bottom; width: 56px; } .circle--v { background-color: #af5a22; } .circle--2v { background-color: #e4b73f; } .circle--6v { background-color: #769cd1; } /** * Jump / smooth scroll to links */ .goto { background: #ffffff; left: 0; margin: 10px auto 0 auto; min-height: 3em; padding: 10px 20px; position: static; right: 0; text-align: center; width: 300px; z-index: 9999; } @media all and (min-width: 43.8125em) { .goto { width: 670px; } } @media all and (min-width: 50.125em) { .goto { width: 770px; } } @media all and (min-width: 61.25em) { .goto { width: 950px; } } .goto.top { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-name: bounceIn; animation-name: bounceIn; box-shadow: 0 4px 2px -3px #e5e5e6; margin: 0 auto; position: fixed; top: 0; } @-webkit-keyframes bounceIn { 0% { -webkit-transform: translate(0, -20px); transform: translate(0, -20px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes bounceIn { 0% { -webkit-transform: translate(0, -20px); transform: translate(0, -20px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* ================================ Static pages - non top level ================================ */ /** * General */ #pageTitle #servicesMain .servicesPage .infohead, #servicesMain .servicesPage #pageTitle .infohead, #pageTitle h1, #pageTitle .storeFinderDetail h2, .storeFinderDetail #pageTitle h2 { border-bottom: 0 none; color: #515050; } .no-borderimage #pageTitle #servicesMain .servicesPage .infohead, #servicesMain .servicesPage .no-borderimage #pageTitle .infohead, .no-borderimage #pageTitle h1, .no-borderimage #pageTitle .storeFinderDetail h2, .storeFinderDetail .no-borderimage #pageTitle h2 { border-bottom: 0 none; } #infoContainer { margin-top: 20px; } #infoContainer h2 { font-size: 22px; font-size: 2.2rem; line-height: 1.4; margin: 0 0 14px; margin: 0 0 1.4rem; text-align: center; } @media all and (min-width: 43.8125em) { #infoContainer h2 { text-align: left; } } #infoContainer a:not(.button) { color: #fa5f5f; } #infoContainer.static hr { border-top: 1px solid #ddd; color: inherit; float: none; margin: 25px 0; margin: 2.5rem 0; } #infoContainer.static p.head { margin-bottom: 0; } #infoContainer.static ul, #infoContainer.static ol { margin: 0 0 18px 25px; padding: 0; } #infoContainer.static ul { list-style-type: disc; } #infoContainer.static ul li li { list-style-type: circle; } #infoContainer.static ol ol { list-style: lower-roman; } #infoContainer.static ol ol ol { list-style-type: lower-latin; } /** * Contact Us */ #contactTop .hrline { border-bottom: 1px solid #bbb; float: none; margin: 26px 0; } #contactTop h2 { background-color: #ffffff; color: #0e84aa; display: inline; font-size: 20px; font-size: 2rem; left: 0; padding: 0 10px 0 0; position: relative; top: -10px; } #contactTop .infosmall { font-size: 15px; font-size: 1.5rem; line-height: normal; padding: 0; text-align: justify; } @media all and (min-width: 43.8125em) { #contactTop .infosmall { font-size: 14px; font-size: 1.4rem; } } #contactTop .infosmall a { word-break: break-word; } @media all and (max-width: 43.8025em) { #contactTop form { margin-bottom: 50px; } } #contactTop #contactSendBack { float: left; } #contactTop #contactSendBack .infohi { text-align: right; } @media all and (min-width: 43.8125em) { #contactTop .button { float: right; } } #contactLeft { float: left; margin: 0; width: 100%; } @media all and (min-width: 61.25em) { #contactLeft { padding-right: 3%; margin: 0 3% 0 0; width: 65%; } } #contactLeft .hrline:first-of-type { margin: 10px 0 5px; } @media all and (min-width: 43.8125em) { #contactLeft .hrline:first-of-type { margin: 10px 0 20px; } } @media all and (min-width: 50.125em) { #contactLeft .hrline:first-of-type { margin: 26px 0 20px; } } #contactPic { float: none; width: 100%; } @media all and (min-width: 61.25em) { #contactPic { float: left; width: 32%; } } /** * Request a Catalogue */ .catRequest h2 { color: #0e84aa; } .catRequest hr { margin: 25px 0; } .catRequest #postcodefind { float: left; } .catRequest #showAddress { float: left; width: 100%; } .catRequest #showAddress dd { text-align: right; } .catRequest .addend { margin-top: 5px; } @media all and (min-width: 43.8125em) { .catRequest .addend { margin-top: 15px; } } .catRequest .addend .req { margin-bottom: 15px; } @media all and (min-width: 43.8125em) { .catRequest .addend .req { margin-bottom: 0; } } .catRequest .form__checkbox { margin-top: 2px; vertical-align: top; } .catRequest label.form__label--multi { line-height: 18px; margin-left: 10px; vertical-align: top; width: 80%; } .catRequest form .button { margin: 12px 0; } @media all and (min-width: 43.8125em) { .catRequest form .button { float: right; } } .slide__circle.static { display: block; left: 0; margin: 0 auto; position: relative; top: 0; } /* ================================ Static Pages - Top Level Menu ================================ */ /** * General */ #centerContainer.top { /** * Framed Photographs */ /** * Fiting Advice Page */ /** * FAQs page */ /** * Our History Page */ /** * Foot Health Page */ /** * Arthritis Page */ /** * Bunions Page */ /** * Corns Page */ /** * Diabetes Page */ /** * Fall Prevention Page */ /** * Oedema page */ /** * Poor circulation Page */ /** * Swollen feet Page */ /** * About Us Page */ /** * What Our Customers Say Page */ /** * Made In England page */ /** * Find a Retailer Page */ } #centerContainer.top h1, #centerContainer.top #servicesMain .servicesPage .infohead, #servicesMain .servicesPage #centerContainer.top .infohead, #centerContainer.top .storeFinderDetail h2, .storeFinderDetail #centerContainer.top h2 { margin-bottom: 0; padding: 15px 0 9px; } #centerContainer.top .static { font-size: 17px; font-size: 1.7rem; margin-top: 0; } #centerContainer.top div.left { float: none; } @media all and (min-width: 43.8125em) { #centerContainer.top div.left { float: left; margin-right: 1%; width: 49%; } } #centerContainer.top div.right { float: none; margin: 40px 0 0 0; } @media all and (min-width: 43.8125em) { #centerContainer.top div.right { float: right; margin: 0 0 0 1%; width: 49%; } } #centerContainer.top div.tertiary { background: #faf6ed; padding: 30px; } #centerContainer.top div.tertiary.center { text-align: center; } #centerContainer.top div.primary__light { background: #eaf7f9; padding: 30px; } #centerContainer.top div.primary__light.center { text-align: center; } #centerContainer.top > .row { margin: 20px 0; } #centerContainer.top h2 { font-size: 24px; font-size: 2.4rem; margin: 0 0 10px; text-align: center; } #centerContainer.top h2 + hr { margin: 0 0 20px 0; } #centerContainer.top h2.primd { color: #4b8792; } #centerContainer.top h2.quat { color: #0e84aa; } #centerContainer.top h2.border { border-bottom: 1px solid #c4c4c4; margin-bottom: 20px; padding-bottom: 10px; } #centerContainer.top h3.primd, #centerContainer.top p.primd { color: #4b8792; } #centerContainer.top h3.secondary, #centerContainer.top p.secondary { color: #fa5f5f; } #centerContainer.top h3.quat, #centerContainer.top p.quat { color: #0e84aa; } #centerContainer.top h3.border, #centerContainer.top p.border { border-bottom: 1px solid #c4c4c4; margin-bottom: 20px; padding-bottom: 10px; } #centerContainer.top h4 { font-size: 17px; font-size: 1.7rem; } #centerContainer.top .decal--perfect { margin: 15px auto; max-width: 100%; } #centerContainer.top .decal--perfect svg, #centerContainer.top .decal--perfect img { height: 57px; width: 292px; } #centerContainer.top hr { border-top: 1px solid #afafaf; } #centerContainer.top ul, #centerContainer.top ol { line-height: 21px; list-style-position: outside; } #centerContainer.top ul li, #centerContainer.top ol li { text-align: left; } #centerContainer.top ul ul, #centerContainer.top ul ol, #centerContainer.top ol ul, #centerContainer.top ol ol { margin: 0; padding: 0; } #centerContainer.top figure { margin: 0; } #centerContainer.top p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } #centerContainer.top #manVid { display: none; max-height: 315px; max-width: 560px; } #centerContainer.top .photo { display: block; margin: 20px auto; max-width: 65%; text-align: center; } #centerContainer.top .photo span { display: inline-block; margin-bottom: 12px; position: relative; } #centerContainer.top .photo span:before { border: 8px solid #ffffff; bottom: 0; content: ''; display: block; left: 0; position: absolute; right: 0; top: 0; } #centerContainer.top .photo span img { box-shadow: 1px 1px 3px #bbb; display: block; width: 100%; } @media all and (min-width: 43.8125em) { #centerContainer.top .photo { max-width: none; vertical-align: middle; } } @media all and (min-width: 43.8125em) and (max-width: 61.24em) { #centerContainer.top .photo { margin: 20px 1% 0 1%; } } @media all and (min-width: 61.25em) { #centerContainer.top .photo { margin: 11px 0 0 0; position: relative; z-index: 3; } } #centerContainer.top .fitting-advice > div { margin: 40px 0; } #centerContainer.top .fitting-advice > div:last-of-type { margin-bottom: 0; } #centerContainer.top .fitting-advice h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .fitting-advice h3 { border-bottom: 1px solid #b8b8b8; } #centerContainer.top .fitting-advice h3.nb { border: 0; } #centerContainer.top .fitting-advice div.tertiary, #centerContainer.top .fitting-advice div.primary__light { padding: 30px; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice > .clearing, #centerContainer.top #buyingArea ul.buybox li .fitting-advice > ul, #buyingArea ul.buybox li #centerContainer.top .fitting-advice > ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } #centerContainer.top .fitting-advice .videowrapper { margin-top: 35px; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .videowrapper { margin-top: 66px; } } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .button + .button { margin: 10px; } } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .button + .button { margin: 10px 0 10px 10px; } } #centerContainer.top .fitting-advice .right .button { margin: 0 auto 20px auto; } #centerContainer.top .fitting-advice .col-10 h2 { margin: 0 auto 13px auto; max-width: 550px; padding: 60px 0 8px 0; } #centerContainer.top .fitting-advice .col-10 p { font-size: 18px; font-size: 1.8rem; text-align: center; } #centerContainer.top .fitting-advice div.fitting { position: relative; text-align: center; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice div.fitting { padding-left: 0; text-align: left; } #centerContainer.top .fitting-advice div.fitting .row { padding-left: 10px; } #centerContainer.top .fitting-advice div.fitting .row > div:first-of-type { padding-top: 20px; } #centerContainer.top .fitting-advice div.fitting h3 { margin-bottom: 17px; padding-bottom: 15px; text-align: left; } } #centerContainer.top .fitting-advice .shoe a { display: block; margin: 40px auto 0 auto; max-width: 70%; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .shoe a { margin: 0; max-width: 100%; text-align: center; } } @media all and (min-width: 50.125em) { #centerContainer.top .fitting-advice .shoe a { position: absolute; right: -10px; top: -60px; } } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .shoe a { left: -60px; max-width: 130%; position: absolute; right: auto; top: -60px; } #centerContainer.top .fitting-advice .shoe a img { max-width: 105%; } } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .shoe p { line-height: 18px; max-width: 80%; } } #centerContainer.top .fitting-advice .blockquote { text-align: center; } #centerContainer.top .fitting-advice .blockquote .col-8 > a:not(.button) { font-size: 24px; font-size: 2.4rem; line-height: 21px; text-decoration: underline; } #centerContainer.top .fitting-advice .blockquote .col-8 > a:not(.button):hover, #centerContainer.top .fitting-advice .blockquote .col-8 > a:not(.button):focus, #centerContainer.top .fitting-advice .blockquote .col-8 > a:not(.button):active { color: #4b8792; } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .blockquote .col-8 { padding: 0 90px; } } #centerContainer.top .fitting-advice .blockquote blockquote { border-left: 0 none; margin: 0; padding: 0; } #centerContainer.top .fitting-advice .blockquote blockquote:before { content: ""; } #centerContainer.top .fitting-advice .blockquote blockquote span { color: #4b8792; font-size: 24px; font-size: 2.4rem; line-height: 21px; } #centerContainer.top .fitting-advice .blockquote blockquote cite { color: #515050; display: block; font-size: 14px; font-size: 1.4rem; font-style: normal; margin-top: 20px; text-transform: uppercase; } #centerContainer.top .fitting-advice .blockquote blockquote p { color: #515050; font-size: 17px; font-size: 1.7rem; } #centerContainer.top .fitting-advice .blockquote .button { margin-top: 20px; white-space: pre-line; } #centerContainer.top .fitting-advice .variable h2 span:first-of-type { display: inline-block; width: 100%; } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .variable h2 span:first-of-type { width: auto; } } #centerContainer.top .fitting-advice .variable h3 { border: 0; font-size: 19px; font-size: 1.9rem; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .variable h3 { text-align: left; } } #centerContainer.top .fitting-advice .variable ul { margin-left: 18px; } #centerContainer.top .fitting-advice .variable .col-4 { text-align: center; } #centerContainer.top .fitting-advice .variable .col-4 figure { margin: 0 auto; max-width: 75%; } #centerContainer.top .fitting-advice .variable .button { margin: 30px auto 0; max-width: 520px; white-space: pre-line; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .variable .button { display: block; } } #centerContainer.top .fitting-advice .fastening .row { position: relative; z-index: 1; } #centerContainer.top .fitting-advice .fastening h3 { color: #fa5f5f; margin-bottom: 10px; padding-bottom: 10px; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .fastening h3 { text-align: left; } } #centerContainer.top .fitting-advice .fastening p { line-height: 21px; } #centerContainer.top .fitting-advice .fastening p:last-of-type { margin: 0; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .fastening .row .col-7 { text-align: center; } #centerContainer.top .fitting-advice .fastening .photo { display: inline-block; } } @media all and (min-width: 43.8125em) and (max-width: 61.24em) { #centerContainer.top .fitting-advice .fastening .row .push-7, #centerContainer.top .fitting-advice .fastening .row .pull-5, #centerContainer.top .fitting-advice .fastening .row .push-8, #centerContainer.top .fitting-advice .fastening .row .pull-4 { left: auto; right: auto; } #centerContainer.top .fitting-advice .fastening .row > div { float: none; width: 100%; } #centerContainer.top .fitting-advice .fastening .row > div > a { width: 30%; } } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .fastening .row { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #centerContainer.top .fitting-advice .fastening .push-7, #centerContainer.top .fitting-advice .fastening .pull-5 { left: auto; right: auto; } #centerContainer.top .fitting-advice .fastening .push-7 { left: 57.33333%; } #centerContainer.top .fitting-advice .fastening .pull-5 { right: 42.66667%; } #centerContainer.top .fitting-advice .fastening div > a { width: 35%; } #centerContainer.top .fitting-advice .fastening div > a:nth-child(2n) { margin-left: -35px; z-index: 2; } #centerContainer.top .fitting-advice .fastening div > a:last-of-type { margin: -10px 0 0 -26px; } } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .fastening figcaption { background: rgba(234, 247, 249, 0.6); padding: 0 3px; } #centerContainer.top .fitting-advice .fastening.pullback .row div > a { margin: 20px 0 0 0; z-index: 2; } #centerContainer.top .fitting-advice .fastening.pullback .row div > a:nth-child(2n) { margin: -40px 0 0 -25px; } #centerContainer.top .fitting-advice .fastening.pullback .row div > a:last-of-type { margin: 10px 0 0 -26px; } #centerContainer.top .fitting-advice .fastening.laidon .row div > a { margin: 50px 0 0 0; width: 42%; z-index: 3; } #centerContainer.top .fitting-advice .fastening.laidon .row div > a:nth-child(2n) { margin: -21px 0 0 -30px; text-align: left; width: 42%; z-index: 2; } #centerContainer.top .fitting-advice .fastening.laidon .row div > a:nth-child(2n) figcaption { margin-left: 34px; } #centerContainer.top .fitting-advice .fastening.laidon .row div > a:last-of-type { margin: -17px 0 0 -103px; width: 32%; z-index: 3; } #centerContainer.top .fitting-advice .fastening.laidon .col-4 { width: 36.33333%; } #centerContainer.top .fitting-advice .fastening.laidon .col-8 { text-align: left; width: 63.66667%; } #centerContainer.top .fitting-advice .fastening.elastic .row div > a { margin: -10px 0 0 -9px; width: 40%; z-index: 2; } #centerContainer.top .fitting-advice .fastening.elastic .row div > a:nth-child(2n) { margin: -10px 0 0 -32px; width: 35%; } #centerContainer.top .fitting-advice .fastening.elastic .row div > a:last-of-type { margin: 24px 0 0 -23px; width: 33%; z-index: 1; } #centerContainer.top .fitting-advice .fastening.elastic .col-4 { width: 39.33333%; } #centerContainer.top .fitting-advice .fastening.elastic .col-8 { width: 60.66667%; } #centerContainer.top .fitting-advice .fastening.elastic .push-8, #centerContainer.top .fitting-advice .fastening.elastic .pull-4 { left: auto; right: auto; } #centerContainer.top .fitting-advice .fastening.elastic .push-8 { left: 59.66667%; padding-left: 23px; } #centerContainer.top .fitting-advice .fastening.elastic .pull-4 { right: 39.33333%; } #centerContainer.top .fitting-advice .fastening.court .row div > a { margin: 0; width: 37%; z-index: 2; } #centerContainer.top .fitting-advice .fastening.court .row div > a:nth-child(2n) { margin: 0 0 0 -20px; width: 34%; } #centerContainer.top .fitting-advice .fastening.court .row div > a:last-of-type { margin: 73px 0 0 -21px; width: 34%; z-index: 1; } } #centerContainer.top .fitting-advice .fastening.stay .row { display: block; } #centerContainer.top .fitting-advice .fastening.stay .row figcaption { background-color: transparent; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 { text-align: left; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 a { display: block; margin: 20px auto; max-width: 65%; text-align: center; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 p { margin-bottom: 15px; } #centerContainer.top .fitting-advice .fastening.stay .row > div.col-5 > a { margin: 20px auto; max-width: 75%; width: 75%; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .fastening.stay .row .col-7 a { float: left; margin: 20px 4% 0 1%; max-width: none; width: 36%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 .clearing p:first-of-type, #centerContainer.top .fitting-advice .fastening.stay .row .col-7 #buyingArea ul.buybox li ul p:first-of-type, #buyingArea ul.buybox li #centerContainer.top .fitting-advice .fastening.stay .row .col-7 ul p:first-of-type { margin-top: 60px; } #centerContainer.top .fitting-advice .fastening.stay .row > div.col-5 > a { display: block; max-width: 55%; width: 100%; } } @media all and (min-width: 50.125em) { #centerContainer.top .fitting-advice .fastening.stay .row .col-7 { float: left; width: 58.33333%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 h3 { max-width: 90%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 p { margin-bottom: 25px; max-width: 95%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 a { width: 36%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 .clearing p:first-of-type, #centerContainer.top .fitting-advice .fastening.stay .row .col-7 #buyingArea ul.buybox li ul p:first-of-type, #buyingArea ul.buybox li #centerContainer.top .fitting-advice .fastening.stay .row .col-7 ul p:first-of-type { margin-top: 27px; } #centerContainer.top .fitting-advice .fastening.stay .row > div.col-5 { float: left; width: 41.66667%; } #centerContainer.top .fitting-advice .fastening.stay .row > div.col-5 > a { display: block; margin: 0; max-width: none; width: 100%; } } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .fastening.stay .row .col-7 h3 { max-width: 90%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 p { max-width: 98%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-7 a { width: 41%; } #centerContainer.top .fitting-advice .fastening.stay .row > div.col-5 > a { margin: 0; max-width: 100%; width: 100%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-10 { text-align: center; } #centerContainer.top .fitting-advice .fastening.stay .row .col-10 a { margin: 31px 0 0 0; width: 30%; } #centerContainer.top .fitting-advice .fastening.stay .row .col-10 a:nth-child(2n) { margin: -45px 0 0 -28px; z-index: 4; } #centerContainer.top .fitting-advice .fastening.stay .row .col-10 a:last-of-type { margin: 70px 0 0 -25px; } } @media all and (min-width: 61.25em) { #centerContainer.top .fitting-advice .fastening.stay { padding: 50px 30px 30px 70px; } } #centerContainer.top .fitting-advice .sandals { font-size: 17px; font-size: 1.7rem; text-align: center; } #centerContainer.top .fitting-advice .sandals h2 { color: #fa5f5f; max-width: none; padding: 0; } #centerContainer.top .fitting-advice .sandals h3 { color: #4b8792; font-size: 17px; font-size: 1.7rem; margin: 12px 0 4px 0; padding: 0 0 5px; } #centerContainer.top .fitting-advice .sandals .col-4 a { display: block; margin: 0 auto 50px auto; max-width: 70%; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .sandals .col-4 { min-height: 400px; position: relative; } #centerContainer.top .fitting-advice .sandals .col-4 a { bottom: 0; margin: 0; left: 0; max-width: 100%; position: absolute; right: 0; } } #centerContainer.top .fitting-advice .house { text-align: center; } #centerContainer.top .fitting-advice .house h2 { color: #fa5f5f; max-width: none; padding-top: 0; } #centerContainer.top .fitting-advice .house p { font-size: 17px; font-size: 1.7rem; } #centerContainer.top .fitting-advice .house .col-10 a { display: block; margin: 0 0 20px 0; } #centerContainer.top .fitting-advice .house .col-4 a { display: block; margin: 0 auto 50px auto; max-width: 70%; } #centerContainer.top .fitting-advice .house .col-4 a span { box-shadow: 1px 1px 3px #bbb; display: inline-block; margin-bottom: 12px; position: relative; } #centerContainer.top .fitting-advice .house .col-4 a span:before { border: 8px solid #ffffff; bottom: 0; content: ''; display: block; left: 0; position: absolute; right: 0; top: 0; } @media all and (min-width: 43.8125em) { #centerContainer.top .fitting-advice .house .col-4 a { margin: 0; max-width: none; } } #centerContainer.top .accordion .tertiary { margin-bottom: 30px; padding: 30px 15px 15px; } #centerContainer.top .accordion .tertiary:first-of-type { margin-top: 30px; } @media all and (min-width: 43.8125em) { #centerContainer.top .accordion .tertiary { padding: 30px 30px 15px; } } #centerContainer.top .accordion h2 { border-bottom: 1px solid #b8b8b8; color: #4b8792; font-weight: bold; padding-bottom: 6px; padding-right: 50px; position: relative; text-align: left; text-transform: capitalize; } @media all and (min-width: 43.8125em) { #centerContainer.top .accordion h2 { padding-right: 150px; } } #centerContainer.top .accordion h2.active, #centerContainer.top .accordion h2:hover, #centerContainer.top .accordion h2:focus, #centerContainer.top .accordion h2:active { color: #109ac6; cursor: pointer; } #centerContainer.top .accordion h2:after { content: '\25bc'; font-weight: normal; font-size: 15px; font-size: 1.5rem; position: absolute; right: 10px; text-transform: lowercase; top: 20%; } @media all and (min-width: 43.8125em) { #centerContainer.top .accordion h2:after { content: '\25bc click to expand'; } } #centerContainer.top .accordion h2.active:after { content: '\25B2'; } @media all and (min-width: 43.8125em) { #centerContainer.top .accordion h2.active:after { content: '\25B2 click to collapse'; } } #centerContainer.top .history > div { margin: 40px 0; } #centerContainer.top .history > div:last-of-type { margin-bottom: 0; } #centerContainer.top .history h2 { border-bottom: 1px solid #b8b8b8; margin: 50px 0 15px 0; padding-bottom: 8px; } #centerContainer.top .history > .row > .col-8 { color: #55949a; font-size: 24px; font-size: 2.4rem; font-style: italic; line-height: 24px; text-align: center; } #centerContainer.top .history .tertiary { text-align: center; } #centerContainer.top .history .tertiary h2 { margin: 0 0 25px; } #centerContainer.top .history .tertiary h3 span { text-transform: lowercase; } #centerContainer.top .history .tertiary figure { display: inline-block; vertical-align: top; width: 45%; } #centerContainer.top .history .tertiary .col-4 h3 { margin: 5px 0 14px; } #centerContainer.top .history .tertiary:first-of-type p { text-align: left; } #centerContainer.top .history .tertiary:first-of-type .col-4 { margin: 10px 0 35px 0; } @media all and (min-width: 43.8125em) { #centerContainer.top .history .tertiary:first-of-type .col-4 { margin: 0; } } @media all and (min-width: 43.8125em) { #centerContainer.top .history .tertiary:first-of-type .col-6 p { margin: 25px 0 0 0; padding: 0 0 0 20px; } #centerContainer.top .history .tertiary:first-of-type .col-6:first-of-type p { padding: 0 20px 0 0; } } @media all and (min-width: 43.8125em) { #centerContainer.top .history .tertiary:first-of-type .col-6 p { margin: 40px 0 0 0; padding: 0 0 0 30px; } #centerContainer.top .history .tertiary:first-of-type .col-6:first-of-type p { padding: 0 30px 0 0; } } #centerContainer.top .history .tertiary.second h2 { margin: 12px 0 8px; } #centerContainer.top .history .tertiary.second h2 a { margin: 10px 0; } @media all and (min-width: 43.8125em) { #centerContainer.top .history .tertiary.second h2 a { margin: 0 0 0 10px; } } #centerContainer.top .history .tertiary.second .image { width: 80px; } @media all and (max-width: 61.24em) { #centerContainer.top .history .tertiary.second .row .col-6 { float: left; margin: 15px 0; width: 100%; } } #centerContainer.top .history .tertiary.second .row:last-of-type .col-6:last-of-type svg, #centerContainer.top .history .tertiary.second .row:last-of-type .col-6:last-of-type img { height: 80px; width: 80px; } @media all and (min-width: 61.25em) { #centerContainer.top .history .tertiary.second .row { margin-bottom: 53px; } #centerContainer.top .history .tertiary.second .row:first-of-type { margin-bottom: 0; } #centerContainer.top .history .tertiary.second .row:nth-child(3) .col-6:first-of-type { margin-top: 50px; } #centerContainer.top .history .tertiary.second .row:last-of-type .col-6:first-of-type { margin-top: 21px; } } #centerContainer.top .history .cd-container h3, #centerContainer.top .history .cd-container h4 { font-size: 24px; font-size: 2.4rem; margin-bottom: 0; } #centerContainer.top .history .cd-container h4 { margin-bottom: 10px; } #centerContainer.top .foothealth > div { margin: 40px 0; } #centerContainer.top .foothealth > div:last-of-type { margin-bottom: 0; } #centerContainer.top .foothealth h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .foothealth .decal { margin: 10px 0 20px 0; width: 100%; } #centerContainer.top .foothealth .decal img { height: 57px; margin: 0 auto; width: 292px; } @media all and (min-width: 43.8125em) { #centerContainer.top .foothealth .decal { margin: 30px 0 0 0; width: 83%; } } @media all and (min-width: 50.125em) { #centerContainer.top .foothealth .decal { width: 88%; } } @media all and (min-width: 61.25em) { #centerContainer.top .foothealth .decal { width: 100%; } } #centerContainer.top .foothealth .tertiary:first-of-type .row:first-of-type { margin-bottom: 28px; } @media all and (min-width: 43.8125em) { #centerContainer.top .foothealth .tertiary:first-of-type .row:first-of-type { margin-bottom: 70px; } } #centerContainer.top .foothealth .tertiary:first-of-type .row:first-of-type .bubble { display: block; margin: 0 auto; } @media all and (min-width: 43.8125em) { #centerContainer.top .foothealth .tertiary:first-of-type .row:first-of-type .bubble { position: absolute; right: -40px; top: 30px; z-index: 100; } } #centerContainer.top .foothealth .primary__light .row:last-of-type:not(.buttons) { margin-top: 60px; } #centerContainer.top .foothealth .primary__light .row ul li { margin: 10px 0; text-align: center; } @media all and (min-width: 43.8125em) { #centerContainer.top .foothealth .primary__light .row ul li { margin: 5px 0; } } #centerContainer.top .foothealth .primary__light .row ul .button { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 13px; font-size: 1.3rem; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; min-height: 60px; white-space: pre-line; width: 100%; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #centerContainer.top .foothealth .primary__light .row ul .button { font-size: 12px; font-size: 1.2rem; } } #centerContainer.top .foothealth .primary__light .row ul .button span { display: inline-block; width: 100%; } #centerContainer.top .foothealth > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 24px; text-align: center; } #centerContainer.top .foothealth > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } #centerContainer.top .arthritis > div { margin: 40px 0; } #centerContainer.top .arthritis > div:last-of-type { margin-bottom: 0; } #centerContainer.top .arthritis h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .arthritis p { line-height: 20px; } @media all and (min-width: 43.8125em) { #centerContainer.top .arthritis .photo { margin: 0; } } #centerContainer.top .arthritis .button { display: block; margin: 30px auto; white-space: normal; width: 65%; } @media all and (min-width: 43.8125em) { #centerContainer.top .arthritis .button { margin: 0 auto; } } #centerContainer.top .arthritis > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 27px; margin-bottom: 30px; text-align: center; } #centerContainer.top .arthritis > .row > .col-8 p.secondary { color: #fa5f5f; } #centerContainer.top .arthritis > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } @media all and (min-width: 43.8125em) and (max-width: 61.24em) { #centerContainer.top .arthritis .tertiary .col-6 .photo:first-of-type { margin: 0 auto; max-width: 85%; } } @media all and (min-width: 61.25em) { #centerContainer.top .arthritis .tertiary .col-6 .photo:first-of-type { margin-top: 40px; } #centerContainer.top .arthritis .tertiary .col-6 .photo:first-of-type figcaption { padding-left: 30px; text-align: left; } } #centerContainer.top .arthritis .tertiary .col-6 .photo:last-of-type { display: block; margin: 30px auto 0; max-width: 50%; } @media all and (min-width: 43.8125em) { #centerContainer.top .arthritis .tertiary .col-6 .photo:last-of-type { max-width: 60%; } } @media all and (min-width: 61.25em) { #centerContainer.top .arthritis .tertiary .col-6 .photo:last-of-type { bottom: -148px; margin: 0; max-width: 57%; position: absolute; right: 30px; } } #centerContainer.top .bunions > div { margin: 40px 0; } #centerContainer.top .bunions > div:last-of-type { margin-bottom: 0; } #centerContainer.top .bunions > div:not(.accordion) h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .bunions > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 27px; margin-bottom: 30px; text-align: center; } #centerContainer.top .bunions > .row > .col-8 p.secondary { color: #fa5f5f; } #centerContainer.top .bunions > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } @media all and (min-width: 50.125em) { #centerContainer.top .bunions .primary__light .col-3:first-of-type { margin-left: 50px; margin-top: 10px; z-index: 0; } #centerContainer.top .bunions .primary__light .col-3:nth-child(2n) { margin-left: -50px; margin-top: -10px; z-index: 1; } #centerContainer.top .bunions .primary__light .col-3:nth-child(3n) { margin-left: 20px; margin-top: -20px; z-index: 2; } #centerContainer.top .bunions .primary__light .col-3:last-of-type { margin-left: -60px; margin-top: 12px; z-index: 1; } } @media all and (min-width: 61.25em) { #centerContainer.top .bunions .primary__light .col-3:nth-child(3n) { z-index: 0; } } #centerContainer.top .corns > div { margin: 40px 0; } #centerContainer.top .corns > div:last-of-type { margin-bottom: 0; } #centerContainer.top .corns h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .corns > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 24px; text-align: center; } #centerContainer.top .corns > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } #centerContainer.top .corns .primary__light .col-2 { margin-bottom: 15px; text-align: center; } @media all and (min-width: 43.8125em) { #centerContainer.top .corns .primary__light .col-2 { margin-bottom: 0; } } #centerContainer.top .diabetes > div { margin: 40px 0; } #centerContainer.top .diabetes > div:last-of-type { margin-bottom: 0; } #centerContainer.top .diabetes > div:not(.accordion) h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .diabetes > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 24px; text-align: center; } #centerContainer.top .diabetes > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } #centerContainer.top .falls > div { margin: 40px 0; } #centerContainer.top .falls > div:last-of-type { margin-bottom: 0; } #centerContainer.top .falls > div .photo { margin-bottom: 30px; } @media all and (min-width: 50.125em) { #centerContainer.top .falls > div .photo { margin-bottom: 0; margin-top: 0; } } #centerContainer.top .falls h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .falls .tertiary:first-of-type p:last-of-type { margin: 0; } @media all and (max-width: 50.115em) { #centerContainer.top .falls .primary__light .col-3, #centerContainer.top .falls .primary__light .col-5, #centerContainer.top .falls .primary__light .col-7, #centerContainer.top .falls .primary__light .col-9 { float: none; left: auto; right: auto; width: 100%; } #centerContainer.top .falls .primary__light .buttons { text-align: center; } } @media all and (min-width: 50.125em) { #centerContainer.top .falls .primary__light .row { margin-bottom: 40px; margin-top: 40px; } #centerContainer.top .falls .primary__light .col-9 { margin-top: 15px; } } @media all and (min-width: 61.25em) { #centerContainer.top .falls .primary__light .row:first-of-type, #centerContainer.top .falls .primary__light .row:nth-child(2n) { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } #centerContainer.top .falls h3 { color: #fa5f5f; text-align: center; } @media all and (min-width: 50.125em) { #centerContainer.top .falls h3 { text-align: left; } } #centerContainer.top .falls > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 24px; text-align: center; } #centerContainer.top .falls > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } #centerContainer.top .oedema > div { margin: 40px 0; } #centerContainer.top .oedema > div:last-of-type { margin-bottom: 0; } #centerContainer.top .oedema h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } @media all and (min-width: 43.8125em) { #centerContainer.top .oedema hr { display: none; } } #centerContainer.top .oedema .col-6 { text-align: center; } #centerContainer.top .oedema .col-6 > a { font-style: italic; } #centerContainer.top .oedema .col-6 > a:after { content: '/'; margin: 0 4px; } #centerContainer.top .oedema .col-6 > a:last-of-type:after { content: ''; } @media all and (max-width: 43.8025em) { #centerContainer.top .oedema .col-6 h3:last-of-type { margin-top: 25px; } } #centerContainer.top .oedema > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 24px; text-align: center; } #centerContainer.top .oedema > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } @media all and (min-width: 43.8125em) and (max-width: 50.115em) { #centerContainer.top .oedema .photos { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } #centerContainer.top .oedema .photos .col-4:first-of-type { margin-bottom: 30px; } @media all and (min-width: 50.125em) { #centerContainer.top .oedema .photos .col-4 .photo { max-width: 75%; } #centerContainer.top .oedema .photos .col-4 figcaption { margin: 0 auto; width: 75%; } #centerContainer.top .oedema .photos .col-4:first-of-type { margin-bottom: 30px; margin-left: 16%; margin-top: 24px; z-index: 1; } #centerContainer.top .oedema .photos .col-4:nth-child(2n) { margin-left: -12%; z-index: 0; } #centerContainer.top .oedema .photos .col-4:last-of-type { margin-left: -12%; margin-top: 55px; z-index: 1; } } #centerContainer.top .circulation > div { margin: 40px 0; } #centerContainer.top .circulation > div:last-of-type { margin-bottom: 0; } #centerContainer.top .circulation > div:not(.accordion) h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .circulation > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 24px; text-align: center; } #centerContainer.top .circulation > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } #centerContainer.top .swollen > div { margin: 40px 0; } #centerContainer.top .swollen > div:last-of-type { margin-bottom: 0; } #centerContainer.top .swollen > div:not(.accordion) h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .swollen > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 24px; text-align: center; } #centerContainer.top .swollen > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } #centerContainer.top .swollen .col-6 { text-align: center; } #centerContainer.top .swollen .col-6 > a { font-style: italic; } #centerContainer.top .swollen .col-6 > a:after { content: '/'; margin: 0 4px; } #centerContainer.top .swollen .col-6 > a:last-of-type:after { content: ''; } @media all and (max-width: 43.8025em) { #centerContainer.top .swollen .col-6 h3:last-of-type { margin-top: 25px; } } #centerContainer.top .about > div { margin: 40px 0; } #centerContainer.top .about > div:last-of-type { margin-bottom: 0; } #centerContainer.top .about h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } @media all and (min-width: 50.125em) { #centerContainer.top .about > .tertiary:first-of-type .row:last-of-type { margin-top: 50px; } #centerContainer.top .about > .tertiary:first-of-type .row:last-of-type .col-3 { margin-left: 40px; z-index: 0; } #centerContainer.top .about > .tertiary:first-of-type .row:last-of-type .col-4 { margin-left: -35px; margin-top: -50px; z-index: 1; } #centerContainer.top .about > .tertiary:first-of-type .row:last-of-type .col-4 + .col-3 { margin-left: -58px; margin-top: -20px; z-index: 0; } } @media all and (min-width: 43.8125em) { #centerContainer.top .about > .clearing, #centerContainer.top #buyingArea ul.buybox li .about > ul, #buyingArea ul.buybox li #centerContainer.top .about > ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } #centerContainer.top .about .tertiary .decal { margin: 25px auto; } @media all and (min-width: 61.25em) { #centerContainer.top .about .tertiary .decal { margin: 37px auto; } } @media all and (max-width: 43.8025em) { #centerContainer.top .about .right.primary__light .row .col-6:last-of-type { margin-top: 50px; } } #centerContainer.top .about .right.primary__light .row:last-of-type { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media all and (min-width: 43.8125em) { #centerContainer.top .about .right.primary__light .row:last-of-type { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } @media all and (min-width: 43.8125em) { #centerContainer.top .about .right.primary__light .mie { margin: 0 auto; max-width: 77%; } } #centerContainer.top .customers > div { margin: 40px 0; } #centerContainer.top .customers > div:last-of-type { margin-bottom: 0; } @media all and (min-width: 43.8125em) { #centerContainer.top .customers .tertiary > .row { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } @media all and (max-width: 43.8025em) { #centerContainer.top .customers .col-3 { margin-top: 20px; } } #centerContainer.top .customers .testimonial { margin-left: 25px; } #centerContainer.top .customers .testimonial blockquote { margin: 0; } #centerContainer.top .customers h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .customers > .row > .col-8 p { font-size: 24px; font-size: 2.4rem; line-height: 24px; text-align: center; } #centerContainer.top .customers > .row > .col-8 p.disclaimer { font-size: 17px; font-size: 1.7rem; text-align: left; } #centerContainer.top .customers > .row > .col-8 .address { text-align: center; } #centerContainer.top .customers > .row > .col-8 .address span, #centerContainer.top .customers > .row > .col-8 .address div { display: inline-block; } #centerContainer.top .mie > div { margin: 40px 0; } #centerContainer.top .mie > div:last-of-type { margin-bottom: 0; } #centerContainer.top .mie h2 { border-bottom: 1px solid #b8b8b8; margin-bottom: 25px; padding-bottom: 8px; } #centerContainer.top .mie > .row > .col-8 { color: #55949a; font-size: 24px; font-size: 2.4rem; font-style: italic; line-height: 24px; text-align: center; } @media all and (min-width: 43.8125em) { #centerContainer.top .mie > .clearing, #centerContainer.top #buyingArea ul.buybox li .mie > ul, #buyingArea ul.buybox li #centerContainer.top .mie > ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } @media all and (min-width: 43.8125em) { #centerContainer.top .mie .tertiary:first-of-type .row:first-of-type { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } #centerContainer.top .mie .tertiary:first-of-type .row:last-of-type { text-align: center; } #centerContainer.top .mie .tertiary:first-of-type .row:last-of-type figure { display: inline-block; margin: 3% 0; vertical-align: top; width: 45%; } #centerContainer.top .mie .tertiary:first-of-type .row:last-of-type .col-6 { margin: 10px 0 35px 0; } @media all and (min-width: 43.8125em) { #centerContainer.top .mie .tertiary:first-of-type .row:last-of-type .col-6 { margin: 0; } } #centerContainer.top .mie .tertiary:first-of-type .row p.center { margin: 30px 0; } @media all and (min-width: 43.8125em) { #centerContainer.top .mie .tertiary.shock .photo { margin-top: 30px; } } @media all and (min-width: 43.8125em) and (max-width: 61.24em) { #centerContainer.top .mie .tertiary.right .col-6 { width: 100%; } } @media all and (min-width: 61.25em) { #centerContainer.top .mie .tertiary.right .col-6 { width: 50%; } #centerContainer.top .mie .tertiary.right .col-6:first-of-type { margin-left: 20px; } #centerContainer.top .mie .tertiary.right .col-6:last-of-type { margin-left: -40px; margin-top: 30px; } } @media all and (min-width: 61.25em) { #centerContainer.top .mie .tertiary.right { width: 72%; } } #centerContainer.top .mie .mieLogo { text-align: center; } #centerContainer.top .mie .mieLogo svg, #centerContainer.top .mie .mieLogo img { height: 290px; max-width: 100%; } #centerContainer.top .mie .mieLogo img { height: auto; width: auto; } @media all and (min-width: 61.25em) { #centerContainer.top .mie .primary__light.left { width: 26%; } } #centerContainer.top .mie .primary__light.dt p.center { margin: 30px 0; } #centerContainer.top .mie .primary__light.dt .col-6 { text-align: center; } #centerContainer.top .mie .primary__light.dt .col-6 a { margin: 20px auto 0 auto; } @media all and (min-width: 43.8125em) and (max-width: 61.24em) { #centerContainer.top .mie .primary__light.dt .row:last-of-type { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } @media all and (min-width: 61.25em) { #centerContainer.top .mie .primary__light.dt .col-4 { margin-left: 100px; } #centerContainer.top .mie .primary__light.dt .col-4:nth-child(2n) { margin-left: -99px; margin-top: 28px; } #centerContainer.top .mie .primary__light.dt .col-4:last-of-type { margin-left: -130px; margin-top: 4px; z-index: 0; } } #centerContainer.top .retailers { /* Map Popups */ } #centerContainer.top .retailers form { margin: 0; } #centerContainer.top .retailers .storeFinder { margin: 40px 0; width: 100%; } @media all and (min-width: 50.125em) { #centerContainer.top .retailers .storeFinderAskWrapper { float: left; margin: 0; width: 24%; } } #centerContainer.top .retailers .storeFinderAsk { padding: 25px 15px; } #centerContainer.top .retailers .storeFinderAsk .button { width: 100%; } @media all and (min-width: 50.125em) { #centerContainer.top .retailers .storeKey { float: left; width: 50%; } } #centerContainer.top .retailers .storeKey h2 { padding-top: 20px; } @media all and (min-width: 50.125em) { #centerContainer.top .retailers .storeKey h2 { text-align: left; } } #centerContainer.top .retailers .storeKey div { display: inline-block; margin: 0 15px 10px 0; } #centerContainer.top .retailers .storeKey div img, #centerContainer.top .retailers .storeKey div span { display: inline-block; vertical-align: middle; } #centerContainer.top .retailers .storeKey p { font-size: 12px; font-size: 1.2rem; } #centerContainer.top .retailers .storeFinderMapArea { margin-bottom: 20px; width: 100%; } #centerContainer.top .retailers .storeFinderMapArea #map_div { height: 400px; width: 100%; } @media all and (min-width: 50.125em) { #centerContainer.top .retailers .storeFinderMapArea { float: left; margin-right: 2%; width: 48%; } #centerContainer.top .retailers .storeFinderMapArea #map_div { height: 720px; width: 100%; } } #centerContainer.top .retailers .storeFinderList { background: #eaf7f9; margin-top: 20px; padding: 25px 0 0 0; width: 100%; } @media all and (min-width: 50.125em) { #centerContainer.top .retailers .storeFinderList { float: left; margin: 0 0 0 2%; width: 24%; } } #centerContainer.top .retailers .storeFinderList h2 { padding: 0 50px; } #centerContainer.top .retailers .storeFinderList hr { margin: 0 auto 13px auto; width: 85%; } #centerContainer.top .retailers .storeFinderList #storeFinderList { height: 280px; overflow-y: scroll; position: relative; } @media all and (min-width: 50.125em) { #centerContainer.top .retailers .storeFinderList #storeFinderList { height: 389px; } } #centerContainer.top .retailers .storeFinderListHead { width: 100%; } #centerContainer.top .retailers .storeFinderListLine, #centerContainer.top .retailers .storeFinderListLineOpen { box-sizing: content-box; padding: 10px 5% 5px 5%; width: 90%; } #centerContainer.top .retailers .storeFinderListLine:hover, #centerContainer.top .retailers .storeFinderListLine:focus, #centerContainer.top .retailers .storeFinderListLine:active, #centerContainer.top .retailers .storeFinderListLineOpen:hover, #centerContainer.top .retailers .storeFinderListLineOpen:focus, #centerContainer.top .retailers .storeFinderListLineOpen:active { cursor: pointer; } #centerContainer.top .retailers .storeFinderListLineDetail, #centerContainer.top .retailers .storeFinderListLineDetailOpen { box-sizing: content-box; display: none; padding: 0 5% 20px 5%; width: 90%; } #centerContainer.top .retailers .storeFinderListLineDetailOpen { display: block; } #centerContainer.top .retailers .storeFinderListI { display: inline-block; vertical-align: top; width: 100%; } #centerContainer.top .retailers .storeFinderListI > div:nth-child(even) { background-color: #cceef0; } #centerContainer.top .retailers .storeFinderListI .name { display: inline-block; font-size: 14px; font-size: 1.4rem; margin-right: 5%; vertical-align: top; width: 45%; } #centerContainer.top .retailers .storeFinderListI .dist { display: inline-block; font-size: 13px; font-size: 1.3rem; text-align: right; width: 28%; vertical-align: top; } #centerContainer.top .retailers .storeFinderListI .addr { line-height: 20px; } @media all and (min-width: 50.125em) { #centerContainer.top .retailers .storeFinderListI .addr { margin-left: 29px; } } #centerContainer.top .retailers .storeFinderListI .img { display: inline-block; font-size: 14px; font-size: 1.4rem; vertical-align: top; width: 10%; } #centerContainer.top .retailers .storeFinderListI .img span { display: inline-block; font-size: 14px; font-size: 1.4rem; font-weight: bold; vertical-align: middle; } #centerContainer.top .retailers .storeFinderListI .img img { display: inline-block; vertical-align: middle; width: 25px; } #centerContainer.top .retailers .storeFinderListI .button { font-size: 10px; font-size: 1rem; padding: 6px; width: 100%; } #centerContainer.top .retailers .storeFinderListI .button + .button { margin: 10px 0 0 0; } #centerContainer.top .retailers .storeFinderListI .link { display: inline-block; font-size: 13px; font-size: 1.3rem; text-align: right; vertical-align: top; width: 3%; } #centerContainer.top .retailers .mapLocation { min-width: 275px; padding: 6px; } #centerContainer.top .retailers .head, #centerContainer.top .retailers .addr { font-size: 15px; font-size: 1.5rem; } #centerContainer.top .retailers .head { font-size: 16px; font-size: 1.6rem; } #centerContainer.top .retailers .addr { line-height: 20px; } #centerContainer.top .retailers .links { margin-top: 10px; } #centerContainer.top .retailers .button--map { display: inline-block; font-size: 11px; font-size: 1.1rem; width: 49%; } #centerContainer.top .retailers .button--map:last-of-type { margin: 0; } @media all and (min-width: 61.25em) { #centerContainer.top .retailers .button--map { margin: 0; width: auto; } #centerContainer.top .retailers .button--map:last-of-type { margin: 0 0 0 10px; } } #centerContainer.top .retailers p.disclaimer { border-top: 1px solid #bbb; font-size: 13px; font-size: 1.3rem; padding-top: 15px; margin-top: 15px; } /** * Find a retailer map detail page */ .storeFinderDetail { max-width: 900px; text-align: left; width: 100%; /*.hours { text-align:center; } .fittings { display:inline-block; text-align:center; width:auto; } .fittings * { display:inherit; } .fittings1 { width:10%; } .fittings2 { width:89%; } .fitting { width:5%; text-align:right;} div.fittingtick { padding:0 0 0 3px; width:5%; } img.fittingtick { padding-bottom:3px; vertical-align:middle; }*/ } .storeFinderDetail h2 { border-bottom: 0 none; font-size: 31px; font-size: 3.1rem; } .storeFinderDetail > div { background-color: #eaf7f9; padding: 30px 2.5%; width: 100%; } .storeFinderDetail > div > div { border-top: 1px solid #bbb; margin: 10px 0; padding: 20px 0; } .storeFinderDetail h3 { margin: 0; padding: 0; } .storeFinderDetail h4 { font-size: 19px; font-size: 1.9rem; } .storeFinderDetail p.disclaimer { border-top: 1px solid #bbb; font-size: 13px; font-size: 1.3rem; padding-top: 15px; margin-top: 15px; } .storeFinderDetail .addr, .storeFinderDetail .shop_info { width: 100%; } @media all and (min-width: 50.125em) { .storeFinderDetail .addr, .storeFinderDetail .shop_info { float: left; width: 50%; } } .storeFinderDetail .shop_info { border-top: 1px solid #bbb; margin-top: 24px; padding-top: 15px; } @media all and (min-width: 50.125em) { .storeFinderDetail .shop_info { border-top: 0 none; margin-top: 0; padding-top: 0; } } .storeFinderDetail .hours { text-align: center; } .storeFinderDetail .stock > div { display: block; } @media all and (max-width: 50.115em) { .storeFinderDetail .fittings tr { display: block; margin: 0 auto; } .storeFinderDetail .fittings1 { width: 100%; } .storeFinderDetail .fitting, .storeFinderDetail td.fittingtick { display: inline-block; width: 50%; } } .storeFinderDetail .fittings { margin: 0 auto; width: auto; } .storeFinderDetail .fittings1 { width: 10%; font-weight: bold; } .storeFinderDetail .fittings2 { width: 89%; } .storeFinderDetail div.fittingtick { padding: 0 0 0 3px; width: 5%; } .storeFinderDetail img.fittingtick { padding-bottom: 3px; margin: 0 16px 0 5px; vertical-align: middle; } /** * Our History page - Animated Timeline */ .cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ margin: 0 auto; max-width: 1200px; width: 100%; } @media all and (min-width: 61.25em) { .cd-container { background: url(../../images/static/bg-timeline.png) no-repeat 50% 0; } } .cntl-bar { background-color: #bbb; bottom: 0; box-shadow: inset 0px 0px 7px -2px #373737; position: absolute; top: 0; width: 10px; } .cntl-center { left: 0; margin-left: auto; margin-right: auto; right: 0; } #cd-timeline { bottom: 2em; margin-bottom: 3em; padding: 0 0 2em 0; position: relative; top: 2em; } #cd-timeline:before { /* this is the vertical line */ content: ''; display: block; height: 100%; left: 18px; position: absolute; top: 0; width: 2px; } @media all and (max-width: 61.24em) { #cd-timeline:before { background: #f94646; } } @media all and (min-width: 61.25em) { #cd-timeline:before { left: 50.3%; margin-left: -2px; } } .cd-timeline-block { margin: 1.2em 0; position: relative; z-index: 0; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } @media all and (min-width: 61.25em) { .cd-timeline-block { margin: 1em 0; width: 40%; } .cd-timeline-block.h_left { float: left; left: 0 !important; } .cd-timeline-block.h_right { float: right; left: auto !important; right: 0 !important; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } } .height-11 a img:first-of-type { margin-right: 10px; } .height-12 figure { display: inline-block; vertical-align: top; } @media all and (min-width: 61.25em) { .gutter-sizer-timeline { height: 0; width: 10%; } .height-1 { height: 352px; } .height-2 { height: 330px; margin-top: 4em; } .height-3 { height: 390px; } .height-4 { height: 352px; margin-bottom: 1.5em; margin-top: 5em; } .height-5 { height: 377px; margin-bottom: 2em; margin-top: 1.5em; } .height-6 { height: 143px; margin-top: 1.5em; } .height-7 { height: 344px; margin-top: 7em; } .height-8 { height: 189px; margin-top: 2em; } .height-9 { height: 111px; margin-top: 0.5em; } .height-10 { height: 190px; margin-top: 7em; } .height-11 { height: 408px; margin-top: 3.4em; } .height-11 a img:first-of-type { bottom: -60px; left: 10px; position: absolute; } .height-12 { height: 370px; margin-bottom: 0.5em; margin-top: 0.5em; } .height-13 { height: 446px; margin-top: 3.3em; } .height-14 { height: 369px; } } @media all and (min-width: 61.25em) { .h_left .cd-timeline-img { left: 125.4%; right: 0; } .h_right .cd-timeline-img { right: auto; left: -24.5%; } } .cd-timeline-img { background: #fa5f5f; border-radius: 50%; box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); height: 20px; left: 8px; position: absolute; top: 20px; width: 20px; } .cd-timeline-img img { display: block; height: 24px; left: 50%; margin-left: -12px; margin-top: -12px; position: relative; top: 50%; width: 24px; } @media all and (min-width: 61.25em) { .cd-timeline-img { height: 20px; left: 50%; margin-left: -10px; top: 50px; width: 20px; /* Force Hardware Acceleration in WebKit */ } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { -webkit-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; visibility: visible; } } @-webkit-keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .cd-timeline-content { background-clip: padding-box; border: 3px solid #e0e0e1; margin-left: 60px; padding: 1em; position: relative; text-align: center; } .cd-timeline-content h2 { color: #0e84aa; } .cd-timeline-content p { font-size: 16px; font-size: 1.6rem; line-height: 1.4; margin: 0 0 1em 0; } .cd-timeline-content:before { border-right: 17px solid #e0e0e1; border: 17px solid transparent; border-right-color: #e0e0e1; content: ''; height: 0; position: absolute; right: 100%; top: 16px; width: 0; } .cd-timeline-content:after { background: #e0e0e1; bottom: 2px; content: ' '; display: block; left: 2px; position: absolute; right: 2px; top: 2px; z-index: -1; } @media all and (min-width: 43.8125em) { .cd-timeline-content h2 { font-size: 20px; font-size: 2rem; } } @media all and (min-width: 61.25em) { .cd-timeline-content { margin-left: 0; padding: 0.5em 1.6em; text-align: center; width: 100%; } .cd-timeline-content:before { border-left-color: #e0e0e1; border-right-color: transparent; left: 100%; top: 44px; } .cd-timeline-block.h_right .cd-timeline-content { float: right; } .cd-timeline-block.h_right .cd-timeline-content:before { border-color: transparent; border-right-color: #e0e0e1; left: -35px; right: 100%; top: 44px; } .cssanimations .cd-timeline-content.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; visibility: visible; } .cssanimations .cd-timeline-content.is-hidden h3, .cssanimations .cd-timeline-content.is-hidden h4, .cssanimations .cd-timeline-content.is-hidden p { visibility: hidden; } } @media all and (min-width: 61.25em) { /* inverse bounce effect on right side content blocks */ .cssanimations .cd-timeline-block.h_right .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; } } @-webkit-keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); } 100% { -webkit-transform: translateX(0); } } @keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); } } @keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /* ================================ Static Pages - Product Features ================================ */ /** * General */ #centerContainer.feature { margin-top: 40px; } @media all and (min-width: 43.8125em) { #centerContainer.feature { margin-top: 70px; } } #centerContainer.feature p { text-align: center; } #centerContainer.feature p.lead { margin: 15px auto 35px; width: 85%; } @media all and (min-width: 43.8125em) { #centerContainer.feature p.lead { margin: 20px auto 45px; width: 70%; } } #centerContainer.feature p.lead.nm { margin: 15px auto; } #centerContainer.feature p img { display: inline-block; vertical-align: top; } #centerContainer.feature .tertiary { margin-bottom: 25px; text-align: center; } #centerContainer.feature .tertiary.full { background: transparent; padding: 0; } /* ================================ Quick Order ================================ */ @media all and (min-width: 43.8125em) { #catCodeForm { margin: 0; } } #catCodeForm .form__item { padding: 4px 8px 8px 0; } @media all and (max-width: 43.8025em) { #catCodeForm .form__item { padding: 4px 0 0 0; } #catCodeForm .form__share { width: 100%; } } #catCodeForm .button { width: 100%; } @media all and (min-width: 43.8125em) { #catCodeForm .button { margin: 33px 0 0 0; padding: 5px 12px; } } #expopMain { padding: 10px 0 10px; width: auto; /** * Div Matrix */ /** * Matrix Table */ } @media all and (min-width: 50.125em) { #expopMain { width: 460px; } } #expopMain #expopLeft { color: inherit; float: none; margin-bottom: 20px; padding: 0; width: auto; } #expopMain #expopLeft span { font-size: 16px; font-size: 1.6rem; } #expopMain #expopImage { float: none; width: auto; } #expopMain #expopImage img { float: none; height: 125px; width: auto; } #expopMain .matrixBox { border-color: #bbb; margin: 0; padding: 12px 4%; width: 100%; } #expopMain .matrixBox .head { float: none; font-size: 16px; font-size: 1.6rem; text-align: center; } #expopMain .matrixBox #selectedPartPopup { margin: 0 0 10px; text-align: center; } #expopMain #pimagePopup { max-width: none; } #expopMain .matrixDiv { font-size: 14px; font-size: 1.4rem; } #expopMain .matrixDiv .variation, #expopMain .matrixDiv .colourRow { width: 100%; } #expopMain .matrixDiv .variation { margin-bottom: 20px; } #expopMain .matrixDiv .colour { float: left; padding-right: 4%; width: 32%; } #expopMain .matrixDiv .colourimg { float: left; height: 20px; margin-bottom: 6px; padding: 3px 2px 2px 3px; } #expopMain .matrixDiv .colourname { float: left; margin: 5px 0px 0 3px; } #expopMain .matrixDiv .sizecolours { float: left; width: 68%; } #expopMain .matrixDiv .sizecolour { background: #fa5050; float: left; margin-bottom: 8px; padding: 4px 1.5% 0px 1.5%; width: 35px; } #expopMain .matrixDiv .size { height: 39px; line-height: normal; } #expopMain .matrixDiv .sizebutton img { width: 20px; } #expopMain .matrixTable { float: none; } #expopMain .matrixTable td { padding-left: 1%; padding-right: 1%; } #expopMain .matrixTable td.t_colourname a:hover, #expopMain .matrixTable td.t_colourname a:focus, #expopMain .matrixTable td.t_colourname a:active, #expopMain .matrixTable td.t_colourname a { font-size: 14px; font-size: 1.4rem; } #expopMain .matrixTable td.t_colourimg { padding-left: 0; } #expopMain .matrixTable td.t_sizebutton img { height: auto; width: auto; } #expopMain .matrixTable img.t_colourimg { max-width: none; } #expopMain #keyLine { text-align: center; } #expopMain ul.buybox li { float: left; } #expopMain ul.buybox li.a { margin-top: 20px; width: 20%; } #expopMain ul.buybox li.qty { width: 80%; } @media all and (min-width: 50.125em) { #expopMain ul.buybox li.qty { width: 37%; } } #expopMain ul.buybox li.buy { width: 100%; } @media all and (min-width: 50.125em) { #expopMain ul.buybox li.buy { margin-left: 6%; width: 37%; } #expopMain ul.buybox li.buy .button { width: 100%; } } /** * Quick Order - Basket */ #quickOrderTop { margin-bottom: 40px; } #quickOrderMidHead { font-size: 14px; font-size: 1.4rem; } #quickOrderMidHead ul li, .quickOrderMid_bskt ul li { background: #f7f7f7; float: left; height: auto; margin: 0 0.3%; padding: 10px; width: 19.4%; } #quickOrderMidHead ul img, .quickOrderMid_bskt ul img { width: 40px; } .quickOrderMid_bskt { border-bottom: 1px solid #ddd; } .quickOrderMid_bskt ul li { background: none; height: auto; } #quickOrderMid { font-size: 14px; font-size: 1.4rem; margin: 0 0 20px; } @media all and (min-width: 43.8125em) { .quick-order.button { float: right; } } /* ================================ Recommend a Friend ================================ */ .flogin { padding: 0; width: 100%; } .flogin .button { float: right; } .flogin .required { text-align: right; } #friendsDetails { padding-top: 0; } #friendForm #postcodefind { float: left; } #friendForm .button[type="submit"] { float: right; margin-top: 20px; } /* ================================ Sitemap - responsive - masonry ================================ */ #infoContainer.sitemap { padding: 30px 0; margin: 0; width: 100%; } #siteMap .menucover, #siteMap a.expander, #siteMap .subHeadFill, #siteMap div dd.toponly { display: none; } #sitemap { padding: 0; position: relative; width: 100%; } #siteMap ul { width: 100%; } #siteMap .wrapper-inner div dd a { color: #515050; display: block; line-height: 16px; padding: 1px 3px 1px 10px; } #siteMap .wrapper-inner div dd.subHead { color: #fa5f5f; text-transform: uppercase; } #siteMap .wrapper-inner div dd.subHead.toponly { color: #515050; text-transform: capitalize; } #siteMap .wrapper-inner > li#posa { display: none; } #siteMap .wrapper-inner li.lrga a.leftonly { color: #ffffff; float: left; font-size: 11px; font-size: 1.1rem; height: 19px; line-height: 17px; padding: 0 5px; text-align: left; width: 145px; } #siteMap .wrapper-inner li.lrga a.toponly, #siteMap .wrapper-inner li.lrga dd.toponly { border-bottom: 1px dashed #ddd; color: #515050; display: block; font-size: 14px; font-size: 1.4rem; margin: 0 0 7px; padding: 0 0 3px 0; text-transform: uppercase; width: 100%; } #siteMap .wrapper-inner li.lrga a.toponly:hover, #siteMap .wrapper-inner li.lrga a.toponly:focus, #siteMap .wrapper-inner li.lrga a.toponly:active, #siteMap .wrapper-inner li.lrga dd.toponly:hover, #siteMap .wrapper-inner li.lrga dd.toponly:focus, #siteMap .wrapper-inner li.lrga dd.toponly:active { color: inherit; text-decoration: none; } #siteMap .wrapper-inner .link { display: none; } #siteMap .wrapper-inner > li { margin-bottom: 10px; padding-bottom: 10px; position: relative; width: 100%; } @media all and (min-width: 43.8125em) { #siteMap .wrapper-inner > li { margin-bottom: 16px; padding-bottom: 6px; width: 31.5%; } } #siteMap .wrapper-inner > li.gutter-sizer { padding: 0; margin: 0; width: 2%; } #siteMap .wrapper-inner > li .col1, #siteMap .wrapper-inner > li .col2, #siteMap .wrapper-inner > li .col3 { float: none; } #siteMap .wrapper-inner li div > dl:first-of-type .subHead { padding-top: 8px; } #siteMap .wrapper-inner div dd { width: 100%; margin: 0; padding: 0; text-align: left; } #siteMap .wrapper-inner div dd.subHead { font-weight: 400; padding: 10px 0 4px 10px; font-size: inherit; } #siteMap .wrapper-inner div dl.col1anohead dd a { padding-left: 0; } #siteMap .wrapper-inner div dd a.dataon { color: #fa5f5f; } #siteMap .wrapper-inner div dd.filler { float: left; border: 0; height: 8px; line-height: 8px; } #siteMap .wrapper-inner .menu_expander { display: none; } @media all and (min-width: 43.8125em) { #gutter { width: 31.5%; } } /* ================================ Footer ================================ */ /** * Hide Checkout Footer */ #outerContainer.checkout .footer--top { display: none; } /** * Desktop Footer Nav */ .nav--footer { margin-top: 40px; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; } .nav--footer .menu { border-top: 1px solid #ddd; font-size: 17px; font-size: 1.7rem; padding: 10px 0; text-align: center; } .nav--footer .menu li { border-right: 1px solid #ddd; display: inline-block; float: none; padding: 0 12px; } .nav--footer .menu li:last-of-type { border-right: 0 none; } /** * Footer */ #footer { border-top: 5px solid #faf6ed; float: none; box-flex: 0; -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; } .checkout #footer { margin-top: 30px; } @media all and (min-width: 43.8125em) { .checkout #footer { margin-top: 0; } } @media all and (max-width: 50.115em) { #footer { margin-top: 60px; } } #footer .wrapper:first-of-type { background: #faf6ed; border-top: 3px solid #ffffff; } #footer .wrapper:last-of-type { background: #f5eddc; } #footer .col-4 { background: #f5eddc; } #footer .col-4.push-4 { background: #faf6ed; } @media all and (min-width: 43.8125em) { #footer .col-4.push-4 { left: 37.33333%; padding-left: 28px; width: 24%; } } @media all and (min-width: 43.8125em) { #footer .col-4 { background: transparent; width: 37%; } } @media all and (min-width: 43.8125em) { #footer .col-4.pull-4 { background: #faf6ed; right: 23.33333%; width: 37%; } } @media all and (min-width: 43.8125em) { #footer .col-4:last-of-type { text-align: right; width: 39%; } } #footer .telephone { color: #3d6e77; margin: 10px 0; width: 100%; } #footer .telephone span.telephone__number a { color: #3d6e77; } @media all and (max-width: 43.8025em) { #footer .telephone .telephone__icon, #footer .telephone img { float: none; } #footer .telephone span { float: none; margin: 4px auto; text-align: center; } #footer .telephone span.telephone__number { margin: 0; } } #footer .email__address { background: url("../../images/svg/sprite.svg.bg-envelope-ellipse.svg") no-repeat 50% 3px; color: #3d6e77; display: block; margin: 33px 0; padding: 34px 0 0 0; } @media all and (min-width: 43.8125em) and (max-width: 61.24em) { #footer .email__address { font-size: 13px; font-size: 1.3rem; padding: 8px 32px 8px 0; } } @media all and (min-width: 43.8125em) { #footer .email__address { background-position: 100% 5px; margin: 14px 0 0 0; } } @media all and (min-width: 61.25em) { #footer .email__address { padding: 5px 32px 8px 0; } } .no-svg #footer .email__address { background: url(../../images/svg/sprite.svg.bg-envelope-ellipse.png) no-repeat 100% 5px; } #footer a:hover, #footer a:focus, #footer a:active { color: #71acb1; text-decoration: none; } #footer .fb, #footer .tw, #footer .push-4 img { height: 35px; fill: #3d6e77; margin: 18px 0 15px 0; -webkit-transition: all 0.5s; transition: all 0.5s; width: 35px; } #footer .fb:hover, #footer .fb:focus, #footer .fb:active, #footer .tw:hover, #footer .tw:focus, #footer .tw:active, #footer .push-4 img:hover, #footer .push-4 img:focus, #footer .push-4 img:active { fill: #92bfc3; } #footer .address { margin: 0 auto; padding: 30px; width: 100%; } #footer .address > div { display: inline-block; } #footer .address span { display: inline-block; padding-right: 10px; } /* ================================ View Full or Mobile Optimised Links ================================ */ #view-full { display: none; } @media all and (max-width: 43.8025em) { .mobile-page #view-full { display: block; } } @media all and (min-width: 50.125em) { .mobile-page #view-full { display: none; } } #view-responsive { display: none; } @media all and (max-width: 43.8025em) { .mobile-page #view-responsive { display: none; } } @media all and (min-width: 50.125em) { .mobile-page #view-responsive { display: block; } } /* ================================================== Viewport Fix for IE Metro Mode on mobile / tablets ================================================= */ @media only screen { @-ms-viewport { width: device-width; } } /* ================================ Print ================================ */ @media print { /** * Print - Printer friendly, through and through. * * @author Jonathan Pilling * @date 24-08-2010 * * Includes sections from HTML5 Boilerplate */ .hidden-print { display: none !important; } .visible-print { display: block !important; } tr.visible-print { display: table-row !important; } td.visible-print { display: table-cell !important; } * { color: #000 !important; text-shadow: none !important; background: transparent !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } .button { text-decoration: none; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 2cm .5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .javascript, .outdated, #cccwr, .nav--main, .nav--footer { display: none; } } /*# sourceMappingURL=global.css.map */