/*  Version 1.1 09/09/14 1.1 09/09/14 CD - Changes to images in search results and to button placement in related items 1.0 22/08/14 CD - Change to appearance in iPad portrait, and to layout based on having real data in it */ body { font: 13px/1.3em 'Droid Sans', 'Trebuchet MS', Arial, sans-serif; background: #f6f6f6 url('top-bar-bg.png') repeat-x; padding: 0; margin: 0; } h1 { font-weight: 700; color: #1d4a6a; font-size: 20px; padding: 0; margin: 0; padding-bottom: 0.5em;   } h2 { font-weight: 700; font-size: 18px; padding: 0; margin: 0; padding-bottom: 0.5em; color: #1d4a6a; } p { padding: 0; margin: 0; padding-bottom: 0.5em; } a { color: #1d4a6a; text-decoration: none; } a:hover { text-decoration: underline; } .strong { font-weight: 700; } .show-on-responsive { display: none; } .hide-on-responsive { display: block; } .wrapper { width: 960px; margin: 0 auto; } /* ---- top bar ---- */ .top-bar { height: 22px; padding: 5px 0; } .top-bar ul { height: 22px; padding: 0; margin: 0; list-style: none; border-right: solid 1px #fff } .top-bar ul li { float: right; border-left: solid 1px #fff; padding: 0 25px; color: white; line-height: 22px } .top-bar ul li.flags { padding-left: 0; border: 0; } .top-bar ul li a { color: white; line-height: 22px } /* ---- header ---- */ .header { height: 135px; position: relative; } .logo { float: left; width: 327px; height: 97px; margin-top: 18px; } .header-right { float: right; width: 633px; height: 135px; } .contact-details { text-align: right;   color: #1d4a6a; font-size: 20px; line-height: 24px; margin: 25px 0; } .shopping-cart { float: right; clear: right; height: 37px; } .shopping-cart a { color: white; line-height: 37px; float: right; font-weight: 700; background-color: #1a4767; background-image: -webkit-gradient(linear, left top, left bottom, from(#7490a3), to(#1a4767)); background-image: -webkit-linear-gradient(top, #7490a3, #1a4767); background-image: -moz-linear-gradient(top, #7490a3, #1a4767); background-image: -ms-linear-gradient(top, #7490a3, #1a4767); background-image: -o-linear-gradient(top, #7490a3, #1a4767); background-image: linear-gradient(top, #7490a3, #1a4767); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7490a3, endColorstr=#1a4767); display: block; padding: 0 10px; } .shopping-cart a:hover { background-color: #688298; background-image: -webkit-gradient(linear, left top, left bottom, from(#a4b4c1), to(#688298)); background-image: -webkit-linear-gradient(top, #a4b4c1, #688298); background-image: -moz-linear-gradient(top, #a4b4c1, #688298); background-image: -ms-linear-gradient(top, #a4b4c1, #688298); background-image: -o-linear-gradient(top, #a4b4c1, #688298); background-image: linear-gradient(top, #a4b4c1, #688298); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a4b4c1, endColorstr=#688298); text-decoration: none; } a.view-link { border: solid 1px #7b94a7; border-width: 0 1px; } a.cart-link { position: relative; padding-left: 40px; } .basket-icon { position: absolute; top: 5px; left: 0px; } .search-bar { position: absolute; top: 76px; left: 380px; width: 274px; height: 35px; background: #fff; border: solid 1px #cccccc; } input.search-input { float: left; border: solid 1px #fff; background: #fff; height: 31px; line-height: 31px; padding: 0; font-family: 'Droid Sans', 'Trebuchet MS', Arial, sans-serif; color: #666; margin-left: 5px; } input.search-button { float: right; margin-top: 0px; padding: 0; } .menu-temp { height: 43px; background-color: #1a4767; background-image: -webkit-gradient(linear, left top, left bottom, from(#7490a3), to(#1a4767)); background-image: -webkit-linear-gradient(top, #7490a3, #1a4767); background-image: -moz-linear-gradient(top, #7490a3, #1a4767); background-image: -ms-linear-gradient(top, #7490a3, #1a4767); background-image: -o-linear-gradient(top, #7490a3, #1a4767); background-image: linear-gradient(top, #7490a3, #1a4767); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7490a3, endColorstr=#1a4767); } .navigation-bar { height: auto; } /* --- main content and sidebar ---- */ .promo-bar { height: 43px; line-height: 43px; text-align: center; clear: both; } .bulk-white { background: #fff; border: solid 1px #eee; padding: 15px; margin-bottom: 15px; max-width: 928px; overflow: hidden; } .sidebar { float: left; width: 190px; } .page-contents { float: right; width: 723px; overflow: hidden; } /* .sidebar-list { padding: 0; margin: 0 0 15px 0; list-style: none; } .sidebar-list h2 { padding: 0 15px; color: white; line-height: 47px; font-weight: 700; font-size: 14px; background-color: #1a4767; background-image: -webkit-gradient(linear, left top, left bottom, from(#7490a3), to(#1a4767)); background-image: -webkit-linear-gradient(top, #7490a3, #1a4767); background-image: -moz-linear-gradient(top, #7490a3, #1a4767); background-image: -ms-linear-gradient(top, #7490a3, #1a4767); background-image: -o-linear-gradient(top, #7490a3, #1a4767); background-image: linear-gradient(top, #7490a3, #1a4767); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7490a3, endColorstr=#1a4767); } .sidebar-list a { padding: 8px 15px; display: block; background: #f6f6f6; border-bottom: dotted 1px #1a4767; } .sidebar-list a:hover { text-decoration: none; background: #69849a url('arrow.png') 180px center no-repeat; color: #fff; } */ /* --- footer ---- */ .footer { max-width: 930px; overflow: hidden; padding: 0 15px 15px; } ul.footer-menu { float: left; width: 180px; padding: 0; margin: 0; list-style: none; } ul.footer-menu h3 { font-size: 13px; font-weight: 700; margin: 0; padding-bottom: 0.5em; } ul.social a { display: block; height: 45px; padding-left: 45px; line-height: 35px; } ul.social a.social-facebook { background: url('facebook.png') no-repeat; } ul.social a.social-twitter { background: url('twitter.png') no-repeat; } .footer-right { float: right; width: 370px; text-align: right; } /* ---- content pages ---- */ .breadcrumb-heading { background-color: #1a4767; background-image: -webkit-gradient(linear, left top, left bottom, from(#7490a3), to(#1a4767)); background-image: -webkit-linear-gradient(top, #7490a3, #1a4767); background-image: -moz-linear-gradient(top, #7490a3, #1a4767); background-image: -ms-linear-gradient(top, #7490a3, #1a4767); background-image: -o-linear-gradient(top, #7490a3, #1a4767); background-image: linear-gradient(top, #7490a3, #1a4767); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7490a3, endColorstr=#1a4767); padding: 15px 10px; margin: 0 0 15px; color: white; width: 703px; overflow: hidden; } .breadcrumb-heading ul { padding: 0; margin: 0; list-style: none; } .breadcrumb-heading ul li { display: inline; } .breadcrumb-heading ul li a { float: left; line-height: 17px; color: white; padding: 0 14px 0 10px; background: url('arrow.png') right no-repeat; color: white; font-weight: 700; } .breadcrumb-heading ul li a.breadcrumb-first { padding-left: 0; } .section-page-heading { margin: 0 0 15px; } .section-page-heading h1 { margin-left: 3px; padding-bottom: 15px; } .section-description { background: #f6f6f6; padding: 10px; } /* .summary-list { width: 760px; overflow: hidden; } */ .product-summary { /* width: 353px;  */ border: solid 1px #ddd; /* float: left; */ background: #f6f6f6; } .product-summary-wrapper { position: relative; height: 180px; } .product-summary-image { float: left; margin: 0 10px 0 0; border: solid 1px #ddd; width: 131px; height: 131px; background: white; text-align: center; overflow: hidden; } .product-summary-content { float: left; margin: 10px 10px 0 0; width: 180px; } .product-summary h2 { font-size: 15px; height: 47px; } .product-summary-description { height: 50px; overflow: hidden; margin-bottom: 15px; } .product-summary-price { } .product-summary-price strong { font-weight: 700; } .product-summary-actions { height: 24px; width: 190px; position: relative; bottom: 0px; left: 142px; margin-top:5px; } a.blue-button, .blue-button a { float: left; line-height: 24px; width: 83px; display: block; color: white; background: url('blue-button-bg.png'); font-weight: 700; text-align: center; margin-right: 15px; } a.blue-button:hover, .blue-button a:hover { text-decoration: none; background: url('blue-button-bg.png') 0 24px; } .cart-button-small { float: left; padding: 0; } .cart-button-small:hover { opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ cursor: pointer; } /* ---- product details ---- */ .product-details-left { width: 405px; float: left; } .brand-image { float: right; margin: 0 0 10px 10px; } .product-details-left h1 { padding: 0.25em 0 0.25em 0; } .product-details-code { padding-bottom: 1.75em; } .product-details-price { padding-bottom: 1.75em; } .product-details-price strong { font-size: 18px; font-weight: 700; } .product-details-options { padding-bottom: 1.75em; } .product-details-actions { height: 55px; } input.regular-cart-button { float: left; padding: 0; margin: 0 15px 0 0; } input.regular-cart-button:hover { opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ cursor: pointer; } .stock-message { font-weight: 700; line-height: 17px; padding-left: 25px; margin-top: 12px; float: left; margin-right: 15px; } .in-stock { background: url('stock-icon.png') no-repeat; color: #6ea616; } .out-of-stock { background: url('stock-icon.png') 0 -17px no-repeat; color: #b42231; } a.pdf-download { color: #b42231; line-height: 17px; padding-left: 25px; margin-top: 12px; background: url('pdf-icon-2.png') left no-repeat; display: block; float: left; } .product-details-description { padding: 10px; background: #f6f6f6; margin-bottom: 15px; } .tab-area { clear: both; position: relative;	 } ul.tabs { padding: 0; margin: 0; list-style: none; height: 30px; } ul.tabs li { display: inline;	 } ul.tabs li a { display: block; margin-right: 3px; color: #666; float: left; line-height: 29px; border: solid 1px #ddd; padding: 0 10px; background: #f6f6f6; border-bottom: 0; } ul.tabs li a.selected { line-height: 30px; background: #fff; border-bottom: solid 1px #fff; } ul.tabs li a:hover { background: #fff; text-decoration: none; } .tab-contents-here { border: solid 1px #ddd; padding: 15px; } .tabcontent{ display: none; } .tabcontent h2 { color: #1f4c6b; font-weight: 700; margin: 0; padding: 0 0 13px 0; font-size: 14px; } .tabcontent p { padding: 0 0 15px 0; } @media print { .tabcontent { display:block !important; } } .product-details-right { width: 305px; float: right; } .product-details-image { position: relative; padding-top: 2px; margin-bottom: 15px; margin-left: 3px; border: solid 1px #ddd; text-align: center; } .product-details-image img { max-width: 300px; } a.image-flag { display: block; width: 86px; height: 86px; position: absolute; top: 0; right: 0; z-index: 999; } a.image-flag img { border: 0; } .related-list { width: 305px; } .related-list .related-product { width: 305px; float: none; position: relative; margin: 0 0 15px 0; } .related-list .product-summary-image  { width: 100px; } .related-list .product-summary-image img { width: 100px; height: 100px; } .related-list h2 { font-size: 15px; } .related-list .product-summary-content { width: 170px; } .related-list .product-summary-actions { width: auto; left: auto; position: relative; height: 24px; clear: both; padding-left: 112px; } a.orange-button, div.orange-button { line-height: 24px; width: 94px; display: block; color: white; background: url('orange-button-bg.png'); font-weight: 700; text-align: center; } a.orange-button:hover, div.orange-button:hover { text-decoration: none; opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ } /* home-page */ .blue-banner { background-color: #1a4767; background-image: -webkit-gradient(linear, left top, left bottom, from(#7490a3), to(#1a4767)); background-image: -webkit-linear-gradient(top, #7490a3, #1a4767); background-image: -moz-linear-gradient(top, #7490a3, #1a4767); background-image: -ms-linear-gradient(top, #7490a3, #1a4767); background-image: -o-linear-gradient(top, #7490a3, #1a4767); background-image: linear-gradient(top, #7490a3, #1a4767); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7490a3, endColorstr=#1a4767); padding: 10px; height: 27px; margin: 0 0 15px; clear: both; } .blue-banner h1, .blue-banner p  { color: white; padding: 0; line-height: 27px; font-weight: 700; } .blue-banner a  { color: white; } .banner-center { text-align: center; } .banner-small-heading { font-size: 16px; } .banner-left { float: left; } .banner-right { float: right; } .featured-products-box { background: #f6f6f6; border: solid 1px #ddd; margin: 0 0 15px; padding: 15px 0; overflow: hidden; } .product-home { width: 185px; text-align: center; float: left; } .product-home-image { width: 130px; / height: 130px; / height: 115px; padding-top: 15px; margin: 0 auto 15px auto; border: solid 1px #ddd; background: #fff; } .product-home h2 { font-size: 15px; }  a.home-info { display: block; float: left; width: 455px; height: 148px; margin: 0 0 15px 0; background-color: #f6f6f6; border: solid 1px #ddd; color: #333; position: relative; background-position: right; background-repeat: no-repeat; } a.home-info:hover { background-color: #f9f9f9; text-decoration: none; } a.home-info h1 { margin: 10px; padding: 0.25em 0; text-transform: uppercase; } a.home-info p { margin: 0 150px 10px 10px; } a.home-info .orange-button { position: absolute; bottom: 10px; left: 10px; } a.multi-buy { background-image: url('home-multi.jpg');   } a.engineers { background-image: url('home-engineers.jpg'); } a.flooding { background-image: url('home-flooding.jpg'); } a.brewing { background-image: url('home-brewing.jpg'); } .home-bottom { clear: both; } .home-bottom .payment-logos { float: right; margin: 0; } .home-bottom .blue-banner { height: 75px; width: 700px; margin: 0; float: left; overflow: hidden; } input.checkout-button { background: #24506e; height: 30px; font: 13px/1em 'Open Sans', Helvetica, Arial, sans-serif; color: white; font-weight: 700; padding: 0 20px; border: solid 1px #24506e; outline: none; margin: 0; } input.checkout-button:hover { border: solid 1px #fd6f40; background: #fd6f40; cursor: pointer; } .centri-content { padding-bottom: 2em; } input.checkout-button { margin-left: 1px; } td.search-input { position: relative; } /* ########################################### Media Queries ############################################*/ /**************************************************** Smart Phones Portrait *****************************************************/ @media only screen and (max-width: 479px) { .show-on-responsive { display: block; } .hide-on-responsive { display: none; } .header { height: auto; width: auto; } .top-bar ul { border-right: 0; height: auto; } .top-bar ul li { float: left; border-left: 0; padding: 0 5px; color: #666; } .top-bar ul li a { color: #666; } .logo { float: none; text-align: center; width: 80%; height: auto; margin: 0 auto 15px; } .logo img { width: 80%; height: auto; } .promo-bar { display: none; } .bulk-white { padding: 0.5em; width: auto; } .sidebar { float: none; width: auto; } .breadcrumb-heading { width: auto; } .content-area h1 { font-size: 18px; } .product-summary-wrapper{ height: auto; } .product-summary-image, .product-summary-image img { width: 80px; height: 80px; float: none; } .product-summary-content { width: auto; float: none; margin-bottom: 1em; } .product-summary-actions { height: auto; width: auto; position: relative; bottom: 0px; left: 0; } .product-details-left { width: auto; float: none; } .brand-image { display: none; } .product-details-actions { height: auto; } input.regular-cart-button { float: none; margin: 0 0 15px 0; } .stock-message { float: none; margin: 0 0 15px 0; } a.pdf-download { float: none; margin: 0 0 15px 0; } ul.tabs li a { font-size: 10px; } .product-details-right { width: auto; float: none; margin-top: 1em; } .related-list { width: auto; } .related-list .related-product { width: auto; height: auto; } .related-list .product-summary-actions { position: relative; width: auto; left: 0; padding: 0; } #recaptcha_area .recaptchatable .recaptcha_image_cell { background: none !important; } #recaptcha_area .recaptchatable #recaptcha_privacy { padding: 5px !important; } /* --- home page responsive --- */ .blue-banner { height: auto; } .banner-left { float: none; } .banner-right { float: none; } .featured-products-box { width: auto; margin-bottom: 15px; } .product-home { float: none; width: auto; } a.home-info { float: none !important; width: auto; height: auto; margin: 0 0 15px 0 !important; } a.home-info p { margin: 0 10px 10px 10px; } a.multi-buy, a.engineers, a.flooding, a.brewing { background-image: none;  } a.home-info .orange-button { position: relative; } .home-bottom .payment-logos { float: none; text-align: center; } .home-bottom .blue-banner { width: auto; height: auto; margin-bottom: 15px; } .footer { width: auto; padding: 0 15px 15px; } ul.footer-menu { float: none; width: auto; margin-bottom: 1em; } ul.footer-menu li { padding: 0.5em 0; } .footer-right { float: none; width: auto; text-align: left; } #idTblLogin .input-text { width: 150px; } input.checkout-button { padding: 0 10px; } .navigation-bar ul li a.sel:link,  .navigation-bar ul li a.sel:visited,  .navigation-bar ul li a.sel:active,  .navigation-bar ul li a:hover { background: none; } .dsMobRight input { /* quantity field in cart */ width :15px; } } /**************************************************** This is meant to be for mobile devices landscape *****************************************************/ @media only screen and (min-width: 480px) and (max-width: 767px) { .show-on-responsive { display: block; } .hide-on-responsive { display: none; } .header { height: auto; width: auto; } .top-bar ul { border-right: 0; height: auto; } .top-bar ul li { float: left; border-left: 0; padding: 0 5px; color: #666; } .top-bar ul li a { color: #666; } .logo { float: none; text-align: center; width: 80%; height: auto; margin: 0 auto 15px; } .logo img { width: 80%; height: auto; } .promo-bar { display: none; } .bulk-white { padding: 0.5em; width: auto; } .sidebar { float: none; width: auto; } .breadcrumb-heading { width: auto; } .product-summary-wrapper{ height: auto; } .product-summary-image, .product-summary-image img { width: 80px; height: 80px; float: none; } .product-summary-content { width: auto; float: none; margin-bottom: 1em; } .product-summary-actions { height: auto; width: auto; position: relative; bottom: 0px; left: 0; } .product-details-left { width: auto; float: none; } .brand-image { display: none; } .product-details-actions { height: auto; } input.regular-cart-button { float: none; margin: 0 0 15px 0; } .stock-message { float: none; margin: 0 0 15px 0; } a.pdf-download { float: none; margin: 0 0 15px 0; } ul.tabs li a { font-size: 10px; } .product-details-right { width: auto; float: none; margin-top: 1em; } .related-list { width: auto; } .related-list .related-product { width: auto; height: auto; } .related-list .product-summary-actions { position: relative; width: auto; left: 0; } /* --- home page responsive --- */ .blue-banner { height: auto; } .banner-left { float: none; } .banner-right { float: none; } .featured-products-box { width: auto; margin-bottom: 15px; } .product-home { float: none; width: auto; } a.home-info { float: none !important; width: auto; height: auto; margin: 0 0 15px 0 !important; } a.home-info p { margin: 0 10px 10px 10px; } a.multi-buy, a.engineers, a.flooding, a.brewing { background-image: none;   } a.home-info .orange-button { position: relative; } .home-bottom .payment-logos { float: none; text-align: center; } .home-bottom .blue-banner { width: auto; height: auto; margin-bottom: 15px; } .footer { width: auto; padding: 0 15px 15px; } ul.footer-menu { float: none; width: auto; margin-bottom: 1em; } ul.footer-menu li { padding: 0.5em 0; } .footer-right { float: none; width: auto; text-align: left; } #recaptcha_area .recaptchatable #recaptcha_privacy { padding: 5px !important; } .navigation-bar ul li a.sel:link,  .navigation-bar ul li a.sel:visited,  .navigation-bar ul li a.sel:active,  .navigation-bar ul li a:hover { background: none; } } /**************************************************** iPad Portrait *****************************************************/ @media screen and (min-width: 768px) and (max-width: 959px) {  .top-bar ul li { padding: 0 10px; } .header { width: auto; height: auto; overflow: hidden; clear: both; padding-bottom: 10px; } .header-right { height: auto; width: 300px; } .contact-details { margin: 10px 0 50px; } .contact-details strong { display: block; text-align: right; } .search-bar { top: 63px; left: auto; right: 0px; } .shopping-cart { } .bulk-white { width: auto; } .content-minus-one { width: 100%; } #left-sidebar { width: 100%; } #left-sidebar .sidebar { width: 100%; float: none; } #left-sidebar .sidebar .sidebar-element { width: 100%; float: none; } .footer-right { float: none; width: auto; text-align: left; clear: both; padding-top: 15px; } a.home-info { width: auto; float: none !important; margin: 0 0 15px 0 !important; } .product-details-left { float: left; width: 380px; } .breadcrumb-heading  { width: auto;   } .product-summary-content{ margin-right: 0; width: 175px; } } /**************************************************** Tablet Landscape - Devices and Browsers  *****************************************************/ @media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) { } /**************************************************** 1024 resolution Desktop Styles *****************************************************/ @media only screen and (min-width: 960px) and (max-width: 1050px) { } /**************************************************** iPad / Tablet Landscape,  only shows on tablet not on website  *****************************************************/ @media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px)  and (orientation : landscape) { } @media only screen and (max-width: 1064px) { } @media only screen and (max-width:1050px) { } @media only screen and (max-width:1000px) { } @media only screen and (max-width:959px) { } @media only screen and (max-width: 873px) { } @media only screen and (min-width: 767px) and (max-width: 790px) { } @media only screen and (min-width: 767px) { } @media only screen and (max-width: 767px) { } @media only screen and (min-width:615px) { } @media only screen and (max-device-width: 767px) and (orientation: portrait) { } @media only screen and (max-device-width: 767px) and (orientation: landscape) { } @media screen and @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width: 767px) { } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width: 479px) { } @media only screen and (min-width: 450px) and (max-width: 1000px) { .blue-banner {height: 45px;} }