/* ------------------------------------------------------------------------------------ SCREEN - Abbeyhorn 2021 3506177 :4358144 Filename :sitepanes.css Last Updated :11. 03. 2021 Copyright :(c) 2021 Etail Systems Ltd Author :Etail Systems Ltd Web :http://www.etailsystems.com Table of Contents 01. =Reset 02. =Page 03. =Typography Defaults Headings Links Specific headings Blockquote Base Article Typography 04. =Buttons 05. =Tables Defaults Order Quotations 06. =Forms Defaults Sign in Register Forgotten Password Checkout (New Customer) Checkout (Sign In) 07. =DepartmentTree / Menu top level second level third level forth level 08. =Breadcrumb 09. =Jquery Base Overrides 10. =OwlCarousel Overrides 11. =AccordionBase Header including hide/show icons Panes 12. =Autocomplete 13. =Email when back in stock EWIS 14. =HoverBasket 15. =PopupDialog / Popup Add to Basket / Direct Despatch 16. =Messages 17. =FIXEDTopPanel 18. =PanelTop 19. =CenterPanel 20. =MainPanel 21. =FooterPanel 22. =BottomPanel 23. =FIXEDBottomPanel 24. =Copyright and Managed By 25. =Articles 26. =Banners 27. =FilterSearch 28. =SearchHeader / SearchFooter 29. =FeaturedProducts Base Settings Image Title Pricing Structure Unit Specifics Client ref/Model Buy Form Media Queries 30. =ProductLists 31. =MyAccount 32. =Blog 33. =CustomCSS 34. =DepartmentPages Subdepartment Tree Media Queries 35. =ProductPage Title Image (carousel) Brand and Manufacturer barcodes Buy Panel Pricing info Description Accordion Description Stock Leadtime Direct Despatch/Dropship Links - Ask a question etc Video Links (youtube) Buytogether Personalisation Associated/Recommended/Related Reviews Feefo summary widget 36. =Super Attributes Defaults attributeTypePrice_Matrix_Calculator attributeTypeDimensions attributeTypeRadio_button attributeTypeText_Box_Free_Text_Entry attributeTypeDrop_down_list attributeTypeSingle_Image_Upload 37. =Basket Basket header Basket Lines Basket Line items Basket Subtotal Delivery info Shipping Basket Totals Basket Payment Buttons Media Queries 38. =Checkout Process 39. =OrderConfirmationd 40. =Hacks =Definitions ------------------------------------------------------------------------------------- */ :root { --mainColor:#c7a955; --footerColor:#efefef; --altColor:black; --altColor2:#747474; --altColor3:#747474; --textColor:#747474; --textColor2:#979797; --textColorLight:#ffffff; --textHeadingColor:black; --textHeadingaltColor:#747474; --textSubHeadingColor:#979797; --textSubHeadingaltColor:black; --bgColor:#ffffff; --bgaltColor:#ededed; --bgaltColor2:#e5e5e5; --bgaltColor3:#c5c5c5; --checkoutButtons:#8EC760; --errorColor:#ce1c00; --white:#ffffff; --mainFont:'Montserrat', sans-serif; --altFont:'Montserrat', sans-serif; --altFont2:'Montserrat', sans-serif; --headingFont:'Montserrat', sans-serif; --headingFont2:'Engravers', sans-serif; --menuFont:'Montserrat', sans-serif; --borderColor:#c5c5c5; } /* =Reset ------------------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; -webkit-font-smoothing:antialiased; /* Looks pretty much the same than Windows */ } iframe { /*don't do this here!*/ /* width:100% !important; */ } /* To enable HTML5 elements in IE */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display:block; } input, select, textarea { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; } input:focus, textarea:focus, select:focus { outline-offset:0px; } /* ----------------------------------------------------------------------------------------------------------------- =Page ------------------------------------------------------------------------------------- */ html { -webkit-font-smoothing:antialiased } body { background-color:var(--bgaltColor); font-family:var(--mainFont); font-size:16px; background-color:white; color:var(--textColor); } #cont { margin-left:auto; margin-right:auto; min-width:1200px; } ol { margin-left:.5em; } /* ------------------------------------------------------------------------------------- =Typography ------------------------------------------------------------------------------------- */ @font-face { font-family: 'Engravers'; src: url('https://www.sitegolf.etailsystems.com/fonts/engraversmtbold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://www.sitegolf.etailsystems.com/fonts/engraversmtbold-webfont.woff2') format('woff2'), /* Super modern browsers */ url('https://www.sitegolf.etailsystems.com/fonts/engraversmtbold-webfont.woff') format('woff'), /* Modern browsers */ url('https://www.sitegolf.etailsystems.com/fonts/engraversmtbold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://www.sitegolf.etailsystems.com/fonts/engraversmtbold-webfont.svg#FontName') format('svg'); /* Legacy iOS */ } /* Roboto ------------------------------------------------------- */ /* latin-ext */ @font-face { font-family:'Roboto'; font-style:italic; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family:'Roboto'; font-style:italic; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap; src:url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap; src:url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap; src:url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap; src:url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Montserrat -------------------------------------------------------*/ /* latin-ext */ @font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Defaults ------------------------------------------------------- */ /* this choice of font-family is supposed to render text the same across platforms */ body, input, button, textarea, select { font-family:var(--mainFont); -webkit-font-smoothing:antialiased; /* Looks pretty much the same than Windows */ } p, li, label, input, select, textarea {} select, textarea { padding:.5em; border-color:var(--borderColor); max-width: calc(100% - 1em); -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; } select { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMjhweCIgaGVpZ2h0PSIxMjhweCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPiAgPGltYWdlIGlkPSJpbWFnZTAiIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB4PSIwIiB5PSIwIgogICAgaHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFJQUFBQUNBQ0FNQUFBRDA0Skg1QUFBQmZXbERRMUJwWTJNQUFDaVJmWkU5U01OQUhNVmYKVTZWYUtnNTJFQkhKVUowc2lsODRTaFdMWUtHMEZWcDFNTG4wQzVvMEpDa3Vqb0pyd2NHUHhhcURpN091RHE2Q0lQZ0I0dWJtcE9naQpKZjZ2S2JTSThlQzRIKy91UGU3ZUFVS3R4RlN6WXh4UU5jdElSQ05pT3JNcStsN1JqU0g0TVkweGlabDZMTG1ZZ3V2NHVvZUhyM2RoCm51Vis3cy9SbzJSTkJuaEU0am1tR3hieEJ2SE1wcVZ6M2ljT3NvS2tFSjhUanhwMFFlSkhyc3NPdjNIT04xamdtVUVqbFpnbkRoS0wKK1RhVzI1Z1ZESlY0aWppa3FCcmxDMm1IRmM1Ym5OVlNoVFh2eVY4WXlHb3JTYTdUSEVRVVM0Z2hEaEV5S2lpaUJBdGhXalZTVENSbwpQK0xpSDJqNDQrU1N5VlVFSThjQ3lsQWhOZnpnZi9DN1d6TTNPZUVrQlNKQTU0dHRmd3dEdmwyZ1hyWHQ3MlBicnA4QTNtZmdTbXY1Cnl6Vmc5cFAwYWtzTEhRRzkyOERGZFV1VDk0RExIYUQvU1pjTXFTRjVhUXE1SFBCK1J0K1VBZnB1QWYrYTAxdHpINmNQUUlxNldyNEIKRGc2QmtUeGxyN3U4dTZ1OXQzL1BOUHY3QVFFVmN1Q09Nd2tjQUFBQUlHTklVazBBQUhvbUFBQ0FoQUFBK2dBQUFJRG9BQUIxTUFBQQo2bUFBQURxWUFBQVhjSnk2VVR3QUFBQjFVRXhVUlFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBCkFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUEKQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFHMC9SQkE1aXA0QUFBQWxkRkpPVXdBTEZ3VWFBd2FZKzlVemN2THBXTEx4TjRocApaSGI2SWNObXVWeFpFRGFIZUpaeHh6Q1U4cE9WQUFBQUFXSkxSMFFtV2dpWXRRQUFBQWx3U0ZsekFBQUxFZ0FBQ3hJQjB0MSsvQUFBCkFBZDBTVTFGQitVS0JRdzdBaXlWdjNJQUFBSEVlbFJZZEZKaGR5QndjbTltYVd4bElIUjVjR1VnYVdOakFBQTRqYVZUVzQ0Y0lRejgKNXhRNWd2R3pPVTRQTkZMdWY0RVlEUFBhMlVpYldHcTFLR083YkJmcGQ2M3AxekExVERBTVQ5Q3FwTTBJbUNha1RTOWpRMEUyUmdRNQpwTWlKQUhhSnV3dEF2dngvQXBDZnNTZk5Ta1lHM0lSWWhlRWZySHZWd1Nodm9CRzJPN01mV3ZyaC9hWk8yMGlqVU1ZRk15UnZEQXd0CldzcTZIS1JtUGlIWWVEa0N6K3g4RHgvSHdzOGFPTmJrNDV4akRFZDdCTHpnVjczajlvUnZRbzZQUk95YkNhcVkxN0FSUE9Bei9zMzkKTktnYWFvc3piUWY3TEZ3QXF3Vm45NEx6eG0yM3hzbmhhcUx2VzlxYnJDcDZpUWp0Z09YMkJENUNZTmNUT3drWld4dU42bENhQzB2ZApvWDVwREJuYk9sOXhaMGhDY0NYQWR3THA3d3p5K1dBd0JEMkxZUlNiUlNpS01Ic2k3ZU5CK0pjZkRPRHhKSjVzS0JqZUJPeWFVaUxDClowRm1xQnlSMHE0K2pGRG0yY3BrMkZ1QmlkL09QUDl0VmFKV1o2THFMRDR4MEI2ZDBkRWpJWldQVEpGTEQwYjltTnU0YWVXUENiSFkKOU5zeC8vbG9EbWgyMmR6YkhJbjI1RkhkWmw0OExZWWdaUVpTeUF4T3ViM29Mb3gySWppcHpVRGhFQmpYT2krV1VzNVZJUkozcWQvcApiZy83YmUydzM5d1g0ZjFIb2xjaHBqOEswaUNYOEJ1Y2xnQUFBQUZ2Y2s1VUFjK2lkNW9BQUFGdlNVUkJWSGphN1pYWmJzSkFFQVFkCmtrQXVFOGg5UXE3NS8xOGtCNkQxdmJ1ZTZaR2lyc2RkcWF0a0dWTVVoQkJDQ0NHRUVFSUlJVHNPSmlqVDRkRng4M0E2TzVIVE00ai8KL0VMS2VjTi9LZDhzbGdELzFZOUpybXNQNWRjUEtmanppOXhVVG0rM3AvWUZPNy9jM1lmSER3SXEyUHRGSHNQeko4RVVCSDU1RGk5ZQpCRklRK3N2WHppdXpnb3BrMVhkcFV6Q2dNQzhZRkJnWFJNeWJGa1NOR3haRVRwc1ZSQThiRlNUTW1oUWtqUm9VSkU2cUZ5UVBLaGRrCnpLa1daSTBwRm1ST3FSVmtEeWtWakpoUktSZzFvbEF3Y21KMGdmZUE5eVAwZm9tOGYwYmVINUsxODZmMHpmblBSTldmVWFEc1R5NVEKOXljV0dQaVRDa3o4Q1FWRy91Z0NNMzlrZ2FFL3FzRFVIMUZnN0I4c01QY1BGQUQ4dlFVUWYwOEJ5TjlaQVBOM0ZBRDlyUVZRZjBzQgoyTjhvZ1B0ckJlOTRmN1hBdzk5UkFQUzNGa0Q5TFFWZ2Y2TUE3cThWT1BnckJTNytvTURKdnk5dzgyOExIUDFGOFZISzU1ZWpueEJDCkNDR0VFRUlJSWYrQ0RmY0V5UzN6YnhUcEFBQUhzR1ZZU1daSlNTb0FDQUFBQUFvQUFBRUVBQUVBQUFDQUFBQUFBUUVFQUFFQUFBQ0EKQUFBQUFnRURBQU1BQUFDR0FBQUFFZ0VEQUFFQUFBQUJBQUFBR2dFRkFBRUFBQUNNQUFBQUd3RUZBQUVBQUFDVUFBQUFLQUVEQUFFQQpBQUFDQUFBQU1RRUNBQTBBQUFDY0FBQUFNZ0VDQUJRQUFBQ3FBQUFBYVljRUFBRUFBQUMrQUFBQTBBQUFBQWdBQ0FBSUFFZ0FBQUFCCkFBQUFTQUFBQUFFQUFBQkhTVTFRSURJdU1UQXVNalFBQURJd01qRTZNRGs2TXpBZ01URTZOVFE2TWpRQUFRQUJvQU1BQVFBQUFBRUEKQUFBQUFBQUFDQUFBQVFRQUFRQUFBQUFCQUFBQkFRUUFBUUFBQUFBQkFBQUNBUU1BQXdBQUFEWUJBQUFEQVFNQUFRQUFBQVlBQUFBRwpBUU1BQVFBQUFBWUFBQUFWQVFNQUFRQUFBQU1BQUFBQkFnUUFBUUFBQUR3QkFBQUNBZ1FBQVFBQUFITUdBQUFBQUFBQUNBQUlBQWdBCi85ai80QUFRU2taSlJnQUJBUUFBQVFBQkFBRC8yd0JEQUFnR0JnY0dCUWdIQndjSkNRZ0tEQlFOREFzTERCa1NFdzhVSFJvZkhoMGEKSEJ3Z0pDNG5JQ0lzSXh3Y0tEY3BMREF4TkRRMEh5YzVQVGd5UEM0ek5ETC8yd0JEQVFrSkNRd0xEQmdORFJneUlSd2hNakl5TWpJeQpNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qTC93QUFSQ0FFQUFRQURBU0lBCkFoRUJBeEVCLzhRQUh3QUFBUVVCQVFFQkFRRUFBQUFBQUFBQUFBRUNBd1FGQmdjSUNRb0wvOFFBdFJBQUFnRURBd0lFQXdVRkJBUUEKQUFGOUFRSURBQVFSQlJJaE1VRUdFMUZoQnlKeEZES0JrYUVJSTBLeHdSVlMwZkFrTTJKeWdna0tGaGNZR1JvbEppY29LU28wTlRZMwpPRGs2UTBSRlJrZElTVXBUVkZWV1YxaFpXbU5rWldabmFHbHFjM1IxZG5kNGVYcURoSVdHaDRpSmlwS1RsSldXbDVpWm1xS2pwS1dtCnA2aXBxckt6dExXMnQ3aTV1c0xEeE1YR3g4akp5dExUMU5YVzE5aloydUhpNCtUbDV1Zm82ZXJ4OHZQMDlmYjMrUG42LzhRQUh3RUEKQXdFQkFRRUJBUUVCQVFBQUFBQUFBQUVDQXdRRkJnY0lDUW9MLzhRQXRSRUFBZ0VDQkFRREJBY0ZCQVFBQVFKM0FBRUNBeEVFQlNFeApCaEpCVVFkaGNSTWlNb0VJRkVLUm9iSEJDU016VXZBVlluTFJDaFlrTk9FbDhSY1lHUm9tSnlncEtqVTJOemc1T2tORVJVWkhTRWxLClUxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2Z29PRWhZYUhpSW1La3BPVWxaYVhtSm1hb3FPa3BhYW5xS21xc3JPMHRiYTMKdUxtNndzUEV4Y2JIeU1uSzB0UFUxZGJYMk5uYTR1UGs1ZWJuNk9ucTh2UDA5ZmIzK1BuNi85b0FEQU1CQUFJUkF4RUFQd0Q1L29vbwpvQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnCkFvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUMKaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLSwpLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vCm9BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWcKQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQwppaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLCktLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb28Kb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZwpBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDCmlpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0sKS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vbwpvQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnCkFvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUMKaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLSwpLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vCm9BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWcKQW9vb29BS0tLS0FDaWlpZ0Fvb29vQUtLS0tBQ2lpaWdBb29vb0FLS0tLQUNpaWlnQW9vb29BS0tLS0FDaWlpZ0Fvb29vQS8vMlFDSQptNEg3QUFBQUpYUkZXSFJrWVhSbE9tTnlaV0YwWlFBeU1ESXhMVEV3TFRBMVZERXlPalU1T2pBeUt6QXdPakF3NHdRbS9nQUFBQ1YwClJWaDBaR0YwWlRwdGIyUnBabmtBTWpBeU1TMHhNQzB3TlZReE1qbzFPVG93TWlzd01Eb3dNSkpabmtJQUFBQWFkRVZZZEdWNGFXWTYKUW1sMGMxQmxjbE5oYlhCc1pRQTRMQ0E0TENBNEV1MCtKd0FBQUJGMFJWaDBaWGhwWmpwRGIyeHZjbE53WVdObEFERVBtd0pKQUFBQQpJWFJGV0hSbGVHbG1Pa1JoZEdWVWFXMWxBREl3TWpFNk1EazZNekFnTVRFNk5UUTZNalExRU9yMkFBQUFFM1JGV0hSbGVHbG1Pa1Y0CmFXWlBabVp6WlhRQU1Ua3dUSTd6d2dBQUFCUjBSVmgwWlhocFpqcEpiV0ZuWlV4bGJtZDBhQUF4TWpoQmRNTzFBQUFBRTNSRldIUmwKZUdsbU9rbHRZV2RsVjJsa2RHZ0FNVEk0a2dqVE9BQUFBQnAwUlZoMFpYaHBaanBUYjJaMGQyRnlaUUJIU1UxUUlESXVNVEF1TWpRQgpmVUxiQUFBQUpIUkZXSFJsZUdsbU9uUm9kVzFpYm1GcGJEcENhWFJ6VUdWeVUyRnRjR3hsQURnc0lEZ3NJRGdnRy9SVEFBQUFISFJGCldIUmxlR2xtT25Sb2RXMWlibUZwYkRwRGIyMXdjbVZ6YzJsdmJnQTIrV1Z3VndBQUFCNTBSVmgwWlhocFpqcDBhSFZ0WW01aGFXdzYKU1cxaFoyVk1aVzVuZEdnQU1qVTJVSEF3QXdBQUFCMTBSVmgwWlhocFpqcDBhSFZ0WW01aGFXdzZTVzFoWjJWWGFXUjBhQUF5TlRhSQpCdm9VQUFBQUtIUkZXSFJsZUdsbU9uUm9kVzFpYm1GcGJEcEtVRVZIU1c1MFpYSmphR0Z1WjJWR2IzSnRZWFFBTXpFMlcxS2ZCUUFBCkFDOTBSVmgwWlhocFpqcDBhSFZ0WW01aGFXdzZTbEJGUjBsdWRHVnlZMmhoYm1kbFJtOXliV0YwVEdWdVozUm9BREUyTlRGR212MzYKQUFBQUtuUkZXSFJsZUdsbU9uUm9kVzFpYm1GcGJEcFFhRzkwYjIxbGRISnBZMGx1ZEdWeWNISmxkR0YwYVc5dUFEWVNGWW9hQUFBQQpJSFJGV0hSbGVHbG1PblJvZFcxaWJtRnBiRHBUWVcxd2JHVnpVR1Z5VUdsNFpXd0FNK0hYelZvQUFBQWJkRVZZZEdsall6cGpiM0I1CmNtbG5hSFFBVUhWaWJHbGpJRVJ2YldGcGJyYVJNVnNBQUFBaWRFVllkR2xqWXpwa1pYTmpjbWx3ZEdsdmJnQkhTVTFRSUdKMWFXeDAKTFdsdUlITlNSMEpNWjBFVEFBQUFGWFJGV0hScFkyTTZiV0Z1ZFdaaFkzUjFjbVZ5QUVkSlRWQk1ucERLQUFBQURuUkZXSFJwWTJNNgpiVzlrWld3QWMxSkhRbHRnU1VNQUFBQUFTVVZPUks1Q1lJST0iIC8+Cjwvc3ZnPgo=)no-repeat right .5em center; background-size:1em; padding: .5em; padding-right: 1.5em; font-family: var(--headingFont); } input.inputtext, input.inputtext_light /*used for the newsletter signup */ { font-family:var(--mainFont); font-size:1em; padding:.5em; border:1px solid var(--borderColor); max-width:calc(100% - 2px - 0.5em); margin:0.25em; } p, ol, ul, dl, address { font-size:.875em; font-family:var(--mainFont); font-weight:400; letter-spacing:1px; } b, strong { font-weight:bold; font-size:inherit; } ol, ul { list-style:none; } li ul, li ol { font-size:1em; } ul.inline li { display:inline-block; } abbr { opacity:0.9; } abbr[title]:hover, dfn[title] { border-bottom:1px dotted #656565; cursor:help; } ins, mark { padding:0 0.125em; text-decoration:none; } sub, sup { position:relative; font-size:smaller; line-height:0; } em, em a, i, samp { font-style:italic; } ins, mark { padding:0 0.125em; text-decoration:none; } sub, sup { position:relative; font-size:smaller; line-height:0; } sup { vertical-align:super; } sub { vertical-align:sub; } del, s { text-decoration:line-through; } img { max-width:100%; height:auto; } /* Headings ------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-family:var(--headingFont); text-rendering:optimizelegibility; } h1 { font-size:2em; } h2 { font-size: 1.5em; } h3 { font-size:1.5em; } h4 { font-size: 1.2em; } h5 { font-size:1.2em; } h6 {} /* Specific headings ------------------------------------------------------- */ /* Links ------------------------------------------------------- */ a { text-decoration:none; color:inherit; /*makes the link the same colour as whatever the thing is that its in h3 h4 p etc*/ } a:hover { text-decoration:underline; } a.lnk:hover { text-decoration:underline; color:var(--mainColor); } a:active, a:visited { text-decoration:none; } /* Blockquote ------------------------------------------------------ */ blockquote { border-top:1px solid #f8f8f8; border-bottom:1px solid #f8f8f8; margin:0 0 1.5em 0; padding:2em; } blockquote p { font-size:1.6em; font-style:italic; margin-bottom:1em; } blockquote footer, blockquote cite { font-size:1.4em; line-height:1.5; } q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } cite { font-style:normal; } /* ------------------------------------------------------------------------------------- =Buttons ------------------------------------------------------------------------------------- */ .submit, a.btn { font-family:var(--altFont); font-size:1em; padding:.5em; border:none; text-align:center; border-color:inherit; cursor:pointer; border:none; color:white; text-align:center; text-transform:uppercase; background-color:var(--mainColor); } /* iphone specific overrides */ textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], input[type="image"], input#searchbox, .input-checkbox { -webkit-appearance:none; border-radius:0; font-size:1em; } td a.btn { display:block; } a.btn:hover { text-decoration:none; } .submit:hover, a.btn:hover {} /* ------------------------------------------------------------------------------------- =Tables ------------------------------------------------------------------------------------- */ /* Defaults ------------------------------------------------------- */ table { border:1px solid var(--borderColor); /*stops that stupid break between cells */ border-collapse:collapse; min-width:100%; font-size:1em; } thead, tbody { display:contents; } /*set table headers */ table th { font-family:var(--mainFont); color:var(--bgaltColor); font-weight:600; text-align:left; padding:.5em; width:auto; } /* for when no header has been used in the code !*/ table tbody tr:first-child td { font-family:var(--mainFont); color:black; text-align:left; padding:.5em; } table tr td { padding:.5em; vertical-align:middle; font-size:1em; } th, td { padding:.5em; /* overflow:hidden; */ text-overflow:ellipsis; /* white-space:nowrap; */ text-align:left; } tr:nth-child(even) td { background:#f8f8f8; } /*ensures font size for a p in a table is the same as it is for text that is NOT in a p block */ table tr td p, table tr td li { font-size:1em; } #pm .artp table td p { font-size:1em; /* max-width:1200px; */ } table th:first-child {} table tr:nth-child(odd) { background-color:var(--bgColor); } /* Order ------------------------------------------------------- */ table.order { width:100%; margin-bottom:1em; } .ordinfo a.btn.print { background-color:var(--bgColor); border-color:var(--bgColor); margin-left:1em; } /* Quotations ------------------------------------------------------- */ table.quotationlist, table.quotationlines, table.quotation { border-collapse:collapse; width:100%; max-width:100%; } table.quotationlist th.quoteNo, table.quotationlist th.ref, table.quotationlist th.value, table.quotationlist th.expires, table.quotationlist th.viewQuote, table.quotationlist th.addQuote { width:auto; } table.quotationlist a.btn[title="Download Quote"] { font-family:var(--mainFont); font-size:1em; padding:0; text-align:center; cursor:pointer; background-color:transparent; border:none; outline:none; color:var(--bgaltColor); display:inline-block; } /* ------------------------------------------------------------------------------------- =Forms ------------------------------------------------------------------------------------- */ /* Defaults ------------------------------------------------------- */ .form { padding:1em; } .form .bt {} .form .bt h3 {} .form h5 {} .form li select, .form li textarea, .form li input { grid-column:2; width:100%; } .form li { /* try grid layout */ display:grid; grid-template-columns:minmax(auto, 1fr) 3fr 1em; grid-gap:.25em; } .form label { grid-column:1; display:inline-block; vertical-align:top; text-align:right; } .form label img { display:inline-block; } .form li.help, .form li.info, .form li.reqmsg { grid-template-columns:1fr; } .form li.reqmsg{ color:var(--errorColor); } .form form {} .form li { margin-bottom:.5em; } .form ul.radio {} .form ul.radio li {} .form form input.submit { display:block; width:auto; } /* captcha */ .form .g-recaptcha{ grid-column:2; text-align:center; } /* fix for checklists*/ .form ul.check { max-width: 100%; columns:3; -webkit-columns: 3; -moz-columns:3; } /* Sign In ------------------------------------------------------- */ .form#psign{} /* as labels aren't being used - placeholders are */ .form#psign select, .form#psign textarea, .form#psign input { grid-column: 1; text-align: left; width:100%; } .form#psign .exstreqsubmit input.submit{ grid-column:1; justify-self:start; width:auto; margin-left:0; } .form#psign .exstfgtpwd { display:block; font-weight:400; } .form#psign .exstreglnk{ display:block; } .form#psign .exstreglnk h5{ font-weight:400; } .form#psign .exstreglnk h5 a{} /* Register ------------------------------------------------------- */ .form#preg{ width: 50%; margin:auto; } /* as labels aren't being used - placeholders are */ .form#preg select, .form#preg textarea, .form#preg input { grid-column: 1/3; justify-self:stretch; /* would rather not have to do this, but we display the width on the input element and that borks things */ width:100%; } .form#preg li.chkbox.subscribe{ display:block; } .form#preg li.chkbox.subscribe input{ width:auto; margin:.5em; } .form#preg input.submit{ grid-column:1; justify-self:start; margin-left:0; } .form#preg label{ text-align:left; } .form h5 { grid-column:1/3; margin:1em 0; } /* Forgotten Password ------------------------------------------------------- */ .form#pwrem{} /* Checkout (New Customer) ------------------------------------------------------- */ .form#pchkoutnewcust, .form#pguest{} .form#pguest select, .form#pguest textarea, .form#pguest input { grid-column:1/3; text-align: left; width:100%; } .form#pguest input.submit#submit{ grid-column:1; justify-self:start; width:auto; margin-left:0; } .form li.chkbox { display:inline-block; } .form li.chkbox #subscribe{ width:auto; } /* Checkout (Sign In) ------------------------------------------------------- */ .checkoutsignin #pm .form#psign, .checkoutsignin #pm .form#pchkoutnewcust, .checkoutsignin #pm .form#pguest { } /*existing customer pane */ .checkoutsignin #pm .form#psign ul.exstcust {} .checkoutsignin #pm .form#psign ul.exstcust label {} .checkoutsignin #pm .form#psign .exstnotme a { } /* ------------------------------------------------------------------------------------- =DepartmentTree / Menu ------------------------------------------------------------------------------------- */ #pt .dept { grid-column:1/6; position:relative; } #pt .dept .bt, #pt .dept .bb, #pt .dept .bc { width:1200px; margin:auto; /* font-size:14px; */ } #pt .dept ul { /* padding:0; */ list-style-type:none; list-style-position:outside; position:relative; z-index:1001; display:block; text-align:center; font-family:var(--altFont2); } #jnavleft li.pipe {} /***********************************************************************/ /* Tabs */ /***********************************************************************/ #jnavleft li.nav, #jnavleft li.navcurr { /*use same font as headings*/ text-transform:uppercase; display:inline-block; color:white; letter-spacing:2.5px; } #jnavleft li.nav:hover { color:var(--altColor); } #jnavleft li.nav a, #jnavleft li.nav h3, #jnavleft li.navcurr a, #jnavleft li.navcurr h3 { display:inline-block; /* font-size:1.2em; */ letter-spacing:2.5px; padding:1em .5em; font-family:var(--menuFont); } #jnavleft li.nav a:hover, #jnavleft li.nav h3:hover, #jnavleft li.navcurr h3:hover #jnavleft li.navcurr a:hover { color:var(--mainColor); } #jnavleft li.navcurr a, #jnavleft li.navcurr h3, #jnavleft li.nav h3 {} #jnavleft .navleft, #jnavleft .navright, #jnavleft .navleftcurr, #jnavleft .navrightcurr {} /***********************************************************************/ /* Drop down */ /***********************************************************************/ #jnavleft li.nav ul.snav, #jnavleft li.navcurr ul.snav { position:absolute; text-align:left; display:none; min-width:200px; background-color:#fff; padding:0 .5em; } #jnavleft li.nav ul.snav li:hover, #jnavleft li.navcurr ul.snav li:hover {} #jnavleft li.nav ul.snav li, #jnavleft li.navcurr ul.snav li { vertical-align:top; margin:.5em .25em; color:var(--mainColor); } #jnavleft li.nav ul.snav li a, #jnavleft li.navcurr ul.snav li a {} #jnavleft li.nav ul.snav li a:hover, #jnavleft li.navcurr ul.snav li a:hover {} /* Banners */ #jnavleft li.nav ul.snav li.bnrs, #jnavleft li.navcurr ul.snav li.bnrs {} #jnavleft li.nav ul.snav li.bnrs .bnr, #jnavleft li.navcurr ul.snav li.bnrs .bnr {} #jnavleft li.nav ul.snav li.bnrs .bnr a, #jnavleft li.navcurr ul.snav li.bnrs .bnr a {} /* Level 1 dept header */ #jnavleft li.nav ul.snav li a.deptIcon, #jnavleft li.navcurr ul.snav li a.deptIcon { padding:0; width:auto; } #jnavleft li.nav ul.snav li a.deptIcon img, #jnavleft li.navcurr ul.snav li a.deptIcon img { max-width:70px; } #jnavleft li.nav ul.snav li a, #jnavleft li.navcurr ul.snav li a { display:inline-block; vertical-align:middle; width:142px; } #jnavleft li.nav ul.snav li a, #jnavleft li.navcurr ul.snav li a { text-transform:capitalize; padding:0 .5em; } #jnavleft li.nav ul.snav li a:hover, #jnavleft li.navcurr ul.snav li a:hover { color:var(--altColor) } /* Level 2 depts */ #jnavleft li.nav ul.snav li a.l2, #jnavleft li.navcurr ul.snav li a.l2, #jnavleft li.nav ul.snav li a.seeall, #jnavleft li.navcurr ul.snav li a.seeall {} #jnavleft li.nav ul.snav li.depts a:hover, #jnavleft li.navcurr ul.snav li.depts a:hover {} #jnavleft li.nav ul.snav li.arts {} /* ------------------------------------------------------------------------------------- =Breadcrumb ------------------------------------------------------------------------------------- */ .bdcb { width:1200px; margin:auto; } .crumb { display:block; padding:.5em 0; text-align:left; font-size:.725em; } .crumb li { display:inline-block; vertical-align:middle; } .home .crumb { /* as a rule we don't want to show the breadcrumb on the home page, but it is written out anyway needs fixing by a dev */ display:none; } /*for the break between the crumb*/ .crumb li:after { content:">"; display:inline-block; color:var(--textColor); vertical-align:middle; margin:0 .5em; font-weight:400; font-size:0.750em; } .crumb li:last-child:after { content:""; margin:0; display:none; } .crumb a, .crumb h1, .crumb h3 { display:inline-block; /* unify font */ font-family:var(--mainFont); font-size:1em; color:var(--textColor); margin:0; } .crumb h1 span {} .bdcb .bt, .bdcb .bb { display:none; } .bdcb .bc ul {} .bdcb .bc ul li { display:inline; } ul.crumb li:first-child {} .bdcb .bc ul li a:hover {} .bdcb .bc ul li img {} /* ------------------------------------------------------------------------------------- =Jquery Base Overrides ------------------------------------------------------------------------------------- */ .validateTips { font-size:.688em; } /* Interaction states ----------------------------------*/ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border:1px solid var(--mainColor); background:var(--mainColor); font-weight:normal; color:white; } .ui-icon-background, .ui-state-active .ui-icon-background { border:var(--mainColor); background-color:white; } /* ------------------------------------------------------------------------------------- =OwlCarousel Overrides ------------------------------------------------------------------------------------- */ /* base settings */ .carousel { position:relative; margin-bottom:1em; } .owl-stage-outer {} /* this should be the title for the carousel */ .carousel h2 { display:inline-block; width:100%; vertical-align:middle; text-align:center; padding:.25em 0; margin: 0em 0; color:var(--textHeadingColor); } .carousel:hover { cursor:-moz-grab; cursor:-webkit-grab; cursor:grab; } .noNav .owl-controls { display:none; } .owl-controls {} .owl-carousel .owl-item img {} .owl-theme .owl-controls { /*going with a hardline of this is at the bottom of the carousel (not over anything) and centered */ text-align:center; margin-top:1em; font-size:.875em; display:none; } .owl-theme .owl-nav { /*going with a hardline of not showing the arrows/nav */ display:none; } .owl-nav .owl-prev, .owl-nav .owl-next {} .owl-prev {} .owl-next {} .owl-theme .owl-nav .disabled {} .owl-theme .owl-dots {} .owl-theme .owl-dots .owl-dot { display:inline-block; vertical-align:top; } .owl-theme .owl-dots .owl-dot span { display:inline-block; vertical-align:top; width:1em; height:1em; margin:.5em; border-radius:50%; background-color:white; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background-color:var(--mainColor); } .owl-theme .owl-item img {} /* image overlay (because we don't have a better way yet!) */ .carousel .imgcont { position:relative; display:grid; grid-template-columns:1fr; grid-template-rows:1fr; align-items:center; } /*first statement is to cover lack of css class being applied */ .carousel .imgcont a, .carousel .imgcont img, .carousel img.slideCont { grid-row:1; grid-column:1; padding:0; } /*first statement is to cover lack of css class being applied */ .carousel .imgcont div, .carousel .slideCont { grid-row:1; grid-column:1; display:inline-block; vertical-align:middle; text-align:center; background-color:rgba(0, 0, 0, 0.8); background-clip:content-box; color:var(--white); padding:2px; margin:auto; min-width:25%; } .carousel .imgcont div h2, .carousel .slideCont h2, .carousel .imgcont div h3, .carousel .slideCont h3, .carousel .imgcont div p, .carousel .slideCont p { width:auto; margin:.5em; color:white; } .carousel .imgcont h2 { } .carousel .imgcont p { margin:.5em; } /* Product Carousels -------------------------------------------------------*/ /* the layout is different so need to undo some of the default settings and re-order */ /* even MORE irritating is the fact that this is done differently for carousels on the product page! */ /* to cope with hover effects */ .carousel.prod .owl-stage-outer{ padding:1em 0; } .carousel .fprd { display:grid; grid-template-columns:1fr; position:relative; background-color:white; } .home .carousel .fprd { display:block; } /* mini hack for the fact that we aren't consistent in how we write out product info !*/ .home .carousel .fprd .bt, .home .carousel .fprd .bb {} .carousel .fprd .prevprice { /* due to the carousel dictating the width of the container this may not fit! */ } /* flags */ #pm .carousel .piflags, #pm .carousel .flag { grid-row:1; grid-column:1/4; text-align:left; vertical-align:top; align-items:start; align-self:start; padding:.5em; box-shadow:none; border:none; } #pm .carousel .piflags img, #pm .carousel .flag img { width:auto; height:auto; } /* ------------------------------------------------------------------------------------- =AccordionBase ------------------------------------------------------------------------------------- */ ul.accordion {} #pm li.address, #pm li.inst {} /* Header including hide/show icons ------------------------------------------------------- */ .accordion .header, .accordion .fixedheader { font-family:var(--headingFont); color:var(--mainColor); font-size:1em; margin:0; position:relative; cursor:pointer; padding:.5em; border:1px solid var(--borderColor); margin-bottom:.5em; } .accordion .header .showplus {} .accordion .header .showminus { display:none; } .accordion .header.current .showplus { display:none; } .accordion .header.current .showminus { display:block; } li.subhead {} /*to deal with the multi skus? */ .accordion .fixedheader.initial { border: none; padding: 0; margin: 0; } .accordion .fixedpane.initial select { width: 100%; max-width: 100%; margin: 0; margin-bottom: 1em; color:var(--mainColor); font-size: 1em; position: relative; cursor: pointer; padding: .5em; border: 1px solid var(--borderColor); text-align: left; } /* Panes ------------------------------------------------------- */ #pm ul.accordion li.pane.first { } #pm ul.accordion li.pane { } #pm ul.accordion li.pane p {} #pm ul.accordion li.pane ul {} #pm ul.accordion li.pane li {} #pm ul li.title {} /* ------------------------------------------------------------------------------------- =Autocomplete ------------------------------------------------------------------------------------- */ .ui-helper-hidden-accessible { display:none; } .ui-widget.ui-widget-content.ui-autocomplete { width:322px !important; margin:auto; padding:0; z-index:999999 !important; border-radius:0; max-height:332px; overflow-x:hidden; overflow-y:scroll; border:1px solid #13816d; z-index:2000; background:var(--bgaltColor); } .ui-autocomplete li.ui-menu-item { width:100%; display:inline-block; cursor:pointer; margin:0; } .ui-menu-item a { display:inline-block; width:98%; padding:0 1%; } .ui-autocomplete li { list-style:none; } .ui-autocomplete li:hover {} .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { margin:0; border-radius:0; border:none; outline:none; } .ui-menu-item a.ui-state-active {} .foundProduct { display:inline-block; vertical-align:top; width:20%; } .foundProduct img { width:100%; max-width:80px; height:auto; } .foundProductTitle { display:inline-block; width:78%; font-size:.750em; margin:1%; } .foundProductRef { display:none; } .foundProductDesc { display:none; } .foundProductDesc {} .ui-autocomplete mark {} /* ------------------------------------------------------------------------------------- =Email when back in stock EWIS ------------------------------------------------------------------------------------- */ /* take care as the html markup that writes this thing out is a bit borked! */ #ewis h3 { font-weight:600; } #ewis label { color:var(--bgColor); } .fprd .ewis { display:none; } a.lnk.ewisopen, a.lnk.ewis { display: inline-block; /* height:auto; */ color:var(--bgaltColor); background-color:var(--mainColor); text-align:center; padding:.5em .25em; text-transform:capitalize; } .lnk.ewisopen:hover { text-decoration:none; } /* ------------------------------------------------------------------------------------- =HoverBsket ------------------------------------------------------------------------------------- */ .hoverbskt { padding:0.5em; background-color:white; border:1px solid var(--bgaltColor); /* box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5); */ width:calc(232px - 1em); z-index: 1002; } .hoverbskt h3 { font-size:1.25em; padding:.25em; text-align:center; /* border-bottom:1px solid #555; */ margin:0 0 0.5em 0; } .hoverbskt .lines {} .hoverbskt .lines .item { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .hoverbskt .lines .item:last-child {} .hoverbskt .formupdate {} .hoverbskt .formupdate input {} .hoverbskt .formupdate input.submitQtyChange {} .hoverbskt a, .hoverbsktadd a { font-size:0.825em; } .hoverbskt a.btn { width:95%; display:inline-block; } .hoverbskt .lines .item a.title {grid-row:1;grid-column:2;} .hoverbskt .lines .item img {grid-row:1;grid-column:1;} .hoverbskt .lines .item p.descr {} .hoverbskt .lines .item p.qty { grid-row:2; grid-column:1/-1; text-align:right; padding:0.25em 0; font-size:0.8em; } .hoverbskt .lines .item p.price { grid-row:3; grid-column:1/-1; text-align:right; font-size:0.8em; } .hoverbskt h4.count { font-size:1em; text-align:right; padding:0.25em 0; /* border-top:1px solid #555; */ margin:0.25em 0 0 0; } .hoverbskt h4.total { font-size:1em; padding:0.25em 0; text-align:right; } /* ------------------------------------------------------------------------------------- =PopupDialog / Popup Add to Basket / Direct Despatch ------------------------------------------------------------------------------------- */ .hoverbsktadd, #popupdialog { position:fixed; top:25%; left:25%; width:calc(50% - 1em); padding:.5em; z-index:2000; border:2px #1d1d1d solid; background-color:var(--bgaltColor); display:none; text-align:center; } .hoverbsktadd .item, #popupdialog .item { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-gap:.25em; } .hoverbsktadd .item img, #popupdialog .item img { /* why won't this element align as i want it too!!!! */ grid-column:1/3; grid-row:1; } .hoverbsktadd h3, #popupdialog h3 {} .hoverbsktadd a, #popupdialog a {} .hoverbsktadd .item a.title, #popupdialog .item .title { grid-column:1/3; grid-row:2; text-align:center; } .hoverbsktadd .item p.qty, #popupdialog .item p.qty { grid-column:1; grid-row:3; text-align:right; font-size:.875em; } .hoverbsktadd .item p.price, #popupdialog .item p.price { grid-column:2; grid-row:3; text-align:left; font-weight:600; } /* this element needs a class */ .hoverbsktadd a[title="Checkout"] { font-family:var(--mainFont); font-weight:600; font-size:1em; margin:.5em; padding:.5em .5em; text-align:center; cursor:pointer; border:none; outline:none; color:white; font-weight:600; display:inline-block; vertical-align:middle; background-color:var(--checkoutButtons); } .hoverbsktadd a[title="Checkout"]:hover {} #popupdialog .useraccount {} #popupdialog .useraccount input {} #popupdialog .useraccount a {} /* media queries for viewports start BIG and go small outside of this it used the default --------------------------------------- */ /* under 400px wide, go wider */ @media screen and (max-width:400px ) { .hoverbsktadd, #popupdialog { left:2.5%; width:calc(95% - 1em); } } /* ------------------------------------------------------------------------------------- =Messages ------------------------------------------------------------------------------------- */ #mess { background-color:white; padding:1em; margin:1em 0; } #mess .warn { color:var(--errorColor); } #mess .info { color:var(--errorColor); } /* OOS and DDS popup 20/11/14 */ .outofstockdialog, .directdespatchdialog {} .outofstockdialog .outofstockpopup, .directdespatchdialog .directdespatchpopup {} .outofstockdialog span, .directdespatchdialog span {} .outofstockdialog .outofstockpopup .oosheader, .directdespatchdialog .ddheader {} .outofstockdialog .outofstockpopup .oosmessage, .directdespatchdialog .ddmessage {} .outofstockdialog .outofstockpopup .oosmessage .oosdate, .directdespatchdialog .dddate {} .ui-dialog-titlebar {} .outofstockdialog .ui-widget-content {} .outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .directdespatchdialog .ui-widget-content .ui-dialog-buttonset button {} /* Out of Stock, Direct Despatch ------------------------------------------------------- */ .ui-dialog.outofstockdialog, .ui-dialog.directdespatchdialog {} .ui-dialog.outofstockdialog .outofstockpopup, .ui-dialog.directdespatchdialog .directdespatchpopup-pane {} .ui-dialog.outofstockdialog .outofstockpopup .oosheader, .ui-dialog.directdespatchdialog .ui-widget-header {} .ui-dialog.directdespatchdialog .ui-widget-header {} .ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {} .ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {} .ui-dialog.outofstockdialog .ui-dialog-titlebar {} .ui-dialog.outofstockdialog .ui-widget-content, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane {} .ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {} .ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {} .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {} .directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {} #directdespatchpopup-pane span.ddproduct {} .ddmessage {} .ddmessage span.dddatemessage {} .ddmessage span.dddate {} /* ------------------------------------------------------------------------------------- =SiteContainer ------------------------------------------------------------------------------------- */ #site { width:100%; /* max-width:1200px; */ margin:auto; font-size:16px; font-weight:normal; text-align:left; -webkit-text-size-adjust:100%; background:#fff; } /* ------------------------------------------------------------------------------------- =FIXEDTop Panel ------------------------------------------------------------------------------------- */ #ptf { top:0px; z-index:2002; width:100%; min-width:1200px; color:var(--textColor); } #ptf .ext { width:1280px; margin:0 auto; position:relative; text-align:right; display:grid; } /* top links ------------------------------------------------------- */ #ptf .info { display:inline-block; vertical-align:middle; grid-row:1; grid-column:2; } #ptf .info .bt { display:none; } #ptf .info li { display:inline-block; font-size:.813em; padding:0 .5em; } #ptf .info li a { display:inline-block; padding:1em 0; } #ptf .info li a:hover {} /* Top content/contact ------------------------------------------------------- */ #ptf .art { display:inline-block; vertical-align:middle; } #ptf .artp, #ptf .imgcont { display:inline-block; vertical-align:middle; font-size:.813em; padding:0 .5em; } /* vat switch ------------------------------------------------------- */ .vatsw { grid-column:1; grid-row:1; height:37px; margin-left:20px; font-weight:600; } .vatsw p { float:left; line-height:37px; } #vatswitch { height:37px; font-size:0.7em; letter-spacing:1px; } .vatsw form input { width:34px; height:24px; margin:6px 0 7px; background-color:var(--bgColor); -webkit-appearance:none; } .vatsw form input[checked="checked"] { background-image:url('/csi/3440640/4259840/i/bdr/vatswitch.png'); background-repeat:no-repeat; } #vatswitch div:nth-child(1) {} #vatswitch div:nth-child(1) label { float:left; margin-right:5px; border-radius:5px 0 0 5px; line-height:37px; } #vat_yes { float:left; border-radius:5px 0 0 5px; } #vatswitch div:nth-child(2) { float:left; } #vatswitch div:nth-child(2) label { float:right; margin-left:5px; line-height:37px; } #vat_no { float:right; border-radius:0 5px 5px 0; } /* ------------------------------------------------------------------------------------- =PanelTop ------------------------------------------------------------------------------------- */ #pt { position:fixed; width:100%; min-width:1130px; background-color:white; color:white; transition:.2s; z-index:1002; padding-top:1em; /* border-bottom:1px solid var(--borderColor); */ } #pt .ext { margin:0em auto; padding:0; position:relative; width:calc(1280px - 2em); display:grid; grid-template-columns:250px 1fr 1.5fr 1fr 250px; grid-template-rows:auto auto auto; align-items:center; } #pt ul { /* typically we dont want bullet styles*/ list-style:none; list-style-position:inside; } #pt .info { color:var(--textColor); } #pt .bskt { color:var(--textColor); } #pt #jnavleft li.nav, #pt #jnavleft li.navcurr { /*use same font as headings*/ text-transform:uppercase; display:inline-block; /* font-size:.875em; */ color:var(--textColor); letter-spacing:2.5px; margin: 1em .25em; } #site.home #pt #jnavleft li.nav, #site.home #pt #jnavleft li.navcurr { color:white; } /* Site Logo ------------------------------------------------------- */ #pt .pbnr {} #pt .pbnr { grid-column:3; grid-row:1/3; align-self:center; text-align:center; margin:auto; } #pt .pbnr .logo { margin:1em 0 0 0; text-align:center; } /* signin and register ------------------------------------------------------- */ #ptf .info:first-of-type { grid-row:1; grid-column:3; } #pt .info { grid-row:1; grid-column:4; font-size:0.825em; text-align:right; align-self:baseline; } #site.home #pt .info { color:white; } #pt .info ul {} #pt .info li { display:inline-block; margin-left:0.5em; } #pt .info li a { font-family:var(--altFont); } #pt .info li.pipe { display:none; } /*quick order */ #pt .qord {} #pt .qord .bt {} #pt .qord .bc {} #pt .qord input.inputtext {} #pt .qord input.inputtext_light {} #pt .qord label {} #pt .qord #qosubmit {} /* Search ------------------------------------------------------- */ #pt .search { grid-column:1; grid-row:1; display:inline-block; } #pt .search .bc { padding:0; } #pt .search form {} #pt .search label { display:none; } #pt #searchbox { /* border:1px solid var(--borderColor) !important; */ border-right:none; display:inline-block; vertical-align:middle; background:transparent; outline:0; width:81%; padding:0.5em 0.5em 0.5em 1em; margin:0; } #site.home #pt #searchbox { background:transparent; outline:0; width:81%; padding:0.5em 0.5em 0.5em 1em; margin:0; color:white; } /*sort the placeholder color*/ #pt #searchbox::-webkit-input-placeholder, #pt #searchbox:-moz-placeholder, #pt #searchbox::-moz-placeholder, #pt #searchbox:-ms-input-placeholder, #pt #searchbox::-ms-input-placeholder { opacity:1; color:white; } #pt #searchbox:focus { outline:0; border:none; } #pt .search input#search { display:inline-block; vertical-align:middle; outline:0; background-color:white; width:36px; border:1px solid var(--borderColor); border-left:none; border-left:none; } #pt .search input[type="submit"] {} /* Basket ------------------------------------------------------- */ #pt .bskt { text-align:center; margin-left:auto; align-self:baseline; grid-column:5; grid-row:1; padding:0; /*width needs to be set and match the hoverbasket width */ width:200px; } #site.home #pt .bskt { color:white; } #pt .bskt .bc {} #pt .bskt .bt {} #pt .bskt h3, #pt .bskt h4 { font-size:0.825em; padding:.5em; } #pt .bskt #mybskt { display:grid; padding:0 .5em; grid-template-columns:1fr 1fr; grid-gap:.25em; } #pt .bskt #mybskt h4 { grid-column:1/-1; /* display:none; */ } #pt .bskt #bsktitems { font-size:12px; font-family:var(--altFont); } #pt .bskt #bsktitems span {} #pt .bskt #bsktvalue { font-size:12px; font-family:var(--altFont); } #pt .bskt #bsktvalue span {} #pt .bskt span { font-family:var(--altFont); } #pt .bskt a.btn { /* background-color:transparent; */ } #viewbskt { grid-column:1 / -1; padding:0.25em; } #pt .bskt a.btn img { width:45px; float:right; } /* stick header on scroll ------------------------------------------------------- */ /* The sticky class is added to the navbar with JS when it reaches its scroll position */ #site.home #pt { position:fixed; z-index:9999; top:0; left:0; background-color:transparent; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; border-bottom:none; } #site.home #pt .bnr img{ filter:invert(); } #site.home #pt.sticky .bnr img{ filter:none; } /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */ #pt.sticky + #pc {} #site.home #pt.sticky, #pt.sticky { position:fixed; z-index:1002; top:0; left:0; border:1px solid var(--borderColor); background-color:white; } /* define new grid */ #pt.sticky .ext {} /* hide any elements that are not wanted to be displayed in minified header */ #pt.sticky .info, #pt.sticky .art {} #pt.sticky #searchbox { /* border:1px solid var(--borderColor); */ color:black; } /*sort the placeholder color*/ #pt.sticky #searchbox::-webkit-input-placeholder, #pt.sticky #searchbox:-moz-placeholder, #pt.sticky #searchbox::-moz-placeholder, #pt.sticky #searchbox:-ms-input-placeholder, #pt.sticky #searchbox::-ms-input-placeholder { opacity:1; color:black; } /* reduce size of logo */ #pt.sticky .pbnr { max-width:150px; } #pt.sticky .info, #site.home #pt.sticky .info { color:black; } #pt.sticky .bskt, #site.home #pt.sticky .bskt { color:black; } #pt.sticky .pbnr img {} #pt.sticky #jnavleft li.nav, #pt.sticky #jnavleft li.navcurr, #site.home #pt.sticky #jnavleft li.nav, #site.home #pt.sticky #jnavleft li.navcurr { /*use same font as headings*/ text-transform:uppercase; display:inline-block; font-size:.875em; color:black; letter-spacing:2.5px; } /* ------------------------------------------------------------------------------------- =CentrePanel ------------------------------------------------------------------------------------- */ #pc { width: 100%; margin:0em auto; display:block; position:relative; } #pc .bc { margin: 0 auto; position: relative; background-color:white; } #pc .arts, #pc .pbnr {} #pc .arts .bc, #pc .pbnr .bc { width:auto; } #site.home #pc {} #pc .bc .pbnr {} #pc .bc .pbnr img {} #pc .bc .pbnr h3 {} /* top message all page stylings */ #pc .topMessage { border: 1px var(--mainColor) solid; padding: .5em; margin: .5em 0; text-align: center; } #pc .topMessage { border: 1px var(--mainColor) solid; padding: .5em; margin: 1em auto; width:1280px; text-align: center; } #pc .topMessage h2 { font-family: var(--altFont2); background-color: #fff; } #pc .topMessage .artp { padding: .5em; text-align: center; background-color: #fff; } /* ------------------------------------------------------------------------------------- =MainPanel ------------------------------------------------------------------------------------- */ #pmid { margin:0 auto; padding:0; position:relative; min-height:60vh; background-color:white; } #pm { margin:0 auto; position:relative; } /*should only be pmwide if a left panel is in use*/ #pm.pmwide { width:80%; } #pm.pmfull { width:1200px; background-color:transparent; } #pm .pmind {} /* ------------------------------------------------------------------------------------- =RightPanel ------------------------------------------------------------------------------------- */ #pr { width:25%; padding:1em; } /* ------------------------------------------------------------------------------------- =LeftPanel ------------------------------------------------------------------------------------- */ #pl { width:calc(20% - 1em); margin-right:1em; font-size:0.8em; } #pl .bt h3 { font-size:1em; padding:.5em; font-family:var(--mainFont); background-color:var(--mainColor); color:white; } #pl .bc {} #pl .bc #sldiv {} #pl p {} #pl a {} #pl a:hover {} #pl .bb {} #pl .dept {} #pl .dept .bc {} #pl .dept .bc li {} #pl .dept ul {} #pl .dept ul li {} #pl .dept ul li a {} #pl .pbnr {} #pl .bnr {} #pl .bnr span {} /* ------------------------------------------------------------------------------------- =FooterPanel ------------------------------------------------------------------------------------- */ #pf { width:100%; min-width:1200px; margin:0em auto; padding:0; position:relative; background-color:var(--bgaltColor); color:var(--mainColor); position:relative; } #pf .ext { width:1200px; display:grid; grid-template-columns:1fr 1fr 1fr; margin: 0 auto; position: relative; align-items:center; padding:3em 0; } #pf .ext .pbnr img{ max-width:100px; margin:auto; text-align:center;} #pf .ext .news {} #pf .ext .news .bc .news_input_container {} #pf .ext .news form .inputtext, #pf .ext .news form .inputtext_light { margin-left:0; width: 275px; } #pf .ext .news form .submit {} #pf .ext .news h3 { display:none; /* text-align:center; */ color:var(--textHeadingColor); margin-bottom:.5em; } #pf .ext .news label { display: none; font-size:.825em; color:var(--textHeadingColor); font-family:var(--mainFont); margin-bottom:1em; } #pf ul {} #pf ul li {} #pf ul li:last-child {} /* Typography ------------------------------------------------------- */ #pf h2, #pf h3, #pf h4, #pf span, #pf strong {} #pf a, #pf p { text-align:center; } #pf a:hover {} #pf h2, #pf h3, #pf h4 {} #pf li {} /* Articles ------------------------------------------------------- */ #pf .art {} /* social icons */ #pf .art#a111804421 ul{ text-align:center; } #pf .art#a111804421 li{ display:inline-block; font-size:2em; padding:1em; } /* Banners ------------------------------------------------------- */ #pf .pbnr {} #pf .pbnr img {} /* Info ------------------------------------------------------- */ #pf .info {} /* Client specific ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =BottomPanel ------------------------------------------------------------------------------------- */ #pb { width:100%; min-width:1200px; position:relative; margin:0em auto; padding:0; background-color:var(--bgaltColor2); } #pb .ext { width:1200px; margin:0 auto; position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:1em; padding:3em 0 2em 0; } #pb .pipe { display:none; } #pb ul { list-style:none; } #pb .info h3, #pb .art h2, #pb .news h3, #pb .pbnr h3 { font-size:1.125em; padding-bottom:1em; color:white; font-weight:600; text-transform:uppercase; color:var(--altColor); } #pb .info a:hover, #pb .art a:hover { text-decoration:underline; } /* Typography ------------------------------------------------------- */ #pb h2, #pb h3, #pb h4, #pb span, #pb strong {} #pb a, #pb p {} #pb a:hover {} #pb h2, #pb h3, #pb h4 {} #pb p, #pb li { padding:0 0 1em 0; } /* Articles ------------------------------------------------------- */ #pb .art {} /* Banners ------------------------------------------------------- */ #pb .pbnr {} /* logo */ #pb .pbnr#p41910280 { grid-row:1; grid-column:2; padding:0 0 2em 0; } #pb .pbnr .bc {} /* Info ------------------------------------------------------- */ #pb .info {} /* Social Icons ------------------------------------------------------- */ #pb .pbnr#p41975808 { grid-column:3; align-self:center; } #pb .pbnr#p41975808 .bc { display:grid; grid-auto-flow:row; grid-template-columns:1fr 1fr 1fr; align-items:center; text-align:center; } #pb .pbnr#p41975808 .bc img { max-width:32px; } /* Newsletter signup; ------------------------------------------------------- */ #pb .news { align-self:center; text-align:center; } #pb .news .bc #email { display:inline-block; vertical-align:middle; color:var(--mainColor); outline:0; } #pb .news .bc #subscribe { border:none; vertical-align:middle; background-color:var(--altColor); text-align:center; align-items:center; } #pb .news .bc label { display:none; } #pb .news .bc .news_input_container {} #pb .news .bc .news_input_container .submit {} /* Client specific ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =FIXEDBottom Panel ------------------------------------------------------------------------------------- */ #pbf { width:100%; min-width:1200px; margin:0em auto; padding:0; position:relative; background-color:var(--bgaltColor2); position:relative; } #pbf .ext { width:1200px; margin:0 auto; position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; padding:1em 0; } #pbf .info { grid-column:1 / -1; } #pbf .info .bt { display:none; } #pbf .info .bc ul li { display:inline-block; padding:1em; } #pbf .cookie{ grid-column:1/-1; font-size:.725em; } /* ------------------------------------------------------------------------------------- =Copyright and Managed by ------------------------------------------------------------------------------------- */ .etailcopy { width:100%; color:var(--textColor2); display:grid; grid-template-columns:1fr 1fr; grid-column:1/-1; margin:1em 0 ; font-size:.725em; } /* note to use grid layout */ p.copy {} p.etail { text-align:right; } p.copy { display:inline-block; margin-right:1em; } p.copy span {} /* ------------------------------------------------------------------------------------- =Articles ------------------------------------------------------------------------------------- */ /* Base Article Typography ------------------------------------------------------- */ /*Unified heading colors*/ .art h2, .art h3, .art h4, .art h5 { color:var(--textHeadingColor); margin-bottom:.5em; } /*to ensure a clear break after a paragraph*/ .artp p { /* margin:initial; */ display:block; margin-bottom:1em; } .artp ul { list-style-type:disc; margin:1em 1.5em; } .artp ul.nobullets { list-style-type:none; margin:.5em 0; } .artp ol { list-style-type:decimal; margin:1em 1.5em; } .artp img {} .artp a { display:inline-block; } /* ------------------------------------------------------------------------------------- =Banners ------------------------------------------------------------------------------------- */ .bnr { position:relative; } /* for text over image positioning */ .bnr a { display: block; width: 100%; height: auto; } .toi { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; background-color: #fff; } .bnr:hover .toi { opacity: 0.8; } .toi a { color var(--textHeadingColor); font-size: 1.2em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } /* ------------------------------------------------------------------------------------- =FilterSearch ------------------------------------------------------------------------------------- */ #pl .filter { border:1px var(--bgColor) solid; } #pl .filter .bc .ContainerPanel .HeaderContent, #pl .filter .bc .ContainerPanel .HeaderContentClose {} #pl .filter .bc .ContainerPanel .Content .citem {} #pl .filter .bc .ContainerPanel .Content .citem:hover {} #pl .filter .bc .ContainerPanel .Content .citem span {} #pl .filter .bc .ContainerPanel .Content {} #pl .filter .bc .ContainerPanel .Content .showmore { cursor:pointer; } .filter .bt { display:none; } .filter .bt h3 { display:inline-table; } .longattrsection .items { overflow-x:hidden; -ms-overflow-x:scroll; margin-bottom:1em; } .HeaderContent { font-size:1em; padding:.5em; font-family:var(--mainFont); /* background-color:var(--mainColor); */ color:white; position:relative; cursor:pointer; } .HeaderContent:after { content:'\f146'; font-family:"Font Awesome 5 Free"; margin-right:.5em; font-size:1em; position:absolute; right:0; top:.5em; } .HeaderContent.collapsed:after { content:'\f0fe'; font-family:"Font Awesome 5 Free"; margin-right:.5em; font-size:1em; position:absolute; right:0; top:.5em; } .HeaderContent h5 { font-size:1em; color:var(--textHeadingColor); font-weight:600; margin:0; text-transform:uppercase; } .collapsed h5 {} .collapsed h5:hover {} .items { margin:.5em 0 } .citem { color:var(--textColor); padding:.5em; margin:0; cursor:pointer; } .citem:before { font-family:"Font Awesome 5 Free"; margin-right:.5em; font-size:1em; display:inline-block; content:'\f0c8'; } .citemselected:before { font-family:"Font Awesome 5 Free"; margin-right:.5em; font-size:1em; display:inline-block; content:'\f14a'; } .citem:empty { display:none; } .citem:hover {} .citemselected {} .citemselected:hover {} #divPriceRangeDisplay { text-align:center; padding:.5em; } #sldiv { margin:1em; } #resetfs { padding:1em 0px; border-bottom:1px solid var(--borderColor); } #resetfs h5 { font-size:14px; color:var(--mainColor); font-weight:600; background:url('/csi/3440640/4259840/i/bdr/selectbox_remove.png') no-repeat 10px center; padding-left:30px; text-transform:uppercase; cursor:pointer; } /* ------------------------------------------------------------------------------------- =SearchHeader / SearchFooter ------------------------------------------------------------------------------------- */ .deptwrap {} .searchheader, .searchfooter { padding:.5em; color:var(--textColor); background-color:white; margin:0.5em 0; } .searchheader .bc, .searchfooter .bc { display:grid; grid-template-columns:15% 25% 20% auto; } #pm.pmfull .searchheader .bc, #pm.pmfull .searchfooter {} .searchheader label, .searchfooter label { font-size:.825em; margin-right:.5em; } /* results found */ .searchheader h5#rescou { font-family:var(--mainFont); font-size:.825em; display:inline-block; vertical-align:middle; padding:0.6em 0 0 0; } /* sort by */ .searchheader #sorpan, .searchheader form[name="dispord"] { display:inline-block; vertical-align:middle; margin-right:.5em; } /* results per page */ .searchheader #rpppan { display:inline-block; vertical-align:middle; margin-right:.5em; } .searchheader .search { /* for unknown reasons we re-write out the searchbox in the search header*/ display:none; } .searchheader .paging { padding:.5em 0; text-align:right; } /*writing out "page" is a little daft */ .searchheader .paging label, .searchfooter .paging label { display:none; font-size:.825em; } .searchheader .paging span, .searchheader .paging a, .searchfooter .paging span, .searchfooter .paging a { font-size:.825em; display:inline-block; margin-right:.5em; } .searchheader .paging a, .searchfooter .paging a { } /*this should be the current page */ .searchheader .paging span, .searchfooter .paging span { font-weight:600; } .searchheader .search input#searchbox {} .searchheader .search input.submit {} .searchheader label[for="rpp"] {} .searchfooter .paging { text-align:right; } #sr { /* use grid layout */ display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap: 1em; position:relative; } .pmfull #sr { grid-template-columns:1fr 1fr 1fr 1fr; } /* ------------------------------------------------------------------------------------- =FeaturedProducts ------------------------------------------------------------------------------------- */ /* Base settings ------------------------------------------------------- */ #deptlist .fprdcont, #searchlist .fprdcont {} .fprd { /* border:1px solid var(--borderColor); */ padding:.5em; } .fprd:hover {} /* unfortunately there are cases where a .bc is present inside .fprd*/ .fprd .bc { display:grid; grid-template-columns:1fr 1fr; position:relative; background-color:white; } .fprd .bc .fprdimg { grid-column:1 / 4; text-align:center; padding:.5em; background:#fff; } /* image ------------------------------------------------------- */ .fprd a.img { grid-column:1/4; grid-row:1; text-align:center; padding:.5em; } .fprd a.img img { max-width:100%; margin:0 !important; } .fprd .fprdimg { grid-row:1; text-align:center; padding:.5em; } .fprd .fprdimg a.img { display:inline-block; padding:0; } .fprd .fprdimg img { max-width:100%; } /* title ------------------------------------------------------- */ .fprd .fprdtitle, .fprd a.title { font-family:var(--headingFont); grid-column:1/-1; grid-row:2; padding:.5em 0; text-align:center; color:var(--textHeadingColor); align-self:start; /*min-height set based on 3 line titles - depends on font */ min-height: 3em; /* font-size:0.8em; */ } .fprd .fprddescr { grid-column:1 / -1; } .fprd .strap {} /* pricing structure ------------------------------------------------------- */ .fprd .rrp { grid-column:1; grid-row:3; font-size:.875em; text-align:left; padding-left:.5em; align-self:end; } .fprd .rrp h6 { text-decoration:line-through; text-decoration-color:var(--mainColor); color:var(--mainColor); } .fprd .price { grid-column:1 / -1; grid-row:3; text-align:center; align-self:end; } .fprd .prevprice { grid-column:2; grid-row:3; text-align:center; align-self:end; } .fprd .prevprice h6 { font-size: 1.4em; text-decoration:line-through; } .fprd .offer { grid-column:1; grid-row:3; text-align:center; align-self:end; } .fprd .offer h6 { font-size: 1.4em; color:var(--mainColor) } .fprd .offer label, .fprd .prevprice label{ display:none; } .fprd .price label { display:none; } .fprd label { font-size:.725em; } .fprd .price h6 { font-size: 1.4em; font-family:var(--mainFont); /* font-weight:600; */ } /* this is the vat info */ .fprd h6 span { font-size:.5em; } /* pricebreaks ------------------------------------------------------- */ .pricebreak {} .pricebreak tr { display:table-row; grid-template-columns:repeat(auto-fit, minmax(0, 1fr) ); } .pricebreak th {} /* Unit specifics ------------------------------------------------------- */ .fprd .unit {} .fprd .unit label, .fprd .unit h6 {} .fprd .unit label {} .fprd .qty {} .fprd .inner {} .fprd .outer {} .fprd .trade { grid-column:1 / -1; /* font-size:.75em; */ text-align:center; align-self:end; } .fprd .trade.break { display:none; } /* clientref/model code ------------------------------------------------------- */ .fprd .clientref span {} .fprd .brand, .fprd .manu, .fprd .model, .fprd .clientref { grid-row:3; font-size:.750em; /* equiv to 1em at .75em font size */ padding:0.66666666666em; } .fprd .flag.offer { } .fprd .piflags {} .fprd .piflags ul {} .fprd .piflags li {} .fprd .flag img, .fprd .piflags img { width:auto; } /* Buy form ------------------------------------------------------- */ .fprd form { grid-column:1 / 4; grid-row:5; padding:.5em; display:grid; grid-template-columns:20% auto; grid-gap:.25em; align-items:center; } .fprd form select { width:100%; } .fprd form label { display:none; } .fprd button { display:inline-block; vertical-align:middle; border:1px var(--bgColor) solid; background-color:var(--bgaltColor); color:var(--bgColor); font-weight:600; font-size:1.2em; padding:.25em .5em; } .fprd button.fpskuqtysub { font-weight:600; font-size:2em; display:none; } .fprd form input.inputtext { display:inline-block; vertical-align:middle; text-align:center; max-width:99%; } .fprd button.fpskuqtyadd {display:none;} .fprd form input.submit { /* width:10em; */ display:inline; grid-column:2; grid-row:1; border:var(--mainColor); } /* quantity in basket - not shown everywhere... */ .qtyInBskt { display:none; } /* more info button */ .fprdinfo, .fprd a.btn { grid-row: 1; grid-column:1/-1; align-self:end; } /* the more info button - or both will show */ .fprd a.btn{ display:none; } /* the quickview button */ .fprd a.btn.qkvw{} .fprd:hover a.qkvw { display:block; text-align:center; padding:.5em; z-index:1; font-size:.825em; opacity:.9; } /* Media Queries ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =QuickView ------------------------------------------------------------------------------------- */ .quickview{ background-color:rgba(0,0,0,0.5); width:100vw; height:100vh; z-index: 999999; position:fixed; top:0; left:0; padding-top:5%; } .quickviewdialog{ width:800px; padding:1em; margin:auto; background-color:var(--white); z-index:999999; display:grid; grid-template-columns:1fr 1fr; grid-gap:.25em; } .quickviewdialog .quickviewHeader{ grid-column:1/3; grid-row:1; align-self:start; z-index:99999; } .quickviewdialog .quickviewHeader .closeqkvw{ display:inline-block; } .quickviewdialog .quickviewHeader .closeqkvw img{ max-width: 20px; } .quickviewdialog .left{ grid-row:1; grid-column:1; } .quickviewdialog .left .piimg{ margin-top: 3em; } .quickviewdialog .left .piimg img{ /*inline styling override */ margin:0 !important; } /*it seems we now put a broken image carousel on the quickview*/ .quickviewdialog .left .owl-carousel{ display:none; } .quickviewdialog .left img{} .quickviewdialog .right{ grid-row:1; grid-column:2; } .quickviewdialog .right .pititle, .quickviewdialog .right .lnk, .quickviewdialog .right .delivery{} .quickviewdialog .right .delivery h4{ margin-top:.5em; font-size:1.2em; } .quickviewdialog .right .brandmanu.model{} .quickviewdialog .right .brandmanu.model h5, .quickviewdialog .right .brandmanu.model h6{ font-family:var(--mainFont); font-size:.875em; margin-right:.5em; color:var(--altColor2); display:inline-block; vertical-align:middle; } .quickviewdialog .right .pidesc{ margin:.5em 0; } .quickviewdialog .right .pidesc iframe{ /*client decision to not show - its part of the description content */ display:none; } .quickviewdialog .right .pidesc h2[itemprop="name"]{ /*duplicated title */ display:none; } .quickviewdialog .right .pidesc h4[itemprop="description"]{ /*product strapline? */ display:none; } .quickviewdialog .right .pidesc p{ font-size:.725em; } .quickviewdialog .right .lnk{ font-size:.8em; text-align:right; margin:.5em; } /* lack of consistancy, lack of thought, basically doesn't work if its anything but a standard price! */ .quickviewdialog .right .pibuy form{ display:none; } .quickviewdialog .right .pibuy .price, .quickviewdialog .right .pibuy .qty, .quickviewdialog .right .pibuy .trade{ display:inline-block; vertical-align:middle; margin:.25em; font-size: 1em; } .quickviewdialog .right .pibuy .price h6{} .quickviewdialog .right .pibuy .price label, .quickviewdialog .right .pibuy .qty label, .quickviewdialog .right .pibuy .trade label{ font-weight:600; } .quickviewdialog .right .pibuy .qty h6, .quickviewdialog .right .pibuy .trade h6{} .quickviewdialog .right .pibuy form p{} .quickviewdialog .right .pibuy form .attrqty{} .quickviewdialog .right .pibuy form .attrqty .qtyinput{ display:inline-block; vertical-align:middle; margin:.5em; } .quickviewdialog .right .pibuy form .attrqty .qtyinput label{} .quickviewdialog .right .pibuy input#bspsubmit{ /*save for later*/ display:none; } .quickviewdialog .right .pibuy form .attrqty .qtyinput input.inputtext{} .quickviewdialog .right .pibuy form .attrqty input#buy{ display:inline-block; vertical-align:middle; margin:.5em; } .quickviewdialog .right .pibuy .stock{ text-align:center; font-size:.713em; } .quickviewdialog .right .pibuy .title{ /*pointless pricein gpb value, should only show if it isn't gbp */ display:none; } .quickviewdialog .right .pibuy .ewis_dialog, .quickviewdialog .right .pibuy .ewis{} /* ------------------------------------------------------------------------------------- =ProductLists ------------------------------------------------------------------------------------- */ .prdlst .bc ul { display:grid; gap:.5em; padding:1em 0; /*will use media queries to change breakpoints set default here */ grid-template-columns:1fr 1fr 1fr 1fr 1fr; } .prdlst .bt h3 { font-size:1.5em; font-weight:700; } /* media queries for viewports start BIG and go small outside of this it used the default --------------------------------------- */ /* over 600px wide and less than 800px wide - show 3 per row */ @media screen and (max-width:800px ) { .prdlst .bc ul { /* for grid widths us the fr unit - which is calcuated on free space (whats left after padding and margin) */ grid-template-columns:1fr 1fr 1fr; } } /* over 400px wide and less than 600px wide - show 2 per row */ @media screen and (max-width:600px ) { .prdlst .bc ul { grid-template-columns:1fr 1fr; } } /* under 400px wide, show 1 per row */ @media screen and (max-width:400px ) { .prdlst .bc ul { grid-template-columns:1fr; } } /* items in product list - would be better if they had .fprd stylings on them !*/ .prdlst { grid-column:1 / -1; } .prdlst li { display:grid; grid-template-columns:1fr 1fr; grid-gap:.5em; padding:.25em; position:relative; background-color:white; align-items:center; border:1px solid var(--borderColor); } .prdlst li a.img { grid-column:1/-1; grid-row:1; text-align:center; /* padding:.5em; */ } .prdlst li a.txt { grid-column:1/-1; grid-row:2; color:var(--textColor); font-family:var(--altFont); align-self:start; } .prdlst .price { grid-column:1/-1; grid-row:3; text-align:center; } .prdlst .offer { grid-column:2; grid-row:3; text-align:center; } .prdlst .prevprice { grid-column:1; grid-row:3; text-align:center; } .prdlst .prevprice h6 { text-decoration:line-through; } .prdlst h6 { font-size:1.4em; color:var(--mainColor); } .prdlst label { font-weight:400; display:none; } /* ------------------------------------------------------------------------------------- =BrandLists ------------------------------------------------------------------------------------- */ /* scrolling brand lists */ .brnd .scroller {} .brnd ul { background-color:white; width:100%; overflow:hidden; } .brnd #buttleft, .brnd #buttright { display:none; } .brnd ul li { display:inline-block; vertical-align:middle; height:100%; padding-left:1em; } .brnd ul li a {} .brnd ul li a img { display:inline-block; vertical-align:middle; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:opacity .2s ease-in-out; -moz-transition:opacity .2s ease-in-out; -o-transition:opacity .2s ease-in-out; transition:opacity .2s ease-in-out; filter:grayscale(1); max-height:70px; width:auto; margin:auto; } .brnd ul li a:hover img { opacity:1; filter:alpha(opacity=100); filter:grayscale(0); } /* ------------------------------------------------------------------------------------- =RecentItems ------------------------------------------------------------------------------------- */ .ritm { } .ritm .bt {} .ritm h3 {} .ritm ul {} .ritm ul li { display:grid; grid-template-columns:1fr 4fr; grid-gap:.25em; margin-bottom:1em; background-color:white; padding:.5em; } .ritm a.img { display:inline-block; vertical-align:middle; } .ritm ul li a.img img { max-width:63px; } .ritm ul li a.txt { font-size:0.825em; font-weight:bold; color:var(--textColor); } .ritm ul li .price, .ritm ul li .qty, .ritm ul li .trade { grid-column:1/3; font-size:.825em; } .ritm ul li .price label, .ritm ul li .qty label, .ritm ul li .trade label {} /* ------------------------------------------------------------------------------------- =MyAccount ------------------------------------------------------------------------------------- */ .myaccount ul {} .link {} #psign h4, #psign h3 { margin-bottom:.5em; } /* orderinfo ------------------------------------------------------- */ .orderinfo {} .orderinfo ul.order li { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); grid-template-columns:25% 75%; grid-gap:.5em; margin-bottom:.5em; } .orderinfo ul.order label { grid-column:1; font-weight:600; } .orderinfo ul.order li span { grid-column:2; display:contents; word-break:break-word } .orderinfo ul.order table { grid-column:1/3; } /*view order button uses the same image as other things, be careful! */ .orderinfo #pm a.btn.info { background:none; margin:0; padding:0; } .orderinfo #pm a.btn img.btn { width:1em; } ul.order a.lnk { grid-column:1/3; font-weight:600; font-size:1em; margin:.5em; padding:.5em .5em; text-align:center; cursor:pointer; border:none; outline:none; color:white; background-color:var(--bgColor); } /* my details ------------------------------------------------------- */ form[name="selectDelAddress"] {} form[name="selectDelAddress"] li.info { width:100%; font-family:"open-sans", sans-serif; /* www.aestheticallyloyal.com/public/optimize-legibility/ */ text-rendering:optimizelegibility; } form[name="selectDelAddress"] li label { grid-column:1/3; text-align:left; } #psign ul.orders a.img, #psign ul.contact a.img, #psign ul.details a.img { text-align:center; justify-self:center; align-self:center; } #psign ul.orders a.img img, #psign ul.contact a.img img, #psign ul.details a.img img { max-height:32px; padding:.5em; } #psign ul.orders a.lnk, #psign ul.contact a.lnk, #psign ul.details a.lnk { justify-self:left; align-self:center; font-weight:600; } #pm .form .link {} /* ------------------------------------------------------------------------------------- =Blog ------------------------------------------------------------------------------------- */ #site.blog #pm {} #site.blog #pm h2 {} #site.blog #pm .blog {} #site.blog #pm .blog a.title {} #site.blog #pm .blog p.date {} #site.blog #pm .blog img {} #site.blog #pm .blog .artp {} #site.blog #pm .blog a.more {} #site.blog #pm .blogBtns, #site.blog #pm .blogPageBtns {} #site.blog #pm .blogBtns a, #site.blog #pm .blogPageBtns a {} #site.blog #pm .blogBtns a.prev, #site.blog #pm .blogPageBtns a.prev {} #site.blog #pm .blogBtns a.next, #site.blog #pm .blogPageBtns a.next {} #site.blog #pm .art .bc h2 {} #site.blog #pm .art .bc .artp {} #site.blog #pm .art .bc .artp h3 {} /* ------------------------------------------------------------------------------------- =CustomPromotions ------------------------------------------------------------------------------------- */ /* HoldingPage ------------------------------------------------------- */ /* HomePage ------------------------------------------------------- */ /* contact us page ------------------------------------------------------- */ .art.contact { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; grid-row:1; } .art.contact h2 { grid-column:1 / -1; margin:0 0 1em 0; } .art.contact .artp { grid-column:1 / 4; } .art.contact + .form { grid-column:4 / 7; grid-row:1; } /* Set Width Articles/Banners ------------------------------------------------------- */ /* 404 page ------------------------------------------------------- */ /* FAQs ------------------------------------------------------- */ /* About US ------------------------------------- */ /* ------------------------------------------------------------------------------------- =TabbedArticles ------------------------------------------------------------------------------------- */ #pi_wrapper { -webkit-box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); -moz-box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); margin-bottom:1em; } #pi_wrapper ul.pi_tabs {} #pi_wrapper ul.pi_tabs li { display:inline-block; padding:1em; background-color:var(--bgColor); cursor:pointer; font-weight:600; margin-right:1em; } #pi_wrapper ul.pi_tabs li.selected { background-color:var(--mainColor); color:white; -webkit-box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); -moz-box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); } #pi_wrapper .pi_tab_content { border:1px var(--bgColor) solid; padding:1em; overflow-x:hidden; height:20em; -webkit-box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); -moz-box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); box-shadow:2px 2px 2px 2px rgba(96,94,93,0.75); } /* ------------------------------------------------------------------------------------- =CustomCSS - See Site Admin>List Setup for list ------------------------------------------------------------------------------------- */ .fullWidth{ width:100%; display:inline-block; vertical-align:top; margin-bottom:1em; } /* halfWidth elements */ .halfWidth{ /*in the event toi is being used */ position:relative; /* on mobile we don't want these splitting so go for full width */ width:calc(50% - 1em); display:inline-block; vertical-align:top; /*needed as text may be too wide to show on smaller devices*/ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; margin:.5em; text-align:center; } .halfWidth .imgcont img{ max-width:100%; } /* thirdWidth elements */ .thirdWidth{ /*in the event toi is being used */ position:relative; /* on mobile we don't want these splitting so go for full width */ width:calc(33.333% - 1em); display:inline-block; vertical-align:top; /*needed as text may be too wide to show on smaller devices*/ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; margin:.5em; text-align:center; margin-bottom:1em; } .thirdWidth .imgcont{ display:inline-block; vertical-align:middle; } .thirdWidth .imgcont img{ max-width:100%; } /* twoThirdWidth elements */ .twoThirdWidth{ /*in the event toi is being used */ position:relative; /* on mobile we don't want these splitting so go for full width */ width:calc(66.6666% - 1em); display:inline-block; vertical-align:top; /*needed as text may be too wide to show on smaller devices*/ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; margin:.5em; text-align:center; } .twoThirdWidth .imgcont{ display:inline-block; vertical-align:middle; } .twoThirdWidth .imgcont img{ max-width:100%; } /* Quarterwidth elements */ .quarterWidth{} .quarterWidth .imgcont{ display:inline-block; vertical-align:middle; } .quarterWidth .imgcont img{ max-width:100%; } /* Department Header */ .deptHeader{} .deptHeader h2{} .deptHeader .artp{} /* Department Footer */ .deptFooter{} .deptFooter h2{} .deptFooter .artp{} /* Display images then text*/ .imageText {} .imageText .imgcont img{ display:inline-block; vertical-align:middle; } /* Dislay text then images */ .textImage {} .textImage .imgcont img{ display:inline-block; vertical-align:middle; } /* inline image article */ .inlineImages{} .inlineImages .imgcont{ display:inline-block; padding:.5em; vertical-align:middle; } .inlineImages .imgcont img{ max-width:100%; } /* responsive iframe */ .respIframe{ width:calc(100% - 0em); display:inline-block; vertical-align:top; } /*to sort out the responsive iframe */ .respIframe .artp { position: relative; overflow: hidden; padding-top: 56.25%; } .respIframe .artp iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------------------------------------------------------------- =DepartmentPages ------------------------------------------------------------------------------------- */ /* Subdepartment tree ------------------------------------------------------- */ .depttree {} .depttree h3 { color:var(--textHeadingColor); margin-bottom:.5em; } .depttree h4.tagline { font-size:1em; margin-bottom:1em; } .depttree ul { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-gap: 1em; } .depttree li { display:grid; grid-gap: 0.5em; /*will use media queries to change breakpoints set default here */ grid-template-columns:1fr; padding:.5em; background-color:white; /* border:1px solid var(--borderColor); */ } .depttree li:hover { } .depttree a.img { /* position:absolute; */ /* bottom:0; */ /* left:0; */ color:var(--textHeadingColor); background-color:var(--bgColor); font-family:var(--headingFont); grid-column:1; /* grid-row:1; */ align-self:end; /* padding:1em .5em; */ text-align:center; width: calc(100% - 0em); /* opacity:.9; */ } .depttree a.txt { /* position:absolute; */ /* bottom:0; */ /* left:0; */ color:var(--textHeadingColor); background-color:var(--bgColor); font-family:var(--headingFont); grid-column:1; /* grid-row:1; */ align-self:end; padding:1em .5em; text-align:center; width:calc(100% - 1em); opacity:.9; } /* media queries --------------------------------------- */ /* dept single links used in promotions ------------------------------------------------------- */ .deptsingle { position:relative; display:inline-block; vertical-align:top; margin:.5em; width: calc(25% - 1em - 2px); /* border:1px solid var(--borderColor); */ align-items:center; text-align:center; } .deptsingle a.imglnk { text-align:center; display:inline-block; width:100%; } .deptsingle a.imglnk img { object-fit:cover; width:100%; height:auto; } /* done like this due to lack of class on the text link */ .deptsingle a.imglnk + a { /* position:absolute; */ /* bottom:0; */ left:0; display:inline-block; color:var(--textHeadingColor); background-color:var(--bgColor); /* margin-top:1em; */ font-family:var(--headingFont); padding:1em .5em; text-align:center; width:calc(100% - 1em); /* opacity:.9; */ } .deptsingle:hover{} /* ------------------------------------------------------------------------------------- =ProductPage ------------------------------------------------------------------------------------- */ /* Product Panels ------------------------------------------------------- */ #pi { display:inline-block; position:relative; margin:0; padding:0; } #pi .top {} #pi .main { display:inline-block; position:relative; width:1200px; margin:auto; text-align:left; } #pi .left { display:inline-block; vertical-align:top; width: 770px; padding:0; position:relative; } #pi .right { display:inline-block; vertical-align:top; width: calc(100% - 770px - 2em); margin-left:2em; } #pi .right .bc { display:grid; grid-template-columns:80% 20%; } #pi .bottom { display:inline-block; position:relative; width:1200px; margin:auto; text-align:left; } /* ------------------------------------------------------------------------------------- =tipsy ------------------------------------------------------------------------------------- */ .tipsy { padding:.5em; font-size:1em; opacity:0.8; filter:alpha(opacity=80); background-repeat:no-repeat; background-image:url(/images/tipsy.gif); } .tipsy-inner { padding:.5em; background-color:var(--bgColor); color:var(--textColor); max-width:200px; text-align:center; } .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-north { background-position:top center; } .tipsy-south { background-position:bottom center; } .tipsy-east { background-position:right center; } .tipsy-west { background-position:left center; } /* Title ------------------------------------------------------- */ .pititle { grid-column:1/-1; grid-row:1; color:var(--textHeadingColor) } h4.strap { font-size:1em; grid-column:1; grid-row:2; } #pi .pititle h2 {} /* Image (carousel/Main Image Zoom) ------------------------------------------------------- */ #pi .piimg { display:inline-block; vertical-align:top; /* border:1px solid var(--borderColor); */ padding:1em; background-color:white; text-align:center; width: 600px; } #pi .piimg img { width:100%; max-width:100%; height:auto !important; margin:0 !important; } #pi .piimg p { display:none; } #pi .piimgx {} /* If image not aligning centrally */ #pi .piimg a { margin:auto; text-align:center; } #pi .piimg a img {} /* Gallery ------------------------------------------------------- */ #pi .gallery { display:inline-block; vertical-align:top; width:120px; margin-right:1em; } #pi .gallery h4 { display:none; } #pi .gallery .piimg_large { margin-bottom:1em; padding:.5em; /* border:1px solid var(--borderColor); */ } #pi .gallery .piimg_large img { width:100%; height:auto; margin:0 !important; } #pi .gallery .piimg_large a {} /* This is the moving lens square underneath the mouse pointer. Not visible if the zoom window is over the image*/ .cloud-zoom-lens { border:1px solid var(--borderColor); margin:-1px; /* Set this to minus the border thickness. */ background-color:white; cursor:move; } /* This is for the title text. */ .cloud-zoom-title {} /* This is the zoom window. */ .cloud-zoom-big { overflow:hidden; top:0; left:0 !important; background-color:white; } /* This is the loading message. */ .cloud-zoom-loading { position:absolute; top:0; margin:0; color:white; background:#222; padding:3px; } /* Brand and Manufacturer ------------------------------------------------------- */ #pi .brandmanu.brand {} #pi .brandmanu.brand p { display:inline-block; font-size:0.688em; font-weight:600; } #pi .brandmanu.brand img {} #pi .brandmanu.model { grid-column:1/-1; grid-row:2; } #pi .brandmanu h5 { display:inline-block; vertical-align:middle; margin-right:.5em; font-size:0.688em; font-family:var(--mainFont); } #pi .brandmanu h6 { display:inline-block; vertical-align:middle; font-size:0.688em; font-family:var(--mainFont); } /* Barcodes ------------------------------------------------------- */ /* independant price element - not part of the form yay! ------------------------------------------------------- */ #pi .pricecomp { text-align:right; color:var(--textHeadingColor); font-size:.875em; display:none; } #pi .pricecomp label{ font-family:var(--headingFont); } #pi .pricecomp h6{ font-family:var(--mainFont); font-weight:600; } #pi .pricecomp .prevprice, #pi .pricecomp .offer {} /* Buy Panel ------------------------------------------------------- */ #pi .pibuy { grid-column:1/-1; margin:1em 0; /* border:1px solid var(--borderColor); */ position:relative; } #pi .pibuy h6 {} #pi .pibuy .bt {} #pi .pibuy .bc { display:block; /* padding:0.25em; */ } #pi .pibuy .bb {} /* for some reasone we always show "price in..." */ #pi .pibuy .bc .title { display:none; } /* pricing info ------------------------------------------------------- */ #pi .pibuy .bc .price, #pi .pibuy .bc .offer, #pi .pibuy .bc .prevprice, #pi .pibuy .bc .rrp, #pi .pibuy .bc .trade, #pi .pibuy .bc .saving { /* display:none; */ color:var(--textHeadingColor); margin-right:1em; font-size:1.2em; } /*normal price */ #pi .pibuy .bc .price {} /*because despite my instructions this is being written out when not wanted!!!! *//* display:none; */margin:0;} #pi .pibuy .bc .price h6 { display:inline-block; vertical-align:middle; font-size:1.8em; color:var(--mainColor); } #pi .pibuy .bc .price label { display:inline-block; vertical-align:middle; margin-right:0.5em; display:none; } #pi .pibuy .bc .price span {} /*rrp price */ #pi .pibuy .bc.rrp {} #pi .pibuy .bc .rrp h6 {} #pi .pibuy .bc .rrp label {} #pi .pibuy .bc .rrp span {} /*offer price */ #pi .pibuy .bc .offer {} #pi .pibuy .bc .offer h6 {} #pi .pibuy .bc .offer label {} #pi .pibuy .bc .offer span {} /*previous price (goes with offer) */ #pi .pibuy .bc .prevprice {} #pi .pibuy .bc .prevprice h6 { text-decoration:line-through; text-decoration-color:var(--mainColor); } #pi .pibuy .bc .prevprice label {} #pi .pibuy .bc .prevprice span {} /*offer price */ #pi .pibuy .bc .saving {} #pi .pibuy .bc .saving h6 {} #pi .pibuy .bc .saving label {} #pi .pibuy .bc .saving span {} /*trade price */ #pi .pibuy .bc .trade {} #pi .pibuy .bc .trade h6 {} #pi .pibuy .bc .trade label {} #pi .pibuy .bc .trade span {} /* Messages */ #pi .pibuy p { font-size:0.688em; display:inline-block; width:100%; text-align:center; } #pi .pibuy h4 {} #pi .pibuy h5 {} #pi .pibuy p.p_stock {} /* stock */ #pi .pibuy .stock { font-size:0.750em; margin:1em 0; } /* quantity in basket info */ #pi .pibuy .qtyInBskt { margin:1em 0; font-size:.825em; } /*dynamic price */ .dynprice { display:inline-block; grid-column:2; text-align:right; } /* email me when in stock */ #pi .ewis{ /* outline:1px red solid; */ } /* Pricing info ------------------------------------------------------- */ /* Buy Form -------------------------------------------------------*/ #buy_form {} /* attributes/sku select */ #buy_form .attr{ display:inline-block; vertical-align:middle; } #buy_form .attr label{ display:none; } #buy_form .options{ grid-column:1; grid-row:1; } #buy_form select, #buy_form textarea{} #buy_form select{ max-width:100%; } #buy_form .attrqty { grid-column:2; grid-row:1; } /* quantity input */ .attrqty .qtyinput{ display:inline-block; vertical-align:middle; margin:.5em; } /*hide quantity label*/ .attrqty .qtyinput label{ display:none; } .attrqty .qtyinput #skuqty{ display:inline-block; vertical-align:middle; text-align:center; padding:.5em; margin:.5em; } /*increase/decrease buttons */ .attrqty .qtyinput button{ display:inline-block; vertical-align:middle; border:1px var(--borderColor) solid; color:var(--textColor); font-weight:600; font-size:1em; padding:.25em .5em; background-color:#fff; cursor:pointer; } .attrqty .submit{ display:inline-block; vertical-align:middle; font-size:1em; border: none; text-align: center; cursor:pointer; } /* message if no option selected*/ #selectResponse{ color:var(--errorColor); padding:0 .5em } /*increase/decrease buttons */ .attrqty .qtyinput button { display:inline-block; vertical-align:middle; margin:.25em; padding:.65em; } /* message if no option selected*/ #selectResponse { color:var(--errorColor); /*horrid so doing full width */ grid-column:1 / -1; padding:1em 0; font-weight:600; } /* Description -------------------------------------------------------*/ #pi .pidesc { grid-column:1/-1; margin:1em 0; color:var(--textHeadingColor) } #pi .delivery {} #pi .pidesc h2[itemprop="name"] { /*product title gets duplicated on the page*/ display:none; } /*strapline*/ #pi .pidesc h4[itemprop="description"] { /*if strapiline is added then it too gets duplicated on the page*/ display:none; } #pi .delivery h3 {} #pi .pidesc p, #pi .delivery p {} #pi .pidesc ul {} #pi .pidesc li {} /* direct despatch */ #pi .pidesc.desp {} #pi .pidesc.desp h5 {} #pi .pidesc.desp p { display:inline-block; vertical-align:middle; } /* Extra Description ------------------------------------------------------- */ #pi .pidescx { grid-column:1/-1; grid-row:3; margin:1em 0; } #pi .pidescx h3{ font-size:1em; } #pi .pidescx ul {} #pi .pidescx ul li {} /* Strapline -------------------------------------------------------*/ /* Accordion Description -------------------------------------------------------*/ /* Tabbed Descriptions -------------------------------------------------------*/ #pm #pi .pi_tab { display:inline-block; width:100%; } #pm #pi #pi_wrapper { -webkit-box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75); -moz-box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75); box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75); } #pm #pi ul.pi_tabs { display:inline-block; cursor:pointer; } #pm #pi ul.pi_tabs li { font-size:1em; text-transform:uppercase; padding:1em; margin:1em; text-align:center; border:1px solid var(--borderColor); background-color:var(--bgColor); } #pm #pi ul.pi_tabs li.selected { background-color:var(--bgaltColor); color:white; z-index:9999999; } #pm #pi ul.pi_tabs li:last-child {} #pm #pi .pi_tab_content { width:95%; margin-left:1em; } #pm #pi .pi_tab_content h2 { font-size:1.2em; } #pm #pi .pi_tab_content h3, #pm #pi .pi_tab_content h4, #pm #pi .pi_tab_content ul, #pm #pi .pi_tab_content p { padding:.5em; } #pm #pi .pi_tab_content p { font-size:0.813em; } #pm #pi .pi_tab_content a {} #pm #pi .pi_tab_content a img {} #pm #pi .pi_tab_content ul , #pm #pi .pi_tab_content ol {} #pm #pi .pi_tab_content ul li, #pm #pi .pi_tab_content ol li {} #pm #pi .pi_tab_content ul li { list-style:disc; font-size:0.938em; } /* Stock -------------------------------------------------------*/ /* Leadtime -------------------------------------------------------*/ /* Direct Despatch/Dropship -------------------------------------------------------*/ /* Links - Ask a question etc ------------------------------------------------------ */ #pi .pilinks{ margin:1em 0; } #pi .pilinks li { display:inline-block; margin-bottom:.5em; } #pi .pilinks .linkimg { display:inline-block; vertical-align:middle; } #pi .pilinks .linkimg img { display:inline-block; vertical-align:middle; width:1em; height:auto; } #pi .pilinks a.lnk {} #pi .pilinks li.email a.lnk { display:inline-block; vertical-align:middle; } #pi .pilinks ul li.query a.lnk { cursor:pointer; display:inline-block; vertical-align:middle; } #pi .pilinks ul li.query a.lnk:before{ font-family:"Font Awesome 5 Free"; font-weight:600; margin-right:.5em; font-size:1em; display:inline-block; content:'\f059'; } /* Files ------------------------------------------------------ */ #pi .pifile li { font-size:0.750em; display:inline-block; margin-bottom:.5em; } #pi .pifile .linkimg { display:inline-block; vertical-align:middle; } #pi .pifile .linkimg img { display:inline-block; vertical-align:middle; width:1em; height:auto; } /* Flags ------------------------------------------------------ */ #pi .flags { grid-row:4; grid-column:2; border:1px solid var(--borderColor); border-top:none; } #pi .flags .flag { display:inline-block; margin-bottom:.5em; text-align:center; width:100%; } /* Video Links (youtube) ------------------------------------------------------ */ #pi .youtube{ width:50%; margin:1em 0; } #pi .youtube ul li{ list-style:none; display:inline-block; width:100%; margin:0; } #pi .youtube .title{ font-family:var(--headingFont); } #pi .youtube .vid{ margin:1em 0; } .respIframe { position: relative; overflow: hidden; padding-top: 56.25%; } .respIframe iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Social Links ------------------------------------------------------ */ #pi .socbook {} #pi .socbook .bt h3 { display:none; } #pi .socbook li { display:inline-block; margin-right:.5em; } /* Buytogether -------------------------------------------------------*/ .buytogether {} .buytogether li.header {} .buytogether ul.boughtto {} .buytogether ul.boughtto li {} .buytogether ul.boughtto li.imgs {} .buytogether ul.boughtto li.imgs img {} .buytogether ul.boughtto li.imgs span {} .buytogether ul.boughtto li.prods {} .buytogether ul.boughtto li.prods input, .buytogether ul.boughtto li.prods span.descr, .buytogether ul.boughtto li.prods span.price {} .buytogether ul.boughtto li.prods input { } .buytogether ul.boughtto li.prods span.descr {} .buytogether ul.boughtto li.prods span.price {} .buytogether ul.boughtto li.total {} .buytogether ul.boughtto li.total span {} .buytogether ul.boughtto li.btn {} .buytogether ul.boughtto li.btn .submit {} /* Personalisation -------------------------------------------------------*/ #pi .pibuy form .pers {} #pi .pibuy form .pers li { padding:0.5em 0; border-top:1px dashed var(--borderColor); margin-top:0.5em; } #pi .pibuy form .pers li:last-child {} #pi .pibuy form .pers label { font-size:0.75em; } #pi .pibuy form .pers input.inputtext {} #pi .pibuy form .pers span.chars { font-size:0.75em; color:var(--mainColor); } #pi .pibuy form .pers span {} /* Associated/Recommended/Related -------------------------------------------------------*/ #pi .prec, #pi .pass, #pi .prel, #pi .pran {} #pi .prec h3, #pi .pass h3, #pi .prel h3, #pi .pran h3 { padding:.5em 0; margin:1em 0; text-align:center; color:var(--textHeadingColor); border-top:1px solid var(--borderColor); } #pi .prec .fprd, #pi .pass .fprd, #pi .prel .fprd, #pi .pran .fprd {} #pi .prec .fprd h3, #pi .pass .fprd h3, #pi .prel .fprd h3, #pi .pran .fprd h3 {} #pi .prec .fprd .bc {} #pi .prec .fprd:last-child, #pi .pass .fprd:last-child, #pi .prel .fprd:last-child, #pi .pran .fprd:last-child {} #pi .prec .fprd .fprdimg, #pi .pass .fprd .fprdimg, #pi .prel .fprd .fprdimg, #pi .pran .fprd .fprdimg {} #pi .prec .fprd .fprdimg img, #pi .pass .fprd .fprdimg img, #pi .prel .fprd .fprdimg img, #pi .pran .fprd .fprdimg img {} #pi .prec .fprd .fprdimg .piflags, #pi .pass .fprd .fprdimg .piflags, #pi .prel .fprd .fprdimg .piflags, #pi .pran .fprd .fprdimg .piflags {} #pi .prec .fprd .fprdtitle, #pi .pass .fprd .fprdtitle, #pi .prel .fprd .fprdtitle, #pi .pran .fprd .fprdtitle {} #pi .prec .fprd .piflags, #pi .pass .fprd .piflags, #pi .prel .fprd .piflags, #pi .pran .fprd .piflags {} /* Reviews -------------------------------------------------------*/ .rev{ padding: 4em 0; } .rev .bt h3{ padding:.5em 0; margin:1em 0; text-align:center; color:var(--textHeadingColor); border-top:1px solid var(--borderColor); } .rev a.btn{ display:inline-block; margin:1em 0; } .rev h4{ margin-bottom:.25em; } /* feefo summary widget -------------------------------------------------------*/ #pi #feefologohere {} ul.feefo li {} ul.feefo li:last-child {} .feefosmallsummarypanel {} .feefosmallsummarypanel .title {} .feefosmallsummarypanel .stars {} .feefosmallsummarypanel span[itemprop="ratingCount"] {} .feefosmallsummarypanel .ratingNumber {} .feefosmallsummarypanel .reviewCount {} .feefopanel {} .feefosmallsummarypanel {} .feefosmallsummarypanel img {} /* title is a duplicate of product title so we don't want to show it */ .feefosmallsummarypanel .title { display:none; } .feefosmallsummarypanel .stars { text-align:right; } .feefosmallsummarypanel .stars img { width:1em; height:auto; } .feefosmallsummarypanel .stars img { display:inline-block; width:1em } .feefosmallsummarypanel .reviewCount { display:inline-block; margin:.5em; text-align:left; } .feefosmallsummarypanel .ratingNumber { display:none; } .feefosmallsummarypanel .ratingNumber {} .feeforeviews {} .feeforeviews .feefosummary {} .feeforeviews .feefosummary span.title {} .feeforeviews .feefosummary span.stars {} .feeforeviews .feefosummary img {} .feeforeviews .feefosummary span.ratingNumber {} .feeforeviews .feefosummary .ratingCount {} /* Wishlist (not used) ------------------------------------------------------- */ #pi .pibuy form.wishlist {} #pi .pibuy form.wishlist input.chkbox {} #pi .pibuy form.wishlist label {} #pi .pibuy form.wishlist .submit {} /* Media Queries ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =Super Attributes ------------------------------------------------------------------------------------- */ /* Defaults ------------------------------------------------------- */ /*validator messages */ .sa_validator { color:var(--errorColor); } .cls_superattrribute #sa_pnl_product_not_found { display:none; z-index:2000; } .cls_superattrribute #saten_pnl_show { position:relative; } .cls_superattrribute.attributeTypeRadio_button .sa_name { font-family:var(--headingFont); } /* structure of accordion attributes requires attention and cleanup! */ .cls_superattrribute.attributeTypeRadio_button .sa_name { /*hide if using accordion version */ display:none; } .cls_superattrribute ul li { margin:0.5em 0; /* border-bottom:1px dashed; */ /* padding:0.25em 0; */ } .cls_superattrribute ul li:last-child{ border:none; } .cls_superattrribute .bc table {} .cls_superattrribute .bc table .sa_left_cell_type_1, .cls_superattrribute .bc table .sa_right_cell_type_1 {} .cls_superattrribute .att_measure {} .cls_superattrribute .att_X, .cls_superattrribute .att_Y {} .cls_superattrribute .att_X label, .cls_superattrribute .att_Y label {} .cls_superattrribute .calc_price {} .cls_superattrribute .calc_price .submit {} #sa_pnl_product_not_found #sa_label_product_not_found_close {} #sa_pnl_product_not_found table {} #sa_pnl_product_not_found table label {} #sa_pnl_product_not_found td {} #sa_pnl_product_not_found th {} #sa_pnl_product_not_found #sa_label_product_not_found {} #safour_panel_show td {} .sa_pnl_product_not_found_showg {} .sa_pnl_product_not_found_show label {} #pi .pibuy form#buy_form .cls_superattrribute .submit {} /*help icon */ #pi .pibuy form#buy_form .cls_superattrribute img[id^="help"] { position:absolute; top:0; right:0; } /* attributeTypePrice_Matrix_Calculator ------------------------------------------------------- */ .cls_superattrribute.attributeTypePrice_Matrix_Calculator {} .cls_superattrribute.attributeTypePrice_Matrix_Calculator .bc {} /*help icon needs to be placed differently for different items... */ .cls_superattrribute.attributeTypePrice_Matrix_Calculator #saten_pnl_show img[id^="help"] {} .cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_X label, .cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_Y label {} .cls_superattrribute.attributeTypePrice_Matrix_Calculator label {} /* attributeTypeDimensions ***************************************************************/ .cls_superattrribute.attributeTypeDimensions {} .cls_superattrribute.attributeTypeDimensions .bc {} .cls_superattrribute.attributeTypeDimensions .width {} .cls_superattrribute.attributeTypeDimensions .drop {} .cls_superattrribute.attributeTypeDimensions .width label, .cls_superattrribute.attributeTypeDimensions .width input, .cls_superattrribute.attributeTypeDimensions .drop label, .cls_superattrribute.attributeTypeDimensions .drop input {} .cls_superattrribute.attributeTypeDimensions .width span, .cls_superattrribute.attributeTypeDimensions .drop span {} /*help icon needs to be placed differently for differnt items... */ .cls_superattrribute.attributeTypeDimensions img[id^="help"] {} .cls_superattrribute.attributeTypeDimensions .att_container {} .cls_superattrribute.attributeTypeDimensions .att_X label, .cls_superattrribute.attributeTypeDimensions .att_Y label {} .cls_superattrribute.attributeTypeDimensions label {} /* attributeTypeRadio_button ***************************************************************/ .cls_superattrribute.attributeTypeRadio_button { position:relative; /* outline:1px red solid; */ } .cls_superattrribute.attributeTypeRadio_button label{ font-size:1em; } .cls_superattrribute.attributeTypeRadio_button .sa_name { font-family:var(--headingFont); color:var(--mainColor); /* display:block; */ padding:.5em; } .cls_superattrribute.attributeTypeRadio_button li{ display:grid; grid-template-columns: 50px 1fr 159px; grid-template-rows: 3.5em; grid-gap:1em; align-items:center; } .cls_superattrribute.attributeTypeRadio_button li input{ margin:auto; } .cls_superattrribute.attributeTypeRadio_button li img{ /* display:inline-block; */ /* text-align:right; */ /* margin:auto; */ /* max-width:100%; */ /* max-height:2.5em; */ width:auto; height:auto; } /*help icon needs to be placed differently for differnt items... */ .cls_superattrribute.attributeTypeRadio_button img[id^="help"] {} .cls_superattrribute.attributeTypeRadio_button .radiobuttondatali {} .cls_superattrribute.attributeTypeRadio_button .radiobuttondatali ul {} .cls_superattrribute.attributeTypeRadio_button .radiobuttondatali li {} /* attributeTypeText_Box_Free_Text_Entry ***************************************************************/ .cls_superattrribute.attributeTypeText_Box_Free_Text_Entry {} .cls_superattrribute.attributeTypeText_Box_Free_Text_Entry .sa_name { font-size:0.8em; } /*help icon needs to be placed differently for differnt items... */ .cls_superattrribute.attributeTypeText_Box_Free_Text_Entry img[id^="help"] {} .cls_superattrribute.attributeTypeText_Box_Free_Text_Entry span { color:var(--errorColor); font-size:0.8em; } /*attributeTypeDrop_down_list ***************************************************************/ .cls_superattrribute.attributeTypeDrop_down_list {} .cls_superattrribute.attributeTypeDrop_down_list .info.sa_name {} /*help icon needs to be placed differently for differnt items... */ .cls_superattrribute.attributeTypeDrop_down_list img[id^="help"] {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {} /* for things with images... */ /*except this isn't just written out when images are in use because people don't think! */ /*don't put stuff in here it breaks things you may not be seeing on other pages */ .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner {} img.sa_img_swatch_selected {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner img, .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner span {} .cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {} /* whatever this is we don't want it! */ .sa_pnl_product_popup_image_show { display:none; } /*attributeTypeSingle_Image_Upload ***************************************************************/ .cls_superattrribute.attributeTypeSingle_Image_Upload {} .cls_superattrribute.attributeTypeSingle_Image_Upload .progress {} .cls_superattrribute.attributeTypeSingle_Image_Upload .sa_name {} /* ------------------------------------------------------------------------------------- =Basket - Checkout v5 ------------------------------------------------------------------------------------- */ /*needs #pm as .bskt is used in the header */ #pm .bskt { margin:1em 0; } /*checkout breadcrumb added - controls the order of the checkout process doesn't do accordion stuff though */ .chkcrumb { text-align:left; font-size:.750em; padding:.5em; /* currently not wanting to show this - ultimately this will be a setting in coms as to whether it is displayed or not at each stage */ display:none; } .chkcrumb .prev, .chkcrumb .curr, .chkcrumb .next { display:inline-block; margin-right:.5em; } .chkcrumb .numbers { display:inline-block; } .chkcrumb .text {} .chkcrumb .curr { font-weight:600; } .chkcrumb .prev .numbers {} /* if basket is empty and user is in it */ .bskt .empty { margin:10em 0; } .bskt .empty .header { color:var(--textColor); background:none; } .bskt .empty .total { text-align:center; } /* Basket header ------------------------------------------------------- */ .bskt .header { font-family:var(--headingFont); text-align:center; font-weight:600; padding:.5em; } /* Basket Lines ------------------------------------------------------- */ .bskt .lines {} /* Basket Line items ------------------------------------------------------- */ .bskt .lines .line { display:grid; grid-gap:.5em; grid-template-columns:1fr 6fr 1fr .5fr 1fr; padding:1em; align-self:center; align-items: center; } .bskt .lines .line:nth-child(odd) { background-color:var(--bgColor); } /* Image */ .bskt .lines .line .prodimg { grid-column:1; grid-row:1; } .bskt .lines .line .prodimg a, .bskt .lines .line .prodimg a img { display:block; } /* Product Info - in list form */ .bskt .lines .line .prodinfo { grid-column:2; grid-row:1; /* align-self:start; */ } .bskt .lines .line .prodinfo li.descr { font-size:1em; margin-left:0; font-weight:600; } /*first statement is because not everything gets a class! */ .bskt .lines .line .prodinfo li, .bskt .lines .line .prodinfo li.subset, .bskt .lines .line .prodinfo li.model { font-size:.875em; margin-left:1em; } /* remove item */ .bskt .lines .line .rem { grid-column:4; grid-row:1; align-self:center; text-align:center; } .bskt .lines .line .rem .submit { margin:0; padding:0; border:none; outline:none; background:none; } .bskt .lines .line .rem .submit { color:var(--errorColor); border:1px solid var(--errorColor); padding:0.25em; font-size:10px; } .bskt .lines .line .rem .submit:hover {} /* Change quantity */ .bskt .lines .line .qty { grid-column:3; grid-row:1; font-size:.875em; align-self:center; text-align:center; } .bskt .lines .line .qty label { display:none; } .bskt .lines .line .qty button { display:inline-block; vertical-align:middle; border:1px var(--textColor) solid; background-color:var(--bgaltColor); color:var(--textColor); font-weight:600; font-size:1.2em; padding:.25em .5em; } .bskt .lines .line .qty input { display:inline-block; vertical-align:middle; margin:0 .25em; text-align:center; width:3em; } .bskt .lines .line .netprice { grid-column:1/3; grid-row:2; } .bskt .lines .line .netprice label, .bskt .lines .line .netprice span { font-size:.750em; } .bskt .lines .line .netprice label { margin-right:.25em; } .bskt .lines .line .price { grid-column:5; grid-row:1; text-align:right; font-weight:600; align-self:center; } /* out of stoc messages */ .oos { color:var(--mainColor); font-size:.725em; } /* Basket Subtotal ------------------------------------------------------- */ .prodsubtotal { padding:1em; border-top:1px var(--borderColor) solid; border-bottom:1px var(--borderColor) solid; text-align:right; } .prodsubtotal label { margin-right:1em; } .prodsubtotal span { font-size:1.2em; font-weight:600; } /* Delivery info ------------------------------------------------------- */ /* for free delivery messages */ .header.free { background:none; color:var(--textColor); padding:1.5em; font-size:.875em; } .header.delivery { /*doesn't exist but should be on the actual delivery header */ } /* Shipping ------------------------------------------------------- */ .shipping { padding:1em; } .shipping .header{ display:none; } /* no need to show this unless collect option is available */ .shipping .deliveryto h4 { display:none; } .shipping .address input, .shipping .address h4 { display:inline-block; vertical-align:middle; font-size:1em; } .shipping .store input, .shipping .store h4 { display:inline-block; vertical-align:middle; font-size:1em; } .shipping .deliveryto form { margin:1em 0; /* text-align:center; */ } .shipping .deliveryto form .ship_edit{ display:block; margin:1em 0; } /* if there ARE delivery choices */ .shipping form select { display:block; margin-bottom:1em; } /* if there are NOI delivery choices */ .shipping .deliverto span { font-weight:600; } li.shipping { padding:0; text-align:right; } /* selected shipping cost*/ li.shipping form span { font-weight:600; margin-left:.5em; } /* Basket Totals ------------------------------------------------------- */ .bskttotals { border-bottom: 1px var(--borderColor) solid; padding:1em; padding-top:0; text-align:right; } .bskttotals label { display:inline-block; } .bskttotals span { font-weight:600; /*fix a min width for different number alignment */ display:inline-block; width:8em; } .bskttotals .total { font-size:1.5em; } .bskttotals .total span { /* reset span size as font size if .total font size is bigger */ width:5.3333333333em; } /* Vouchers ------------------------------------------------------- */ .vouchentry { display:inline-block; text-align:left; background:#eef2f3; padding:1em; } #pm ul.accordion li.pane ul.vouch li, .vouchentry ul.vouch li { display:inline-block; } /* Basket Payment Buttons ------------------------------------------------------- */ .bsktbuttons { text-align:right; margin:.5em 0; font-size:1em; } .bsktbuttons a { padding:.5em; margin:.25em 0; text-align:center; cursor:pointer; border:none; outline:none; display:inline-block; } .bsktbuttons .pp_button a.btn { background:none; padding:0; } /*font awesome icons */ #pm .sp_button a.btn.sagepay:before { font-family:"Font Awesome 5 Free"; font-weight:600; margin-right:.5em; font-size:1em; display:inline-block; content:'\f09d'; } #pm .sp_button a.btn.bacs:before { font-family:"Font Awesome 5 Free"; font-weight:600; margin-right:.5em; font-size:1em; display:inline-block; content:'\f19c'; } #pm .sp_button a.btn.lease:before { font-family:"Font Awesome 5 Free"; font-weight:600; margin-right:.5em; font-size:1em; display:inline-block; content:'\f154 \f154 \f154'; } .page_basket .btn.cont a.btn { display:inline-block; margin:.5em 0; border-color:var(--bgColor); /* background-color:var(--bgColor) */ } .page_basket .btn.cont a.btn:hover { color:var(--textColor); background-color:var(--bgColor); } .page_basket .btn.clear a.btn { display:inline-block; margin:.5em 0; } .page_basket .btn.clear a.btn:hover {} /* Media Queries ------------------------------------------------------- */ /* over 600px wide and less than 800px */ @media screen and (max-width:800px ) {} /* over 400px wide and less than 600px wide */ @media screen and (max-width:600px ) {} /* under 32400px0px wide */ @media screen and (max-width:400px ) { /* add an extra row and change order of things */ .bskt .lines .line .qty { grid-column:1/4; font-size:.875em; } .bskt .lines .line .prodinfo { grid-column:2/5; grid-row:1; } /* remove item */ .bskt .lines .line .rem { grid-column:4; grid-row:2; } .bskt .lines .line .netprice { grid-column:1/3; } .bskt .lines .line .netprice label, .bskt .lines .line .netprice span { font-size:.750em; } .bskt .lines .line .price { grid-row:3; } } /* ------------------------------------------------------------------------------------- =Checkout v5 Accordion Option ------------------------------------------------------------------------------------- */ /* Defaults / Overrides ------------------------------------------------------- */ #checkout_panel_processing, #ro_accord_processing { position:absolute; display:none; width:100%; padding:20px 10px; opacity:0.6; filter:Alpha(Opacity=60); float:right; background-color:var(--textColor); } #pm .accord { width:834px; margin-right:1em; overflow-x:visible; display:inline-block; } /* Accordion tabs ------------------------------------------------------- */ .ui-accordion .ui-accordion-header .ui-accordion-header-icon { color:white; right:0; left:initial; background-image:url(https://download.jqueryui.com/themeroller/images/ui-icons_fff_256x240.png); } #pm .accord h3 { padding:0.5em 0 ; margin:0; width:100%; position:relative; cursor:pointer; background:var(--mainColor); border:none; color:white; font-weight:600; font-size:1.2em; margin-bottom:2px; border-radius:0; } #personalisation_panel, #gift_panel { border:none; } #pm .accord h4 {} #pm .accord label { font-size:0.75em; } #pm .accord ul li input, #pm .accord ul li select, #pm .accord ul li textarea, #pm .accord ul li span { /* margin-bottom:1em; */ grid-column:2; grid-row:1; } /* img asterisk */ #pm .accord ul li img { grid-column:1; grid-row:1; } #pm .accord ul li textarea { max-width:calc(100% - 2px - 0.5em); } #pm .accord ul li input.submit { float:right; } #pm .accord li #submit {} #checkout_accordion {} #checkout_accordion input.inputtext, #checkout_accordion input.inputtext_light, #checkout_accordion select, #checkout_accordion textarea {} #checkout_accordion #deliveryInst { width:90%; } #checkout_accordion select { grid-column:1/2; max-width:calc(100% - 2px - 0.5em); } .ui-accordion .ui-accordion-content { padding:1em ; border-top:0; overflow:auto; } #checkout_accordion #ul_left li, #checkout_accordion #ul_right li { margin-bottom:1em; display:grid; grid-template-columns:0.5fr 10fr; align-items:center; grid-gap:.5em; } #checkout_accordion #ul_left li.reqmsg, #checkout_accordion #ul_right li.reqmsg { grid-template-columns:1fr; color:var(--errorColor); font-size:0.8em; } #checkout_accordion #ul_left li.chkbox, #checkout_accordion #ul_right li.chkbox { grid-template-columns:10fr 1fr; } #checkout_accordion #ul_left li h4, #checkout_accordion #ul_right li h4 { grid-column:1 / -1; } /* Typography ------------------------------------------------------- */ /* Specific Fields ------------------------------------------------------- */ /* sign in in accordion */ #signinform h5 { font-size:.8em; } #signinform li {} #signinform input.inputtext { width:300px; } #signin_skip { line-height:normal; font-weight:600; padding:.5em; border:none; color:var(--textColor2); margin-right:1em; text-align:center; text-transform:uppercase; background:#eef2f3; cursor:pointer; } /* Main accordion Sections ------------------------------------------------------- */ #ul_top { font-size:.875em; margin-bottom:1em; } #ul_left {} #ul_right {} #ul_bottom .continue { margin:auto; text-align:center; } /* Customer Details ------------------------------------------------------- */ #customer_panel #ul_left, #customer_panel #ul_right { width:calc(50% - 1em); display:inline-block; vertical-align:top; padding:0 .5em; } /* Delivery Address ------------------------------------------------------- */ #delivery_panel #ul_right { } #delivery_panel .address, #delivery_panel #basket_delivery_address, #delivery_panel .address ul { grid-column:1/3; } /* Confirm Panel inc Basket Summary ------------------------------------------------------- */ #confirm_panel { padding:0; } #confirm_panel .continue { text-align:right; margin:0 1em 1em; } .basketsummary .header { margin:0; color:var(--textColor); padding:.5em; background-color:white; text-align:center; } .bsktsum {} .bsktsum .line { display:grid; grid-gap:.5em; padding:.5em; grid-template-columns:3fr .5fr 1fr; align-self:center; } .bsktsum .line:nth-child(odd) { background-color:var(--bgColor); } .bsktsum .qty { text-align:right; } .bsktsum .qty label { display:none; } .bsktsum .price { font-weight:600; text-align:right; } /* no one wants to send people back to the basket at this point - needs to be removed from basket summary */ .bsktsum .editbskt { display:none; } .bsktsum .line .prodinfo li { font-size:.725em; } .bsktsum .line .prodinfo li.descr { font-size:1em; font-weight:600; } /* Basket Subtotal ------------------------------------------------------- */ .bsktsum .subtotal { padding:.5em; text-align:right; } /* Payment Panel Totals ------------------------------------------------------- */ #payment_panel {} #payment_panel .form {} #delivery_date_panel .continue { margin:auto; text-align:center; } /* PAY WITH AMAZON ------------------------------------------------------- */ /* Please include the min-width, max-width, min-height and max-height if you plan to use a relative CSS unit measurement to make sure the widget renders in the optimal size allowed. */ #addressBookWidgetDiv { min-width:300px; max-width:100%; min-height:228px; height:300px; } #walletWidgetDiv { min-width:300px; max-width:100%; min-height:228px; height:300px; } #shippingSelector { border:1px solid var(--borderColor); margin:1em 0; padding:0 1em; } #amazonShippingSelection > span { margin-top:.5em; font-size:1.2em; font-weight:600; width:100%; display:inline-block; } #amazonShippingSelection > span +span { font-weight:normal; margin-top:.5em; margin-bottom:.5em; } #shippingSelector amazonShippingSelection { outline:1px var(--errorColor) solid; } .amazonShippingCountryDiv span.label { font-weight:600; margin-right:1em; } .amazonShippingOptionsDiv span.value { font-weight:600; } .amazonShippingOptionsDiv { cursor:pointer; } .amazonShippingOptionDiv { width:40%; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid var(--borderColor); border-radius:3px; display:block; text-decoration:none; margin:0 3px 6px 0; padding:0 20px 0 30px; color:#333; font-size:11px; height:30px; background:#f6f6f6; background:-moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:-webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:-ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%); } .amazonShippingOptionsDiv:after { display:block; clear:both; content:''; } .amazonShippingOptionDiv.selected { background:#f6f6f6 url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat; background:url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%) } .amazonShippingOptionDiv.selected:hover { background:#ececec url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat; background:url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-moz-linear-gradient(top,#ececec 0,#d3d3d3 100%); background:url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-webkit-linear-gradient(top,#ececec 0,#d3d3d3 100%); background:url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,-ms-linear-gradient(top,#ececec 0,#d3d3d3 100%); background:url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat,linear-gradient(to bottom,#ececec 0,#d3d3d3 100%) } .amazonShippingOptionDiv:hover { background:#ececec; background:-moz-linear-gradient(top,#ececec 0,#d3d3d3 100%); background:-webkit-linear-gradient(top,#ececec 0,#d3d3d3 100%); background:-ms-linear-gradient(top,#ececec 0,#d3d3d3 100%); background:linear-gradient(to bottom,#ececec 0,#d3d3d3 100%) } .address-list li.selected a.invalid { background:#f6f6f6; background:-moz-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:-webkit-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:-ms-linear-gradient(top,#f6f6f6 0,#e1e1e1 100%); background:linear-gradient(to bottom,#f6f6f6 0,#e1e1e1 100%) } #cancelAmazon { background-color:#eef2f3; color:#416976; font-weight:600; padding:.5em; } .noshipping { color:var(--mainColor); margin-bottom:1em; font-weight:bold; } .submit[disabled] { background-color:#eef2f3; color:white; } /* Checkout Breadcrumb panel ------------------------------------------------------- */ #pm .accordbdcb { width:350px; display:inline-block; float:right; } #pm .accordbdcb .checkoutLogos { text-align:center; } #pm .accordbdcb .checkoutLogos img { margin:.5em; } #pm .accordbdcb ul { border-bottom:1px solid var(--borderColor); margin-bottom:.5em; } #pm .accordbdcb ul li { margin:.5em 0em 1em 1em; } #pm .accordbdcb ul li.header { font-weight:600; padding:0; margin:0; width:96%; padding:.25em 2%; position:relative; cursor:pointer; border:none; font-size:1em; border-radius:0; border-bottom:1px solid var(--borderColor); /* color:var(--bgColor); */ } #pm .accordbdcb ul li:last-child {} #pm .accordbdcb ul li.title { font-weight:600; padding:0; margin:0; width:96%; padding:.5em 2%; position:relative; cursor:pointer; border:none; font-size:1.2em; border-radius:0; margin-bottom:2px; background:var(--mainColor); color:white; } /* due to the way the payment bit in the checkout crumb is written out */ #pm .accordbdcb ul li span.label { width:50%; display:inline-block; } /* terms and conditions article in checkout ------------------------------------------------------- */ #pp { width:1000px; margin:0 auto; background-color:white; } #pp p, #pp h3, #pp h4 { margin:0 1em; } #pp h3, #pp h4 { margin-bottom:.5em; } /* ------------------------------------------------------------------------------------- =ConfirmationPage ------------------------------------------------------------------------------------- */ .confirmation .conf { padding:1em; } .confirmation .conf .info li { margin-bottom:1em; display:block; } .confirmation .conf li.info li { list-style:disc; display:list-item; list-style-position:inside; } .confirmation .conf .header { font-weight:600; font-size:2em; } .confirmation .conf .subhead { font-weight:600; margin:.5em 0; } /* Basket Line items ------------------------------------------------------- */ .confirmation .conf .order {} .confirmation .conf .order .line { display:grid; grid-gap:.5em; grid-template-columns:1fr 6fr 1fr; padding:1em; align-self:center; align-items:start; } .confirmation .conf .order .line:nth-child(odd) { background-color:var(--bgaltColor); } /* Image */ .page_confirmation .conf .order .line a.img {} /* Product title*/ .confirmation .conf .order .line .descr { align-self:start; font-size:.875em; font-weight:600; } .confirmation .conf .order .line .price { text-align:right; font-weight:600; align-self:start; } /* Basket Subtotal ------------------------------------------------------- */ .confirmation .conf .order .subtotal { padding:1em; border-top:1px var(--bgColor) solid; text-align:right; } .confirmation .conf .order .subtotal label { margin-right:1em; } .confirmation .conf .order .subtotal span { font-size:1.2em; font-weight:600; } .confirmation .conf .order .address { text-align:left; font-size:.875em; } /* Post order customer registration panel ------------------------------------------------------- */ .confirmation .conf .ordreg { background-color:white; padding:1em; margin:1em 0; } .confirmation .conf .ordreg input { margin:.5em 0; } .confirmation .conf .ordreg .info { margin:.5em 0; } .confirmation .conf .ordreg .help { font-size:.725em; padding:1em 0 } .success .form li {} /* ------------------------------------------------------------------------------------- =Sitemap ------------------------------------------------------------------------------------- */ #pm .smap ul { list-style-position:inside; width:100%; } #pm .smap ul li { padding:1em 0; } #pm .smap ul li a, #pm .smap ul li h3 { padding:0; } #pm .smap .bc ul li ul { padding:1em 0; float:left; } #pm .smap ul li ul li { padding:0; } /* First Level */ #pm .smap ul li { width:25%; float:left; } #pm .smap ul li a { font-weight:600; font-size:1.2em; } /* Second Level */ #pm .smap ul li ul { margin-left:2%; width:98%; float:left; } #pm .smap ul li ul li { width:100%; } #pm .smap ul li ul li a { font-weight:normal; font-size:1em; } /* Third Level */ #pm .smap ul li ul li ul li a { font-weight:normal; } /* ------------------------------------------------------------------------------------- =AccordionArticles ------------------------------------------------------------------------------------- */ /* accordion descriptions ------------------------------------------------------- */ #pm .bc ul.accordion {} #pm .bc ul.accordion .pane { display:none; } #pm .bc ul.accordion .pane, #pm .bc ul.accordion .fixedpane { background-color:var(--bgColor); /* padding:0 .5em; */ } #pm .bc ul.accordion li.header { display:grid !important; grid-template-columns:1fr 1em; grid-gap:.5em; align-items:center; } #pm .bc ul.accordion li.header img { width:1em; cursor:pointer; margin:auto; } #pm .bc ul.accordion li.header img.showminus { display:none; } #pm .bc ul.accordion li.header.current img.showminus { display:block; } #pm .bc ul.accordion li.header.current img.showplus { display:none; } #pm .bc .accordion p { font-size:1em; margin-bottom:1em; } #pm .bc .accordion ul {} #pm .bc .accordion a {} #pm .bc .accordion a:hover { text-decoration:underline; } #pm .bc .accordion span { font-weight:800; } #pm .bc ul.accordion thead td { font-weight:800; } /* ------------------------------------------------------------------------------------- =Hacks ------------------------------------------------------------------------------------- */ .clearfix { padding:0 !important; margin:0 !important; float:none !important; clear:both !important; } .spacer { float:left; } .epau .bc { display:none; } #modal-overlay-inline { z-index:999; } /* save for later - MDR is #bspsubmit unique? */ input[value="Save for later"] { opacity:0.5; } a[title="Return to My Account"] { grid-column:1 / -1; width:48.5%; justify-self:center; } .sitebckimg { position:fixed; width:100vw; top:0; /* overflow:hidden; */ } .sitebckimg img{ min-height:600px; object-fit:cover; } .sitebckimg .carousel{ margin-bottom:0; }