/* Custom Dropdown only used in product details and Top ten */ .custom-select { width:100%; height:38px; background:#fff; border:1px solid #c4c4c4; border-radius:4px; position:relative; } .custom-select:after { content:"\25bc"; display:block; background:#fff; color:#0068c5; position:absolute; top:0; right:0; bottom:0; z-index:1; font-size:18px; padding:7px 10px; border-left:1px solid #dfdfdf; border-top-right-radius:4px; border-bottom-right-radius:4px;} .custom-select:hover:after { color:#f36f21; } .custom-select select { background:transparent; color:#000; width:100%; padding:10px 44px 10px 10px; font-size:14px; line-height:1; border:0; border-radius:0; height:38px; appearance:none; -moz-appearance:none; -webkit-appearance:none; outline:0; position:absolute; left:0; z-index:2; } .custom-select select::-ms-expand { display:none; } /* === Hack for ie to hide select default arrow === */ /* end - Custom Dropdown */ @font-face { font-family: 'Single Sleeve'; font-style: normal; font-weight: normal; src: url('/webFonts/singlesleeve-webfont.eot'); src: url('/webFonts/singlesleeve-webfont.eot?#iefix') format('embedded-opentype'), url('/webFonts/singlesleeve-webfont.woff2') format('woff2'), url('/webFonts/singlesleeve-webfont.woff') format('woff'), url('/webFonts/singlesleeve-webfont.ttf') format('truetype'); } .sleeve{font-family: 'Single Sleeve';} /* Product Quick View Drop Down */ .prod-box .prodThumb img { border-radius:10px; } /* Form with animated label */ .form-qlp .field { position:relative; display:block; } .form-qlp input, .form-qlp textarea { background-color:#fff; color:#777676; border:1px solid #c4c4c4; border-radius:4px; width:100%; padding:10px; margin-bottom:15px; font-size:14px; } .form-qlp input:focus, .form-qlp textarea:focus { border-color:#036ac2; color:#000; } .showInvalid .field :invalid, .showInvalid .field .invalid {box-shadow: rgb(255,0,0) 0px 0px 1.5px 1px; border-color: red;} /*.showInvalid :-moz-submit-invalid {box-shadow: rgb(255,0,0) 0px 0px 1.5px 1px; border-color: red;}*/ .showInvalid :-moz-ui-invalid {box-shadow:rgb(255,0,0) 0px 0px 1.5px 1px; border-color: red;} .form-qlp .field.hasValue input, .form-qlp .field.hasValue textarea, .form-qlp .field.hasValue select { color:#777676; } .form-qlp .field.hasValue span, .form-qlp .field input:focus + span, .form-qlp .field select:focus + span, .form-qlp .field textarea:focus + span { background: #efefef; color: #777676; height: 11px; top: -10px; font-weight:bold; -moz-font-smoothing: none; -webkit-font-smoothing: antialiased; } .form-qlp .field-hint{ top: -15px; font-size: 12px; text-align: right; color: #777676; z-index: 10; position: relative; } .form-qlp .field-hint i{ color:blue; cursor: pointer; z-index: 10; } .form-qlp .field.with-divider{border-bottom:1px solid #c4c4c4; margin-bottom:20px;} .form-qlp .field.with-divider input, .form-qlp .field.with-divider textarea { margin-bottom:15px; } .form-qlp .checkbox-label { margin-bottom:15px; } /* .checkbox */ .checkbox-label { display:block; } .checkbox { width:20px; height:20px; position: relative; display:inline-block; } .checkbox span { width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0; border-radius:2px; border:2px solid #0068c5; background:#fff; } .checkbox span:after { content: "\2713"; position: relative; font-weight: normal; background: transparent; color: #0068c5; font-size: 19px; opacity: 0; text-align: center; margin: auto; line-height: 1; vertical-align: top; } /*.checkbox span:hover::after { opacity: 0.3; }*/ .checkbox input[type=checkbox] { visibility: hidden; padding:0; margin:0; } .checkbox input[type=checkbox]:checked + span:after { opacity: 1; } .checkbox-label a{cursor: pointer;text-decoration: underline;} label.checkbox-label, label[for]{cursor: pointer;} /* end .checkbox */ /* exceptions to the above about page, and share form */ .contact-page .send-message .form-qlp .field.hasValue span, .contact-page .send-message .form-qlp input:focus + span, .contact-page .send-message .form-qlp select:focus + span, .contact-page .send-message .form-qlp textarea:focus + span , .about_us .in_touch .form-qlp .field.hasValue span, .about_us .in_touch .form-qlp input:focus + span, .about_us .in_touch .form-qlp select:focus + span, .about_us .in_touch .form-qlp textarea:focus + span { background: #effaff; } .product-review .form-qlp .field.hasValue span, .product-review .form-qlp input:focus + span, .product-review .form-qlp select:focus + span, .product-review .form-qlp textarea:focus + span, .form-share.form-qlp .field.hasValue span, .form-share.form-qlp input:focus + span, .form-share.form-qlp select:focus + span, .form-share.form-qlp textarea:focus + span { background: #fff; } .form-qlp input.error, .form-qlp textarea.error{ border-color:#ff0101; color:#ff0101; } .form-qlp .field span { outline: none; transition:all 0.2s ease-in-out 0s; position:absolute; top:11px; left:10px; z-index:2; font-size:14px; line-height:normal; color:#a9a9a9; padding-left:4px; white-space: nowrap;} .form-qlp .field span strong { color:#f70909; } .form-qlp .field span:after { transition:all 0.3s ease-in-out 0s; background:none; content:""; display:block; } .form-qlp .state-zip { } .form-qlp .state-zip .state { display:inline-block; width:46%; margin-right:1%; float:left; } .form-qlp .state-zip .state .field { width:100%; } .form-qlp .state-zip input { display:inline-block; /*width:52%;*/ vertical-align:top; float:right; } .form-qlp .state-zip .field { float:right; width:46%; } .form-qlp .btn { text-align:center; } .form-qlp .btn button { background:#f36f21; border-radius:4px; border:0; color:#fff; padding:15px 20px; font-size:18px; font-weight:bold; text-transform:uppercase; } .form-qlp .btn button:hover { background:#37b345; } .form-qlp .btn button:before { content:""; display:inline-block; vertical-align:baseline; background:url(/cached/396/images/sprite-freesample-req.png) no-repeat 0 -54px; width:13px; height:18px; margin-right:8px; } .form-qlp input[disabled], .form-qlp select[disabled], .form-qlp textarea[disabled] {background: #e0e0e0;} .form-qlp input[readonly], .form-qlp select[readonly], .form-qlp textarea[readonly] {} /* facet tweaks */ .sidebar-filters .form-qlp .field span{ font-size: 10px; left: 0; padding: 0; width: 100%; text-align: center; max-width: 100px; } .sidebar-filters .form-qlp .field .calendar-field span{ padding-left: 4px; width:auto; text-align: left; top: -13px; } .sidebar-filters .form-qlp .field.hasValue span, .sidebar-filters .form-qlp input:focus + span, .sidebar-filters .form-qlp select:focus + span, .sidebar-filters .form-qlp textarea:focus + span { background: #fff; } .sidebar-filters .form-qlp input{margin:0;} /* Chat Button Styles */ .chat-button { display:none; } /* end - Chat Button Styles */ @media(min-width:850px) { /* Chat Button Styles */ .chat-button { cursor: pointer; transition:height 0.2s ease-in-out 0s,padding 0.2s ease-in-out 0s; background:#ff6a25; font-size:14px; text-decoration:none; display:block; padding:10px 64px 10px 15px; color:#fff; height:36px; position:fixed; bottom:0; right:10%; z-index:99999; border-radius:4px 4px 0 0; } .chat-button:after { content:""; display:block; background:url(/cached/396/images/sprite-wrapper-layout.png) no-repeat -564px 0; width:32px; height:17px; position:absolute; top:10px; right:10px; } .chat-button:hover { background:#37b345; padding-bottom:40px; height:50px; } .chat-button:hover:after { background-position:-608px 0; top:10px; margin:0; } /* end - Chat Button Styles */ .chat-button.jiggle { animation: jiggle 0.2s 10; -webkit-animation: jiggle 0.2s 10; -moz-animation-duration: 0.2s; -moz-animation-name: jiggle; -moz-animation-iteration-count: 10; } } @keyframes jiggle { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @-webkit-keyframes jiggle { 0% { -webkit-transform: rotate(-3deg); } 50% { -webkit-transform: rotate(3deg); } } @-moz-keyframes jiggle { 0% { -moz-transform: rotate(-3deg); } 50% { -moz-transform: rotate(3deg); } } /* Tooltip */ .tooltip-bubble{ font-size: 12px; font-family: Verdana,Arial,sans-serif; text-align: center; text-shadow: 0 1px rgba( 255, 255, 255, .5 ); color: #000; background: #fff; /* background: -webkit-gradient( linear, left top, left bottom, from( rgba( 255, 255, 255, .6 ) ), to( rgba( 255, 255, 255, .8 ) ) ); background: -webkit-linear-gradient( top, rgba( 255, 255, 255, .6 ), rgba( 255, 255, 255, .8 ) ); background: -moz-linear-gradient( top, rgba( 255, 255, 255, .6 ), rgba( 255, 255, 255, .8 ) ); background: -ms-radial-gradient( top, rgba( 255, 255, 255, .6 ), rgba( 255, 255, 255, .8 ) ); background: -o-linear-gradient( top, rgba( 255, 255, 255, .6 ), rgba( 255, 255, 255, .8 ) ); background: linear-gradient( top, rgba( 255, 255, 255, .6 ), rgba( 255, 255, 255, .8 ) ); */ border-radius: 8px; -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); -moz-box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); position: absolute; z-index: 1500; padding: 10px 15px; max-width: 400px; } .tooltip-bubble:after, .tooltip-bubble:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .tooltip-bubble:after { border-color: rgba(136, 183, 213, 0); border-top-color: rgba( 255, 255, 255, 1 ); border-width: 10px; margin-left: -10px; } .tooltip-bubble:before { border-color: rgba(194, 225, 245, 0); border-top-color: #d3d3d3; border-width: 11px; margin-left: -11px; } /* .tooltip-bubble:after{ width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; border-top-color: rgba( 255, 255, 255, 1 ); content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; } .tooltip-bubble:before { content: ''; display: block; position: absolute; left: 50%; bottom: -20px; margin-left: -10px; width: 0; height: 0; border-color: #000 transparent transparent transparent; border-style: solid; border-width: 10px; } */ .tooltip-bubble.top:after{ border-top-color: transparent; border-bottom: 10px solid #333; border-bottom-color: rgba( 255, 255, 255, 1 ); top: -20px; bottom: auto; } .tooltip-bubble.top:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #d3d3d3; top: -22px; bottom: auto; } .tooltip-bubble.left:after{ left: 10px; margin: 0; } .tooltip-bubble.right:after{ right: 10px; left: auto; margin: 0; } .tooltip-bubble.left:before{ left: 9px; margin: 0; } .tooltip-bubble.right:before{ right: 9px; left: auto; margin: 0; } .qlp-alert-box { color:#fff; border-radius:10px; font-size:1.6em; padding:1em; margin:auto; background:#37b345; border:1px solid #ccc; position:fixed; top:30%; left:0; right:0; z-index: 9999; width:600px; max-width:85%; text-align:center; } @media(min-width:1280px) { /* Side bar pops in side at this size */ /* end - Chat Button Styles */ .qlp-alert-box {left:250px;} .template-no-sb .qlp-alert-box {left:0px;} } body.unfocus .hellobar{ z-index:10; } .hellobar .search-box .search-btn span { font-size:2em; display:inline-block; width:0.4em; height:0.4em; border:0.1em solid #fff; position:relative; border-radius:0.35em; box-sizing:initial; } .hellobar .search-box .search-btn span:before { content:""; display:inline-block; position:absolute; right:-0.25em; bottom:-0.1em; border-width:0; background:#fff; width:0.35em; height:0.09em;-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); } /* New Hellobar styles */ .hellobar { display:none;background:#efefef; position:fixed; top:57px; left:0; right:0; z-index:801; -webkit-box-shadow: 0px 3px 5px 0px rgba(173,173,173,0.53); -moz-box-shadow: 0px 3px 5px 0px rgba(173,173,173,0.53); box-shadow: 0px 3px 5px 0px rgba(173,173,173,0.53); } .hellobar > .content, .hellobar nav.main { display:none; } .hellobar .content { height:auto; margin:auto; } .hellobar .currently-viewing .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hellobar .currently-viewing { background:#fff; padding:5px 0 6px; } .hellobar .currently-viewing .prodimg { width:20%; max-width: 60px; text-align: center; display: block; margin: auto; vertical-align: middle; position:relative; } .hellobar .currently-viewing .prodimg a { transition:all 0.2s ease-in-out 0s; display:inline-block; } .hellobar .currently-viewing .prodimg:hover a { transform:scale(1.2,1.2); } .hellobar .currently-viewing .prodinfo { font-size: 11px; color: #787878; text-decoration: none; text-align: center; width: 45%; max-width: 120px; display: block; margin: auto; vertical-align: middle; } .hellobar .currently-viewing .prodinfo sup { font-size:14px; position: relative; top: 2px; line-height: 14px; } .hellobar .currently-viewing .prodinfo span:nth-of-type(1) { display:block; font-weight:500; font-size:10px; line-height: 11px; margin-bottom: 3px; } .hellobar .currently-viewing .prodinfo span:nth-of-type(2) { display:block; font-size:22px;line-height: 22px; color:#030303; margin-bottom: 3px; } .hellobar .currently-viewing .prodinfo span:nth-of-type(3) { font-weight:bold; font-size:12px;line-height: 8px; } .hellobar .currently-viewing .prodinfo span:nth-of-type(3) sup { position: relative; top: 4px; left: 1px; } .hellobar .currently-viewing .tabs { display:none;} .hellobar .currently-viewing .btn-link { background:#176cbf; border:0; border-radius:5px; color:#fff; padding:8px; height:auto; line-height:normal; font-size:11px; font-weight:300; letter-spacing:1px; width: 33%; display: block; margin: auto; vertical-align: middle; } .hellobar .currently-viewing .btn-link:hover { background:#fd6e02; } /* end - New Hellobar styles */ .hellobar .currently-viewing .prodimg img {width:100%; padding-left: 10px; max-width: 60px; } .hellobar.hide { display: none !important; } .pi-no-price .need-sooner-date { display: none;} .hellobar .currently-viewing .prodinfo.pi-no-price span:nth-of-type(2) { margin-bottom: 0; } @media(min-width:375px){ .hellobar .currently-viewing .btn-link { font-size:13px; width: 32%; } } @media(min-width:600px){ /* New Hellobar styles */ /* .hellobar .content { width:570px; }*/ .hellobar .currently-viewing .tabs { display:block; max-width: 230px; display: block; margin: auto; vertical-align: middle; width: 40%; } .hellobar .currently-viewing .tabs a { display:inline-block; padding:6px 0; background:#dfdfdf; font-size:13px; color:#000; text-decoration:none; font-weight:500; width:74px; text-align:center;margin-right:2px; } .hellobar .currently-viewing .tabs a:hover { background:#176cbf; color:#fff; } .hellobar .currently-viewing .tabs a.active { background:#176cbf; color:#fff; } .hellobar .currently-viewing .tabs a:first-child { border-bottom-left-radius:2px; border-top-left-radius:2px; } .hellobar .currently-viewing .tabs a:last-child { border-bottom-right-radius:2px; border-top-right-radius:2px; } .hellobar .currently-viewing .prodimg { width: 11%; } .hellobar .currently-viewing .prodinfo { width: 25%; } .hellobar .currently-viewing .btn-link { width: 21%; } } @media (min-width:768px) { /* Hello Bar Styles */ .overlay-hellobar { display:none; background:rgba(0,0,0,0.5); position:absolute; top:0; left:0; bottom:-145px; right:0; z-index:1002; } .overlay-hellobar.active { display:block; } .hellobar { z-index:110; top:0;} .hellobar .content { display:block; width:730px; height:51px; margin:auto; padding:8px 0; } .hellobar .logo-box { display:inline-block; position:relative; margin:0 18px 0 10px; width:40px; height:35px; vertical-align:bottom; } .hellobar .qlp-logo { background:url(/cached/396/images/_logos/QLP_logo_homepage_footer.svg) no-repeat 0 0; background-size: contain; display:inline-block; text-indent:-9999em; width:40px; height:35px; } .hellobar .qlp-logo:hover { width:48px; height:42px; position:absolute; top:0; left:0; margin-top:-4px; margin-left:-4px; } .hellobar .search-box { display:inline-block; font-size:14px; width:49%; margin-right:2px; } .hellobar .search-box .search-field { width:84%; display:inline-block; position:relative; } .hellobar .search-box .search-field:before { display:block; content:" "; position:absolute; top:7px; left:8px; width:20px; height:20px; background:url(/cached/396/images/sprite-wrapper-layout.png) no-repeat; background-position:-245px -282px; } .hellobar .search-box .search-field.focus input { padding-left:12px; } .hellobar .search-box .search-field.focus:before { display:none; } .hellobar .search-box .search-field input { transition:all 0.2s ease-in-out 0s; width:100%; height:35px; display:inline-block; border:1px solid #8f8f8f; border-right:0; background:#fff; color:#000; padding:0 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .hellobar .search-box .search-btn { background:#ff6a25; height:35px; display:inline-block; vertical-align:bottom; font-size:20px; font-weight:lighter; color:#fff; border:1px solid #8f8f8f; border-radius: 0; border-left:0; border-bottom-right-radius:4px; border-top-right-radius:4px; padding:0 16px; } .hellobar .search-box .search-btn:hover { background:#37b345; } .hellobar .search-box .search-btn span { font-size:1.5em; } .hellobar .categories { width:132px; position:relative; height:22px; margin:0 10px; display:inline-block; } .hellobar .categories a { color:#000; font-size:16px; text-transform:uppercase; text-decoration:none; position:absolute; top:-10px; left:6px; padding:16px 34px 16px 6px; display:inline-block; line-height:21px;} .hellobar .categories.active a, .hellobar .categories a:hover { background:#1c5075; color:#fff; } .hellobar .categories a:after { content: " "; position: absolute; right:8px; top:18px; width: 0; height: 0; border-right:9px solid transparent; border-left:9px solid transparent; border-top:12px solid #000; } .hellobar .categories a:hover:after, .hellobar .categories.active a:after { border-top-color:#fff; } .hellobar .livechat { color:#000; font-size:16px; text-decoration:none; display:inline-block; padding-left:24px; margin-right:28px; position:relative; margin-left:30px;cursor:pointer; } .hellobar .livechat:hover { color:#fa6e19; } .hellobar .livechat:before { background:url(/cached/396/images/sprite-wrapper-layout.png) no-repeat -613px -702px; content:" "; display:block; width:21px; height:18px; position:absolute; top:0; left:0; } .hellobar .livechat:hover:before { background-position:-574px -702px; } .hellobar .call { display:inline-block; font-size:16px; color:#000; text-decoration:none; padding-left:15px; border-left:1px solid #bbb; } .hellobar .call:hover { color:#ff6a25; } .hellobar .call:before { display:inline-block; content:" "; background:url(/cached/396/images/sprite-wrapper-layout.png) no-repeat -617px -736px; width:13px; height:22px; vertical-align:sub; margin-right:6px; } .hellobar .call:hover:before { background-position:-577px -736px; } .hellobar .currently-viewing { background:#fff; padding:0; } .hellobar .currently-viewing .content { height:auto; } .hellobar .currently-viewing .prodimg:hover a { transform:scale(1.2,1.2); } .hellobar .currently-viewing .prodinfo { width: 20%; } .hellobar .currently-viewing .prodinfo span:nth-of-type(1) { /*display:block; font-weight:500;*/ font-size:10px; } .hellobar .currently-viewing .prodinfo span:nth-of-type(2) { font-size:25px; line-height: 20px; } .hellobar .currently-viewing .prodinfo span:nth-of-type(3) { /*font-weight:bold;*/ font-size:14px; line-height: 15px;} .hellobar .currently-viewing .tabs { width: 41%; max-width: 280px; } .hellobar .currently-viewing .tabs a { font-size:14px; width:90px;} .hellobar .currently-viewing .btn-link { border-radius:5px; width:26%; font-size:15px; } /* Dropdown styles for Hellobar after injecting html into hellobar */ .hellobar nav.main { display:none; height:0; } .hellobar nav.main.active { display:block; } .hellobar nav.main .main-submenu { top:0; z-index:1; -webkit-box-shadow: 0px 6px 12px 0px rgba(50,50,50,0.55); -moz-box-shadow: 0px 6px 12px 0px rgba(50,50,50,0.55); box-shadow: 0px 6px 12px 0px rgba(50,50,50,0.55); } /* end - Hello Bar Styles */ } @media(min-width:992px) { /* Hello Bar Styles */ .hellobar .content { width:908px; } .hellobar .qlp-logo { margin-right:30px; } .hellobar .search-box { width:53%; margin-right:8px; } .hellobar .categories { margin-right:20px; width:160px; } .hellobar .categories a { width:138px; padding-left:14px; left:12px; } .hellobar .categories > a:after { right:10px; } .hellobar .livechat {margin-right:43px;margin-left:55px;} .hellobar .call { padding-left:25px; } .hellobar .currently-viewing .tabs { padding-left: 3%; max-width: 340px; } .hellobar .currently-viewing .tabs a { width:100px; } } @media (min-width:1280px) { /* Global Off-Center Styles */ /* .hellobar .content { margin-left:-341px; left:50%; position:relative; } */ .hellobar .content { margin-left:auto; left:auto; position:relative; } }/* Copied styles from wrapper-layout.css for Similar Items Prod Box */ .similar-items .ss-box { width:32%; display:inline-block; float:left; color:#000; font-size:14px; line-height:15px; padding:8px 8px 18px; position:relative; text-align:center; } .similar-items .ss-box:hover { background:#f1f1f1; cursor:pointer; } .similar-items .ss-box:after { display:block; width:1px; height:100%; background:#ccc; content:"."; position:absolute; top:0; right:0; font-size:0; color:#ccc; } .similar-items .ss-box .prodThumb { margin-bottom: 5px; position: relative; text-align: center; } .similar-items .ss-box .prodThumb .thumbnail { border-radius:10px; margin:5px auto; } .similar-items .ss-box a { display:block; color:#000; text-decoration:none; } .similar-items .ss-box:hover { cursor:pointer; } .similar-items .ss-box .price { border-bottom:1px solid #e5e5e5; padding:7px 0; margin:0; } .similar-items .ss-box .price .red { color:#ff0000; } .similar-items .ss-box .order-asfew { font-size:12px; font-style:italic; } /* Search Suggest Styles */ header.template .container-search-suggest { position:static; } .search-suggest { position:absolute; top:131px; left:0; right:0; z-index:10; background:#fff; padding:15px 0 0; text-align:center;box-shadow: 0 5px 5px -3px rgba(50, 50, 50, 0.62); } .sticky-header .search-suggest { height:382px; overflow-y:auto; top:129px; } .search-suggest .similar-items { padding:10px 0; } .search-suggest h3 { color:#909090; font-size:16px; text-transform:uppercase; text-align:center; } .search-suggest h3 span { font-weight:normal; text-transform:none; } .search-suggest h3 + div { text-align: center; padding:10px 0; } .search-suggest .ss-box:after { display:none; } .search-suggest .ss-box:before { right:0; height:94%; } .search-suggest .ss-box .price, .search-suggest .ss-box .order-asfew { border-bottom:0; padding:4px 0; } .search-suggest .ss-box .price { font-weight:bold; } .search-suggest .btn-seemore-results { background:#ff6a25; border-radius:4px; display:inline-block; padding:12px 10px; width:88%; color:#fff; text-decoration:none; margin-bottom:20px; font-size:15px; } .search-suggest .btn-seemore-results:hover { background:#37b345; } .search-suggest .related-searches span { text-transform:uppercase; display:block; text-align:left; padding:0 20px 10px;font-weight:bold; } .search-suggest .related-searches a { display:inline-block; width:50%; background:#efefef; border-right:1px solid #c3c3c3; border-top:1px solid #c7c7c7; padding:15px; color:#010101; text-decoration:none; } .search-suggest .related-searches a + a { border-right:0; } .search-suggest .related-searches a:hover { background:#086ac2; color:#fff; } /*Override homepage price span product box*/ .ss-box .price span { display: inline; font-size: 14px; font-weight: bold; margin: 0; line-height: 15px; } /* Tablet */ @media(min-width:768px) { header.template .search-box { position:relative; } /* Search Suggest Styles */ .search-suggest { top:65px; left:-80px; width:600px; padding:15px 20px 0; border:1px solid #d2d2d2; border-radius:4px; -webkit-box-shadow: 0px 2px 15px 0px rgba(50,50,50,0.75); -moz-box-shadow: 0px 2px 15px 0px rgba(50,50,50,0.75); box-shadow: 0px 2px 15px 0px rgba(50,50,50,0.75); } .search-suggest:before { width:0; height:0; display:block; content:"\25B2"; position:absolute; top:-21px; left:50%; font-size:24px; margin-left:-30px; color:#fff; text-shadow:0px -2px 1px #bfbfbf; -ms-transform:scaleX(2.5); -webkit-transform:scaleX(2.5); transform:scaleX(2.5); } .search-suggest h3 + div, .search-suggest h3 { text-align:left; } .search-suggest .ss-box { width:32.7%; padding:8px 12px; margin:0 1px; background:#fff; } .search-suggest .ss-box:nth-of-type(3n+0):after { display:none; } .search-suggest .ss-box:hover { background:#efefef; } .search-suggest .ss-box:after { display:none; } .search-suggest .ss-box:before { right:-2px; } .search-suggest .ss-box.hide-sptr:before { display:none; } .search-suggest .similar-items { padding:18px 0 20px; } .similar-items .ss-box .prodThumb { height:175px; } .search-suggest .ss-box .prodThumb .thumbnail { transition:all 0.2s ease-in-out 0s; border-radius:6px; width:158px; height:158px; } .search-suggest .ss-box:hover .prodThumb .thumbnail { position:absolute; top:-6px; bottom:-3px; left:-7px; right:-3px; width:172px; height:172px; max-width:none; } .search-suggest .btn-seemore-results { padding:8px 10px; } .search-suggest .related-searches { background:#2a2a2a; margin:0 -20px; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top:1px solid #7f7f7f; padding:0 20px; text-align:left; border-bottom:0;min-height:36px; } .search-suggest .related-searches > span { display:inline-block; color:#fff; padding:10px 10px 10px 0; border-right:1px solid #464646; text-transform:none; } .search-suggest .related-searches a { padding:10px; color:#4bbef4; border-right:1px solid #464646; background:none; width:auto; border-top:0; } .search-suggest .related-searches a + a { border-right:1px solid #464646; } .search-suggest .related-searches a:hover { background:#828282; color:#fff; } } /* Desktop */ @media(min-width:992px) { /* Search Suggest Styles */ .search-suggest { width:630px; left:6px; padding:15px 10px 0; } .search-suggest h3 + div{padding:10px;} .search-suggest h3 { padding:0 10px; } .search-suggest .ss-box .prodThumb { margin-bottom:15px; } .search-suggest .ss-box:hover .prodThumb .thumbnail { width:180px; height:180px; top:-4px; left:-4px; } .search-suggest .related-searches { margin:0 -10px; } } nav.main .main-submenu.hello{ position:fixed; top:50px; right: unset; margin:auto; z-index: 1300; } nav.main .main-submenu { opacity: 0; height: 0; max-height: 0; overflow: hidden; } nav.main.qlp-main-header__mobile-menus .main-submenu.main-submenu--hellobar { transform: translateZ(0); position: fixed; top: 50px; max-width: 917px; left: 0; right: 0; margin: 0 auto;display: block; } .qlp-main-header__wrapper--open {transform: none!important;} @media(max-width:767px) { nav.main .main-submenu .browseby-links { opacity: 0; height: 0; max-height: 0; overflow: hidden; transition: opacity .5s ease, visibility .5s ease; } nav.main .main-submenu.main-submenu--open .browseby-links { opacity: 1; height: auto; max-height: initial; visibility: visible; } nav.main .main-submenu { background:#fff; width:100%; position:fixed; top:57px; left:0; bottom:0; z-index:9999; overflow:auto; opacity: 0; background-attachment: scroll;-webkit-overflow-scrolling: touch; } nav.main .main-submenu .suggested-products { display:none; } nav.main .main-submenu header { background:#086ac2; padding:16px; color:#fff; position:relative; } nav.main .main-submenu header .btn-back-filters { background:url(/cached/396/images/sprite-wrapper-layout.png) no-repeat -429px -757px; width:26px; height:36px; text-indent:-9999em; display:block; position:absolute; top:9px; left:13px;cursor:pointer; } nav.main .main-submenu header .btn-back-filters:hover { background-position:-429px -705px; } nav.main .main-submenu header h2 { font-size:18px; text-transform:uppercase; font-weight:300; letter-spacing:1px; text-align:center; } nav.main .main-submenu .shop-all{ padding:10px 20px; text-align:center; position: relative; } nav.main .main-submenu header, nav.main .main-submenu .shop-all { display: none; } nav.main .main-submenu .shop-all a{ background:#f36f21; border-radius:2px; border:0; width:100%; color:#fff; padding:12px 20px; font-size:18px;text-transform:uppercase; text-decoration:none; display:block; text-align:center; cursor:pointer; } nav.main .main-submenu .shop-all a:hover{ background:#37b345; } nav.main .main-submenu .shop-all i{display:inline-block;font-size:18px;text-align:center;color: #767676;text-transform:uppercase;font-style:normal;background:#fff;padding:20px 10px;} nav.main .main-submenu .shop-all i:after { content: ""; height: 0; display: block; position: absolute; left: 20px; right: 20px; bottom: 40px; z-index: -1; border-bottom: 2px solid #e0e0e0; } nav.main .main-submenu .browseby-links ul li { display: inline-block; } nav.main .main-submenu .browseby-links { padding:0 ; } nav.main .main-submenu .browseby-links h4 { background:#196ac3; color:#fff; letter-spacing:1px; font-size:14px; font-weight:bold; line-height:28px; min-height:28px; padding:5px 15px;position: relative;cursor:pointer; margin: 2px 0;} nav.main .main-submenu .browseby-links h4:first-child {margin-top: 0;} nav.main .main-submenu .browseby-links h4.active { background:#196ac3; color:#fff; border-bottom:0; position:relative; } nav.main .main-submenu .browseby-links h4:after { content: ' '; display: inline-block; vertical-align: middle; margin-right: 10px; background: url(/cached/396/images/_icons/arrow-up-w.svg) no-repeat 0 0; background-size: contain; width: 15px; height: 10px; margin-top: 10px; float: right;} nav.main .main-submenu .browseby-links h4.active:after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); margin-top: 8px;} nav.main .main-submenu .browseby-links h4:hover { background:#196ac3; color:#fff; } nav.main .main-submenu .browseby-links h4:hover:after { color:#fff; } nav.main .main-submenu .browseby-links h4.active + ul {display:block; height: auto; opacity: 1; padding-top: 10px; visibility: visible; } nav.main .main-submenu .browseby-links ul {display: block;height: 0; opacity: 0; visibility: hidden; transition: all .5s; list-style:none; padding: 10px 6px 0; margin-bottom: 0; padding-top: 0; } nav.main .main-submenu .browseby-links ul li { width: 44%; margin:0 2% 15px; vertical-align:top; max-width: 200px } nav.main .main-submenu .browseby-links ul li:nth-of-type(2n+1) { margin-right:15px; } nav.main .main-submenu .browseby-links ul a { display:block; background:#e0e0e0; color:#666; text-align:center; font-weight:bold; font-size:11px; text-decoration:none; padding:10px 5px; border-radius:5px; } nav.main .main-submenu .browseby-links ul a:hover { background:#196ac3; color:#fff; } nav.main .qlp-main-header__hamburger .browseby-links ul li { width: 100%; } } @media (min-width:500px) { nav.main .main-submenu .browseby-links ul { padding-left: 0; } nav.main .main-submenu .browseby-links ul li { width: 28%; margin:0 2% 15px; vertical-align:top; max-width: 200px } } @media (min-width:768px) { nav.main .main-submenu { transition: opacity .5s ease, visibility .5s ease; } nav.main .main-submenu { display:block; background:#fff; font-size:14px; position:absolute; top:34px; left:0; width:750px; border-radius:0 0 4px 4px; -webkit-box-shadow: 0px 15px 12px 0px rgba(50,50,50,0.55); -moz-box-shadow: 0px 15px 12px 0px rgba(50,50,50,0.55); box-shadow: 0px 15px 12px 0px rgba(50,50,50,0.55); } nav.main .main-submenu header, nav.main .main-submenu .shop-all{ display:none; } nav.main .main-submenu .browseby-links { position:relative; display:inline-block; width:170px; padding:12px 0 0; background:#effaff; border-radius:0 0 0 4px; } nav.main .main-submenu .browseby-links h3 { color:#a8a8a8; font-size:14px; font-weight:normal; padding:0 0 20px 25px; } nav.main .main-submenu .browseby-links h4 { color:#076bc3; font-size:14px; font-weight:bold; padding:0 0 5px 25px; } nav.main .main-submenu .browseby-links ul li { font-size: 12px; line-height: 12px; margin: 0; padding-bottom: 3px; width: 100%; } nav.main .main-submenu .browseby-links ul { font-size:12px; line-height: 12px; list-style:none; position:relative; margin-bottom:15px; padding-bottom:11px; } nav.main .main-submenu .browseby-links ul li:last-child:after { content:""; display:block; background:#c8ccce; height:1px; width:126px; position:absolute; bottom:0; right:20px; } nav.main .main-submenu .browseby-links ul:last-child li:last-child:after { display:none; } nav.main .main-submenu li { display: list-item; } nav.main .main-submenu .browseby-links li a { display: block; text-decoration:none; padding:3px 25px; color:#1d7abf; position:relative; } nav.main .main-submenu .browseby-links li a:hover { /*background:#ff6a26; color:#fff;*/ text-decoration:underline; } nav.main .main-submenu .browseby-links { position:relative; display:inline-block; width:170px; padding:12px 0 0; background:#effaff; border-radius:0 0 0 4px; } nav.main .main-submenu .browseby-links h3 { color:#a8a8a8; font-size:14px; font-weight:normal; padding:0 0 20px 25px; } nav.main .main-submenu .browseby-links h4 { color:#076bc3; font-size:14px; font-weight:bold; padding:0 0 5px 25px; } nav.main .main-submenu .browseby-links ul li { font-size: 12px; line-height: 12px; margin: 0; padding-bottom: 3px; width: 100%; } nav.main .main-submenu .browseby-links ul { font-size:12px; line-height: 12px; list-style:none; position:relative; margin-bottom:15px; padding-bottom:11px; } nav.main .main-submenu .browseby-links ul li:last-child:after { content:""; display:block; background:#c8ccce; height:1px; width:126px; position:absolute; bottom:0; right:20px; } nav.main .main-submenu .browseby-links ul:last-child li:last-child:after { display:none; } nav.main .main-submenu li { display: list-item; } nav.main .main-submenu .browseby-links li a { display: block; text-decoration:none; padding:3px 25px; color:#1d7abf; position:relative; } nav.main .main-submenu .browseby-links li a:hover { /*background:#ff6a26; color:#fff;*/ text-decoration:underline; } } @media(min-width:992px) { nav.main .main-submenu { width:917px; } nav.main .main-submenu .browseby-links { width:204px; } nav.main .main-submenu .browseby-links h3 { padding-left:20px; } nav.main .main-submenu .browseby-links h4 { padding-left:35px; } nav.main .main-submenu .browseby-links li a { padding-left:35px; } nav.main .main-submenu .browseby-links ul li:last-child:after { width:150px; } }.eblast-signup.slidedown { padding:20px 15px;height:125%; } .model-dialog.eblast-signup header { background:#37a3f4; } .model-dialog.eblast-signup header h1 { font-family:"Single Sleeve"; font-size:32px; letter-spacing:2px; line-height:0.85em; } .eblast-signup .content { padding:20px 15px; width:320px; margin:auto; } .eblast-signup ul { list-style:none; margin:0 0 30px; } .eblast-signup li { position:relative; margin-bottom:70px; } .eblast-signup li:before, .eblast-signup li:after { content:""; display:inline-block; background:url(/cached/396/images/sprite-eblastsignup-mobile.png) no-repeat; position:absolute; } .eblast-signup li:nth-of-type(1) { padding-left:145px; } .eblast-signup li:nth-of-type(1):before { background-position:0 0; width:126px; height:105px; top:27px; left:0; } .eblast-signup li:after { background-position:-472px 0; width:38px; height:37px; left:50%; bottom:-54px; margin-left:-19px; } .eblast-signup li:nth-of-type(2) { padding-right:147px; text-align:right; } .eblast-signup li:nth-of-type(2):before { background-position:-146px 0; width:137px; height:104px; top:19px; right:-13px; } .eblast-signup li:nth-of-type(3) { padding-left:150px; margin-bottom:0; min-height: 150px;} .eblast-signup li:nth-of-type(3):before { background-position:-304px 0; width:136px; height:148px; top:4px; left:0; } .eblast-signup li:nth-of-type(3):after { display:none; } .eblast-signup li h3 { color:#767575; font-size:18px; } .eblast-signup li p { color:#4d4d4e; } .eblast-signup footer { background:#f5f6f6; padding:20px; font-size:12px; line-height:1.4; color:#333232; margin-top:15px; } .eblast-signup footer p { /*width:280px; */margin:auto; } .eblast-signup h4 { color: #086ac2; font-size: 20px; font-weight: normal; text-align: center; margin:10px auto; } /* Tablet */ @media(min-width:768px) { .model-dialog.eblast-signup header h1 { font-size:86px; letter-spacing:4px; } .eblast-signup .content { width:auto; padding:60px 5px 20px; } .eblast-signup h4 {font-size:30px;} .eblast-signup li { display:inline-block; width:32.94%; vertical-align:top; margin-bottom:0; } .eblast-signup li h3 { margin-bottom:5px; font-size:16px; } .eblast-signup li:nth-of-type(1), .eblast-signup li:nth-of-type(2), .eblast-signup li:nth-of-type(3) { padding:155px 30px 0; text-align:center; min-height:292px; } .eblast-signup li:nth-of-type(1):before { left:50%; margin-left:-63px; top:13px; } .eblast-signup li:nth-of-type(2):before { right:auto; left:50%; top:22px; margin-left:-68px; } .eblast-signup li:nth-of-type(3):before { left:50%; margin-left:-68px; top:0; } .eblast-signup li:after { top:48px; right:-19px; left:auto; } .eblast-signup .btn-orange, .eblast-signup footer { margin:15px 15px 0; } .eblast-signup .btn-orange, .eblast-signup footer p { width:auto; } .eblast-signup.slidedown{height: auto;} .virtual-proof .eblast-signup.slidedown { padding:20px 15px;height:99%; } .virtual-proof .model-dialog.eblast-signup header { background:#37a3f4; } .virtual-proof .model-dialog.eblast-signup header h1 { font-family:"Single Sleeve"; font-size:32px; letter-spacing:2px; line-height:0.85em; } .virtual-proof .eblast-signup .content { padding:20px 15px; width:320px; margin:auto; } .virtual-proof .eblast-signup ul { list-style:none; margin:0 0 30px; } .virtual-proof .eblast-signup li { position:relative; margin-bottom:70px; width: auto; padding: 0; } .virtual-proof .eblast-signup li:nth-of-type(1), .eblast-signup li:nth-of-type(2), .eblast-signup li:nth-of-type(3) { min-height: 125px; } .virtual-proof .eblast-signup li:before, .virtual-proof .eblast-signup li:after { content:""; display:inline-block; background:url(/cached/396/images/sprite-eblastsignup-mobile.png) no-repeat; position:absolute; } .virtual-proof .eblast-signup li:nth-of-type(1) { padding-left:145px; } .virtual-proof .eblast-signup li:nth-of-type(1):before { background-position:0 0; width:126px; height:105px; top:27px; left:60px; } .virtual-proof .eblast-signup li:after { top: auto; background-position:-472px 0; width:38px; height:37px; left:50%; bottom:-54px; margin-left:-19px; } .virtual-proof .eblast-signup li:nth-of-type(2) { padding-right:147px; text-align:right; } .virtual-proof .eblast-signup li:nth-of-type(2):before { left: auto; background-position:-146px 0; width:137px; height:104px; top:19px; right:-13px; } .virtual-proof .eblast-signup li:nth-of-type(3) { padding-left:150px; margin-bottom:0; min-height: 150px;} .virtual-proof .eblast-signup li:nth-of-type(3):before { background-position:-304px 0; width:136px; height:148px; top:4px; right: 0; left: 75px; } .virtual-proof .eblast-signup li:nth-of-type(3):after { display:none; } .virtual-proof .eblast-signup li h3 { color:#767575; font-size:18px; } .virtual-proof .eblast-signup li p { color:#4d4d4e; } .virtual-proof .eblast-signup footer { background:#f5f6f6; padding:20px; font-size:12px; line-height:1.4; color:#333232; margin-top:15px; } .virtual-proof .eblast-signup footer p { /*width:280px; */margin:auto; } } /* Desktop */ @media(min-width:992px) { .model-dialog.eblast-signup header { padding:36px 20px; border-top-left-radius:3px; border-top-right-radius:3px; } .model-dialog.eblast-signup header h1 { font-size:86px; } .eblast-signup .content { padding-bottom:0; } .eblast-signup li:after { right:-26px; } .eblast-signup li:before { background:url(/cached/396/images/sprite-eblastsignup-desktop.png) no-repeat; } .eblast-signup li:nth-of-type(1):before { background-position:0 0; width:154px; height:130px; margin-left:-77px; top:12px; } .eblast-signup li:nth-of-type(2):before { background-position:-194px 0; width:177px; height:134px; margin-left:-88px; top:13px; } .eblast-signup li:nth-of-type(3):before { background-position:-411px 0; width:141px; height:155px; margin-left:-70px; } .eblast-signup li:nth-of-type(1), .eblast-signup li:nth-of-type(2), .eblast-signup li:nth-of-type(3) { padding-top:164px; } .eblast-signup li h3 { font-size:18px; } .eblast-signup footer { margin:30px 32px 0; } .eblast-signup .btn-orange{ margin:0 auto; width:65%; } .virtual-proof .eblast-signup.slidedown { padding:20px 15px;height:99%; } .virtual-proof .model-dialog.eblast-signup header { background:#37a3f4; } .virtual-proof .model-dialog.eblast-signup header h1 { font-family:"Single Sleeve"; font-size:32px; letter-spacing:2px; line-height:0.85em; } .virtual-proof .eblast-signup .content { padding:20px 15px; width:320px; margin:auto; } .virtual-proof .eblast-signup ul { list-style:none; margin:0 0 30px; } .virtual-proof .eblast-signup li { position:relative; margin-bottom:70px; width: auto; padding: 0; } .virtual-proof .eblast-signup li:nth-of-type(1), .eblast-signup li:nth-of-type(2), .eblast-signup li:nth-of-type(3) { min-height: 125px; } .virtual-proof .eblast-signup li:before, .virtual-proof .eblast-signup li:after { content:""; display:inline-block; background:url(/cached/396/images/sprite-eblastsignup-mobile.png) no-repeat; position:absolute; } .virtual-proof .eblast-signup li:nth-of-type(1) { padding-left:145px; } .virtual-proof .eblast-signup li:nth-of-type(1):before { background-position:0 0; width:126px; height:105px; top:27px; left:60px; } .virtual-proof .eblast-signup li:after { top: auto; background-position:-472px 0; width:38px; height:37px; left:50%; bottom:-54px; margin-left:-19px; } .virtual-proof .eblast-signup li:nth-of-type(2) { padding-right:147px; text-align:right; } .virtual-proof .eblast-signup li:nth-of-type(2):before { left: auto; background-position:-146px 0; width:137px; height:104px; top:19px; right:-13px; } .virtual-proof .eblast-signup li:nth-of-type(3) { padding-left:150px; margin-bottom:0; min-height: 150px;} .virtual-proof .eblast-signup li:nth-of-type(3):before { background-position:-304px 0; width:136px; height:148px; top:4px; right: 0; left: 75px; } .virtual-proof .eblast-signup li:nth-of-type(3):after { display:none; } .virtual-proof .eblast-signup li h3 { color:#767575; font-size:18px; } .virtual-proof .eblast-signup li p { color:#4d4d4e; } .virtual-proof .eblast-signup footer { background:#f5f6f6; padding:20px; font-size:12px; line-height:1.4; color:#333232; margin-top:15px; } .virtual-proof .eblast-signup footer p { /*width:280px; */margin:auto; } } .overLayBG { background: #414141; bottom: 0; left: 0; opacity: .8; position: fixed; right: 0; top: 57px; z-index: 500; } /* Model Dialog */ .model-dialog { background:#fff; border-radius:4px; box-shadow:1px 16px 40px -5px rgba(0,0,0,0.75); border:1px solid #ccc; position: absolute; top: 0; left:0; right:0; z-index: 1200; width:75%; margin:0 auto; } .model-dialog header { background:#3ea3f3; border-top-left-radius:4px; border-top-right-radius:4px; padding: 15px 15px 15px 30px; height:56px; position:relative; } .model-dialog header .btn-back { background:url(/cached/396/images/sprite-wrapper-layout.png) no-repeat -429px -757px; width:17px; height:36px; transform: scale(.6); display:block; text-indent:-9999em; position:absolute; top:calc(50% - 18px); left:8px; cursor: pointer; } .model-dialog header .btn-back:hover { background-position:-429px -705px; } .model-dialog .content { padding:20px; font-size:14px; line-height:1.4; position:relative; display: block; } .model-dialog .content p { margin-bottom:16px; } .model-dialog.virtual-proof .content p { margin-bottom: 0; } .model-dialog.how-penWrites header .close { background: none; border: 0; color: #333; top: 2px; right: 0; } .model-dialog.how-penWrites header .close:hover { color: #086ac2; background: none; } .model-dialog header h1 { color: #fff; font-size: 16px; line-height: 28px; font-weight: 300; margin: 0; text-align: center; margin: 0; } .model-dialog header h1 span { display: inline; } .model-dialog header .close { display: none; width: 31px; height: 31px; position: absolute; top: -7px; right: -7px; outline: 0; z-index:1; background: #000; border-radius: 50%; border: 2px solid #fff; color: #fff; text-align: center; cursor: pointer; line-height:28px; font-size:15px; } .model-dialog header .close:hover { background: red; } .model-dialog header .btn-back:hover { background-position: -429px -705px } .model-dialog .content { padding: 20px; font-size: 14px; line-height: 1.4; position: relative } .model-dialog header .btn-back:hover { background-position: -429px -705px } .model-dialog { z-index: 1200; border: 0; } .model-dialog.fun-header header { background: #3ea3f3; height: auto; } .model-dialog.fun-header header h1 { line-height:1em; font-size:12px;line-height: 0.8; font-weight: bold; } .model-dialog.qlp-header>.content { padding:0;height:100%; } .model-dialog .leftCol { background:#efefef; padding:15px; border-radius: 4px; margin-bottom: 10px; padding-bottom: 1px; } .model-dialog .leftCol ol { list-style:none; counter-reset:ordernow;} /* height: calc(100vh - 155px); */ .model-dialog .leftCol li { clear: both; } .model-dialog .leftCol li:last-of-type .btn{display:none;} .model-dialog .leftCol h3 { border-bottom:1px solid #c7c6c7; margin:0 0 15px; padding:3px 0; font-size:18px; color:#808284; cursor:pointer;white-space: nowrap;overflow: hidden;height: 32px;text-overflow: ellipsis;} .model-dialog .leftCol .invalid>h3, .model-dialog .leftCol .invalid>h3.active{color:red;} .model-dialog .leftCol h3:before { content:counter(ordernow); counter-increment:ordernow; background:#adacae; color:#fff; padding:1px 6px; margin-right:5px; border-radius:2px; font-weight:normal; } .model-dialog .leftCol .invalid>h3:before, .model-dialog .leftCol .invalid>h3.active:before{background:red;} .model-dialog .leftCol h3.active { color:#276db6; } .model-dialog .leftCol h3.active:before { background-color:#276db6; } .model-dialog .leftCol h3 span { font-size:12px; font-weight:normal; } .model-dialog .leftCol h3 div { display:none; } .model-dialog .leftCol h3 a { display:none; float:right; font-size:14px; font-weight:normal; color:#276db6; text-decoration:underline; margin-top:4px; } .model-dialog .leftCol h3 a:hover { color:#ff6a25; } .model-dialog .leftCol .edit h3 { color:#5dbb50; } .model-dialog .leftCol .edit h3:before { background:#5dbb50; } .model-dialog .leftCol .edit h3 a { display:inline-block; } .model-dialog .leftCol .edit h3.active a{display:none;} .model-dialog .leftCol .details { display:none; } .model-dialog .leftCol h3.active + .details { display:block; } .model-dialog .leftCol ol .btn { text-align:right; margin-bottom:10px; margin-top: 7px;} .model-dialog .leftCol ol .btn button { font-size:14px; padding:5px 14px; background:#1e7abf; border-radius:4px; border:0; color:#fff; font-weight:bold; text-transform:uppercase; } .model-dialog .leftCol ol .btn button:hover { background:#37b345; } .model-dialog .leftCol ol .btn button:before { display:none; } .model-dialog .rightCol h3 { font-size:20px; text-align:center;margin-bottom:20px; } .model-dialog .rightCol .prod-total { text-align:center; } .model-dialog .rightCol .prod-image { vertical-align:middle; text-align:center; } .model-dialog .rightCol .prod-image span { display: block; padding-top: 10px; } .model-dialog .btn-review { text-align:center; margin:25px 0 5px; } .model-dialog .btn-review button { background:#f36f21; border-radius:4px; border:0; color:#fff; padding:12px 20px; font-size:18px; font-weight:bold; text-transform:uppercase;width:auto; min-width:85%;} .model-dialog .btn-review button:hover { background:#37b345; } .model-dialog .btn-review button.secure:before { content:""; display:inline-block; vertical-align:baseline; background:url(/cached/396/images/sprite-freesample-req.png) no-repeat 0 -54px; width:13px; height:18px; margin-right:8px; } .model-dialog .btn-review button span{display:block;font-size:12px;text-transform:lowercase;font-weight:normal;} /* Video Frame Styles */ .video-frame.model-dialog { padding:0 10px 30px; color:#fff; height:100%; height:100vh; background: rgb(43,150,255); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMmI5NmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMmI5NmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwODFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(-45deg, rgba(43,150,255,1) 0%, rgba(43,150,255,1) 50%, rgba(41,137,216,1) 50%, rgba(0,129,255,1) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(43,150,255,1)), color-stop(50%,rgba(43,150,255,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(0,129,255,1))); background: -webkit-linear-gradient(-45deg, rgba(43,150,255,1) 0%,rgba(43,150,255,1) 50%,rgba(41,137,216,1) 50%,rgba(0,129,255,1) 100%); background: -o-linear-gradient(-45deg, rgba(43,150,255,1) 0%,rgba(43,150,255,1) 50%,rgba(41,137,216,1) 50%,rgba(0,129,255,1) 100%); background: -ms-linear-gradient(-45deg, rgba(43,150,255,1) 0%,rgba(43,150,255,1) 50%,rgba(41,137,216,1) 50%,rgba(0,129,255,1) 100%); background: linear-gradient(135deg, rgba(43,150,255,1) 0%,rgba(43,150,255,1) 50%,rgba(41,137,216,1) 50%,rgba(0,129,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b96ff', endColorstr='#0081ff',GradientType=1 ); } .video-frame.model-dialog header a.close {top: 23px; right: -27px;} /* end - Video Frame Styles */ /* New Video Frame Styles */ .video-frame.model-dialog { display:block; max-width:880px; width:100%; padding:0 15px 38px; } .video-frame.model-dialog header {background:none; } .video-frame.model-dialog header h1 { text-align:center; font-family:"Single Sleeve"; letter-spacing:2px; line-height:0.6; font-weight:normal; color:#fff;font-size: 35px; } .video-frame iframe { border-radius:6px; } .video-frame .callout-bubble { background:#fff;border-radius:8px;padding:10px; color:#010101; font-size:14px;margin-top:20px } .video-frame .callout-bubble.vcenter { padding-top:22px; } .video-frame .callout-bubble h3 { font-family:"Single Sleeve"; font-size:44px; color:#2b96ff; font-weight:normal; } .video-frame .callout-bubble p { } .wrapper-page .overLayBG{ /*position: absolute;*/ z-index: 100; top:30px; } body.unfocus .overLayBG{background:transparent;} @media(min-width:380px) { .model-dialog header h1 { font-size: 22px; } } @media(min-width:500px) { .model-dialog header h1 { font-size:23px;} .model-dialog.wide-modal.order-form header h1 .header-virtual-proof span { display: none; } } @media(min-width:600px) { body.modal-open .clouds{ display:none; /*ftransition: all 3s ease-out; ilter:blur(3px); -webkit-filter:blur(3px);*/ } /*h1 .header-virtual-proof { font-size: 19px; }*/ } @media(max-width:600px) { .overLayBG { display: none; } } /* Phone */ @media(max-width:767px) { .model-dialog {width:auto; border-radius:0; box-shadow:none; border:none;min-height: 100vh;} .model-dialog header { border-radius:0; } .logo-colorpicker .btn-orange{font-size:14px;} } /* Tablet */ @media (min-width:768px) { .overLayBG {top: 0;} .model-dialog { width:700px; top:70px; right:0; bottom: auto; } .model-dialog--no-scroll {transition: none;} .model-dialog header { padding:13px 20px; } .model-dialog header .close { display:block; } .model-dialog header .btn-back{display:none;} .model-dialog header h1 { font-size:24px; } .model-dialog header h1 span { display: inline-block; } .video-frame.model-dialog { height:auto; border-radius:8px; max-height:calc(100vh - 80px); } .video-frame.model-dialog header { padding:0; height:auto; } .video-frame.model-dialog header h1 {font-size:110px; margin:-38px 0 12px; transform: rotate(-2deg); line-height:0.8; text-shadow:0px -3px 0 #2b96ff, -4px -3px 0 #2b96ff, 4px -3px 0 #2b96ff, -1px 1px 0 #2b96ff, 1px 1px 0 #2b96ff; } .video-frame.model-dialog:after { content:""; display:block; background:url(/cached/396/images/sprite-videoframe.png) no-repeat 0 0; width:201px; height:131px; position:absolute; bottom:0; left:66px; } .video-frame iframe {max-height: calc(100vh - 275px);} .video-frame .needhelp { margin:18px 130px 0 250px; text-align:center;height: 100px; } .video-frame .needhelp h3 { font-size:24px; font-weight:bold; text-align:center; margin-bottom:10px; } .video-frame .needhelp a { font-size:22px; color:#fff; text-decoration:none; border:2px solid #fff; display:inline-block; padding:10px 10px 10px 40px; margin:0 5px; border-radius:4px; width:200px; position:relative; } .video-frame .needhelp a:hover { background:#fff; color:#0081ff; } .video-frame .needhelp a:before { content:""; display:block; background:url(/cached/396/images/sprite-wrapper-layout.png) no-repeat; width:24px; height:25px; position:absolute; top:10px; left:15px; } .video-frame .needhelp a:nth-of-type(1):before { background-position:-343px -792px; } .video-frame .needhelp a:nth-of-type(1):hover:before { background-position:-343px -832px; } .video-frame .needhelp a:nth-of-type(2):before { background-position:-377px -794px; top:13px; left:32px; } .video-frame .needhelp a:nth-of-type(2):hover:before { background-position:-377px -834px; } .video-frame .callout-bubble { background:url(/cached/396/images/sprite-videoframe.png) no-repeat -241px 0; width:554px; height:148px;padding:10px 10px 10px 80px; position:absolute; bottom:-20px; left:200px; } .model-dialog.fun-header { border: 1px solid #ccc; } .model-dialog.fun-header header { padding: 24px 0; } .model-dialog.fun-header header h1 { font-size:42px; } .model-dialog.qlp-header { width:auto; border-radius:0;top:0;} .model-dialog.qlp-header header { padding:15px 20px; border-radius:0; } .model-dialog.qlp-header header .close { display:none; } .model-dialog.qlp-header header .btn-back { display:block; } .model-dialog.wide-modal { width:auto; border-radius:0;} .model-dialog.wide-modal header { padding:15px 20px; border-radius:0; } .model-dialog.wide-modal header .close { display:none; } .model-dialog.wide-modal header .btn-back { display:block; } .model-dialog.qlp-header>.content>form, .model-dialog.qlp-header>.content { position:relative; display:flex; display: -webkit-flex; width:100%;} .model-dialog .leftCol { /*width:342px;*/ width:47%; display:table-cell; vertical-align:top; margin-bottom: 0; } .model-dialog .rightCol { display:table-cell; vertical-align:top; width:53%; padding:30px 0 0 0; } .model-dialog .rightCol .btn-review { display:block; margin:3px auto 0;} body.modal-open .clouds{ display:block; } body.modal-open.wide-modal .clouds{ display:none; } .model-dialog .leftCol h3 {max-width:360px; } .model-dialog.how-penWrites header { height: 1px; padding: 0; background: white; } } /* @media(max-width:991px) { .model-dialog.qlp-header { min-height:100vh;} .model-dialog.qlp-header .content >form, .model-dialog.qlp-header .content { min-height:calc(100vh - 56px); height:100%; } } */ /* 100% height here fixes most forms in wide mobile not having their grey extend to the bottom */ /* Desktop */ @media(min-width:992px) { /* Model Dialog New Generic Styles */ .model-dialog { width:820px; right:1%; transition: top 0.1s ease-in-out 0s;} .model-dialog.fun-header header h1 { display: block; font-size: 45px; padding: 0; margin:0; line-height: 1em; } .model-dialog.wide-modal.order-form header h1 .header-virtual-proof span { display: inline; } .model-dialog.wide-modal { width:820px; top:50px; border-radius:4px; bottom:unset; } .model-dialog.wide-modal header { background:#efefef; height:78px; margin-bottom:46px;border-top-left-radius:4px; border-top-right-radius:4px; } .model-dialog.wide-modal header h1 { text-transform:uppercase; font-size:32px; color:#086ac2; text-align:left; padding-left:85px; line-height:50px;} .model-dialog.wide-modal header h1:before { content: ''; display: inline-block; vertical-align: middle; height: 61px; width: 65px; background: url(/cached/396/images/_logos/QLP_logo_homepage_footer.svg) no-repeat left center; background-size: contain; margin-right: 10px; position:absolute; top:12px; left:29px; } .model-dialog.wide-modal header .close { display:block; } .model-dialog.wide-modal header .btn-back { display:none; } .model-dialog.wide-modal.fun-header header { background:#00aeef; height:auto; margin-bottom:0; } .model-dialog.wide-modal.fun-header header h1 { text-transform:none; font-size:45px; color:#fff; text-align:center; padding-left:0; line-height: 1em; } .model-dialog.wide-modal.fun-header header h1:before {display:none;} /*Windows Firefox bug*/ .model-dialog.wide-modal.order-form.fun-header header { background:#00aeef; height:auto; margin-bottom:0; } .model-dialog.wide-modal.order-form.fun-header header h1 { text-transform:none; font-size:90px; color:#fff; text-align:center; padding-left:0; line-height: 1em; } .model-dialog.wide-modal.order-form.fun-header header h1:before {display:none;} /* EVENTUALLY USE THIS instead .model-dialog.qlp-header { width:820px; top:50px; border-radius:4px; bottom:unset; } .model-dialog.qlp-header header { background:#efefef; padding:23px 20px; height:78px; margin-bottom:46px; } .model-dialog.qlp-header header h1 { text-transform:uppercase; font-size:32px; color:#086ac2; text-align:left; padding-left:85px; } .model-dialog.qlp-header header h1:before { content:""; display:block; background:url(/cached/396/images/sprite-freesample-req.png) no-repeat -177px 0; width:62px; height:56px; position:absolute; top:12px; left:29px; } .model-dialog.qlp-header header .btn-back { display:none !important; } .model-dialog.qlp-header header .close { display:block; } .model-dialog.qlp-header .rightCol h3 { background:#086ac2; color:#fff; position:absolute; top:-46px; left:0; right:0; height:46px; font-size:22px; font-weight:normal; text-align:left; padding:10px 10px 10px 26px; -webkit-box-shadow: 0px 4px 4px 0px rgba(203,203,203,0.75); box-shadow: 0px 4px 4px 0px rgba(203,203,203,0.75); margin-bottom:0; } */ body.modal-open.wide-modal .clouds{ display:block; } } /* Funky fun for landscape tablets */ @media (min-width: 767px) and (max-height: 800px) { /*This is causing hidden title in Android OS*/ .model-dialog.order-form>.content { padding-top: 0; } .model-dialog.wide-modal.logo-colorpicker .product-selection, .model-dialog.wide-modal.order-form .cost-shipping h3, .model-dialog.wide-modal.order-form .rightCol .trust-logos{display:none;} .model-dialog.wide-modal.order-form .cost-shipping h3 { white-space: normal; } .model-dialog.wide-modal.order-form .rightCol{padding-bottom:20px;} .model-dialog.wide-modal header{ margin-bottom:0; border-bottom:2px solid #086ac2; } .model-dialog.wide-modal.fun-header header{ border-bottom:none; } .model-dialog.order-form .rightCol{ vertical-align: top; padding-top:20px; } .model-dialog.wide-modal.logo-colorpicker .right{ padding-top:20px; } .model-dialog.wide-modal.logo-colorpicker .left h3{ margin-top:0; } .logo-colorpicker.logo-colorpicker .right .checkbox-label{ top: 35px; } } /* Funky fun for landscape tablets */ @media (min-width: 768px) { /*This is causing hidden title in Android OS*/ .model-dialog.wide-modal.logo-colorpicker .product-selection, .model-dialog.wide-modal.order-form .rightCol .trust-logos{display:none;} .model-dialog.wide-modal.order-form .cost-shipping h3 { white-space: normal; } .model-dialog.wide-modal.order-form .rightCol{padding-bottom:20px;} .model-dialog.wide-modal header{ margin-bottom:0; border-bottom:2px solid #086ac2; } .model-dialog.wide-modal.fun-header header{ border-bottom:none; } .model-dialog.order-form .rightCol{ vertical-align: top; padding-top:20px; } .model-dialog.wide-modal.logo-colorpicker .right{ padding-top:20px; } .model-dialog.wide-modal.logo-colorpicker .left h3{ margin-top:0; } .logo-colorpicker.logo-colorpicker .right .checkbox-label{ top: 35px; } }/* common styles */ .finePrint { font-size: 80%; } #prodBreadCrumb { line-height: initial; } .wait{ cursor: wait; opacity: 0.5; } .ui-effects-transfer { border: 1px dotted black; z-index: 9999; } .sidebar-filters, .serps-loading {display:none} /* wrapper stuff */ .bubbaAwesome{display:none;} body.unfocus:after{ /* experimental.. */ background: #414141; bottom: 0; left: 0; opacity: 0.8; position: fixed; right: 0; top: 0; z-index: 105; content: " "; cursor: pointer; } .cost-shipping .cost-calculation a{ color:#176cbf; text-decoration: underline; } .cost-shipping .cost-calculation a:hover { color: #fd6e02; } .cost-shipping .cost-calculation a{ cursor: pointer; } .wrapper-page .bubbaH{ z-index: 10; } .search-suggest{ z-index: 1200; } header.template .search-box .search-field.focus:before { opacity:0; display:unset; width:0;} header.template .search-box .search-field input { transition:all 0.2s ease-in-out 0s; } .sidebar-content{margin-bottom:10px;} .prod-carousel .ui-tabs-nav li.ui-state-hover { background:#a9a9a9; border-color:#a9a9a9; } .prod-carousel .owl-carousel .owl-item .item a.title{ display:block; height:32px; overflow:hidden; } .prod-carousel .owl-carousel .owl-item .item a.btn-viewdeal{ font-size:16px; } .prod-carousel .ui-tabs-nav li a.ui-tabs-anchor { padding:0.5em 0;} .parentCat-banners{ height: 257px; } .parentCat-banners p{ width: 230px; } /* a fix for main menus */ @media(max-width:767px) { footer.template .expand .ftr-links-toggle{ background:#2598ff; font-weight:500; } footer.template .expand .ftr-links-toggle:after { background-position:-29px -546px; width:26px; height:14px; top:14px; } footer.template .expand .ftr-links{display:block;height:auto;max-height:400px;} } /* Desktop */ @media(min-width:992px) { .item-details-left{ min-height:600px; } .product-selection .cost-shipping .cost-calculation .row .smallgrey { clear:left; } .product-selection .left-col .product-preview{ height:355px; position:relative; padding-top: 5px; } .product-selection .left-col .itemcolor-name{ width:100%; bottom:-10px; } } .product-selection .slider-qty .ui-slider .bubble-ttip{ z-index:3; } .product-selection .product-colors .color{ background-position: center; background-size: 100% 100%; } .product-selection .product-colors .color.light-bg, .product-selection .product-colors .color.bg-white, .light-bg, .color.light-bg, .color.bg-white, .color.two-colors , .color.multi-colors { border: 1px solid #ddd; } @media(max-width:599px) { .hide-small{display:none !important;} } .item-details-right p{ margin-bottom: 3px; } .owl-carousel{display:block;} .model-dialog{z-index:1200;} .model-dialog.fullscreen{top:0;transform:none;} /* Non-Raheel styles*/ .free { color: #81bb32; } .ui-autocomplete { border-radius: 10px; box-shadow: 1px 1px 15px #000; } .ui-autocomplete > h3{ padding: 3px 1em 3px 0.4em; } .ui-autocomplete li { font:arial, helvetic, san-serif; font-size:12px; line-height:16px; overflow:hidden; } .ui-autocomplete li:after{ background: none repeat scroll 0 0 #d7d7d7; content: " "; display: block; height: 1px; margin: 0 auto; width: 70%; } .ui-autocomplete li > a { display:block } .ui-autocomplete li .image img { float:left; margin-right:10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width:70px; height:70px; } .ui-autocomplete li .description { float:left; width:286px; width: calc(100% - 80px); overflow:hidden; } .ui-autocomplete li.spelling-header .description{ float:none; margin: 0 auto; } .ui-autocomplete li .description .ac_text { font-size:16px; display:block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 4px; } .ui-autocomplete li .description .ac_spelling { font-size:20px; display:block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ui-autocomplete li .description .comment { display:inline-block; color:#5c5c5c; font-weight:400; font-size:12px; } .ui-autocomplete li .description .comment.first { border-right:1px solid #ccc; margin-right:40px; padding-right:6px; width:110px; } .ui-autocomplete li.related-products { margin-bottom:0; padding-top:0; background:#282828; background:-moz-linear-gradient(top, #282828 0, #454545 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #282828), color-stop(100%, #454545)); background:-webkit-linear-gradient(top, #282828 0, #454545 100%); background:-o-linear-gradient(top, #282828 0, #454545 100%); background:-ms-linear-gradient(top, #282828 0, #454545 100%); background:linear-gradient(to bottom, #282828 0, #454545 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#454545', GradientType=0); -webkit-border-bottom-right-radius : 10px; -webkit-border-bottom-left-radius : 10px; -moz-border-radius-bottomright : 10px; -moz-border-radius-bottomleft : 10px; border-bottom-right-radius : 10px; border-bottom-left-radius : 10px; } .ui-autocomplete li.related-products:after{ display:none; } .ui-autocomplete li.spelling-header{ background:none; border-bottom: 1px solid #eee; } .ui-autocomplete li.spelling-header:hover .description, .ui-autocomplete li.spelling-header:hover .description .comment, .ui-autocomplete li.spelling-header.ac_over .description, .ui-autocomplete li.spelling-header.ac_over .description .comment{ color:#000; } .ui-autocomplete li:hover{ background:#086ac3; } .ui-autocomplete li:hover .description, .ui-autocomplete li:hover .description .comment, .ui-autocomplete li:hover .description .comment .ac_aslowas, .ui-autocomplete li.ac_over .description, .ui-autocomplete li.ac_over .description .comment, .ui-autocomplete li.ac_over .description .comment .ac_aslowas { color:#fff; } .ui-autocomplete li:hover a{ color:#FF6E01; } .ui-autocomplete li.related-products h3 { color:#d7d7d7; margin:0; border-bottom: 0px; } .ui-autocomplete li.related-products em{ padding:0 10px; color:#fff; } .ui-autocomplete li.related-products .content { padding:0 10px; } .ui-autocomplete li.related-products .content a { display:block; color:#fff; font-size:13px; margin-bottom:3px; } .ui-autocomplete li.related-products .content a:hover { color:#ff6300; } .ui-autocomplete li.see-more a{ display: block; color:#fff; background:#ff6e02; font-size: 14px; margin: 0; padding: 5px 10px; text-align: center; font-weight:bold; text-decoration:none; } .ui-autocomplete li.see-more:hover{ background:#ff6e02; } .ui-autocomplete li.see-more a:hover{ text-decoration:underline; } .ac_product_details { float:left; } .ac_product_details br { clear:left; } .ac_thumb { width:40px; height:35px; float:left; padding-right:5px; } .ac_aslowas { display:block; text-transform:uppercase; color:#325A87; font-weight:700; } .ac_lowprice { display:block; padding-top:1px; } .red { color: #f58d85; } .ac_sale { float:left; padding-left:5px; } .ac_basic { padding:2px 5px; } .ac_text a { text-decoration:none; color:#086ac2; } .ac_text a:hover { text-decoration:underline; color:#ff6300; } /* facet buttons */ .seeall{ color:#086ac2; font-weight:bold; font-size: 12px; cursor:pointer; margin: 5px 0; text-align: center; } .seeall:hover{ color:#FF6E01; } .checkbox-label > img { float: left; margin-top: 3px; } .big-icon .checkbox-label > img{ float:none; margin:3px auto; display:block; } /* Product list styles */ a.pictureWrapper{ color: inherit; text-decoration: inherit; display:block; } /* need to get the auto complete above the hellobar */ .ui-front { z-index: 1200; } .itemColorsArea .productColor { display:inline-block; width:15px; height:15px; margin:0; padding:0; vertical-align:text-bottom; border:1px solid #000; overflow:hidden; } .productColor .single { padding:0; margin:0; width:100%; height:100%; } .productColor .double { padding:0; margin:0; width:50%; height:100%; float:left; } .productColor.pattern .double { width:100%; height:25%; float:none; } .productColor .triple { padding:0; margin:0; width:33.34%; height:100%; float:left; } .productColor.pattern .triple { width:100%; height:16.67%; float:none; } /* decoration images */ .dec-ico{ display: inline-block; vertical-align: middle; } .sqr{ background-position: -488px -280px; width: 38px; height: 38px; } .rnd{ background-position: -443px -279px; width: 37px; height: 38px; } .wide{ background-position: -573px -288px; width: 45px; height: 30px; } .tall{ background-position: -538px -273px; width: 30px; height: 45px; } .ovl{ background-position: -623px -288px; width: 49px; height: 29px; } .product-selection .product-colors .active .color{ border: 2px solid #000; } /* for ink color pop up */ .productColorRecord{ width:180px; float:left; cursor:default; } .productColor { display:inline-block; width : 24px; height : 24px; border : 1px solid #A8A8A8; border-radius: 5px; overflow:hidden; vertical-align:middle; } .productColor.big{ width : 48px; height : 48px; float:left; margin-right:5px; } .productColorLabel{ display: inline-block; vertical-align:middle; line-height: 10px; } .productColor .single { padding:0; margin:0; width:100%; height:100%; } .productColor .double { padding:0; margin:0; width:50%; height:100%; float:left; } .productColor.pattern .double { width:100%; height:25%; float:none; } .productColor .triple { padding:0; margin:0; width:33.34%; height:100%; float:left; } .productColor.pattern .triple { width:100%; height:16.67%; float:none; } /* POO tooltip */ .ui-tooltip .color { height: 70px; width: 70px; border: 1px solid #a8a8a8; border-radius: 5px; display: inline-block; overflow: hidden; vertical-align: middle; margin:auto; } .model-dialog.justImage{ background:none; border:none; box-shadow:none; } .model-dialog.justImage header{ display:none; } area{ cursor: pointer; } /* XL */ .model-dialog{ border: 0; outline: 0; } /* .quickview-dialog .image-col a.Magic360:hover:after{ display:none; }*/ .editable-popup input:focus { border-color:#2ea0f7; } .product-selection .cost-shipping .cost-calculation .label, .product-selection .cost-shipping .cost-calculation .row .smallgrey{ clear:left; } a.not-available{ cursor:not-allowed; } .wrapper-page .head{ z-index:0; /* Fixing the cloud on bubba thing */ } .product-selection .right-col .share-alert a{ margin-right:12px; font-size:11px; padding: 5px 0 5px 20px; } .product-selection .product-colors{ margin-top:0; margin-bottom:12px; width: 100%; } /* fix autocomplete on mobile*/ @media(max-width:767px) { .search-suggest { top: 131px; } .search-suggest .related-searches a{ height:45px; vertical-align:bottom; } } /* Content */ .content-section-title{ color: #325a87; font-size: 16px; font-weight: bold; } hr.sptr-faded-horizontal { border: medium none; margin: 15px 0; position: relative; } .content-page ul{ margin-left:20px; } .content-page ul.prodBreadCrumb { margin: 0; } .inkcatridge-details .product-selection .product-colors{ width:auto; } .inkcatridge-details .product-selection .product-colors li{ display:block; } .product-selection .product-colors .color .single {width:100%; height:100%; } .inkcatridge-details { width: 860px; } .inkcatridge-details .product-selection .product-colors ul { width: 32%; } .inkcatridge-details .rightCol { margin-right: 0; width: 39%; } .owl-item.loading { min-height: 20px; } .zero-results .buttons a{ cursor:pointer; } .filter-zero-results .featuredFacet, .filter-zero-results .featuredFacet.sub-cats, .filter-zero-results .category-header, .filter-zero-results .nav-paging, .filter-zero-results .catprod-items__hack, .filter-zero-results header, .filter-zero-results .content-page, .filter-zero-results .category-content, .filter-zero-results .showing-results, .filter-zero-results .catprod-items .next-prev, .filter-zero-results .page-bar { display:none; } .filter-zero-results .catprod-items{padding:0;} .catprod-items>UL{width:100%;} .ui-selectmenu-button span.ui-selectmenu-text{ background-color:#fff; } .product-colors li.inactive, .product-colors li.not-available { background: repeating-linear-gradient( 45deg, #fff, #fff 5px, #000 5px, #000 10px ); cursor: not-allowed; width: 25px; height: 25px; margin-right: 6px; } @media screen and (min-width: 992px) { .product-colors li.inactive, .product-colors li.not-available { width: 32px; height: 32px; } } .product-selection .product-colors li.inactive .product-colors li.not-available .color, .product-selection .product-colors li.not-available .color { opacity: .5; cursor: not-allowed; } .supportImage{ position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 1200; cursor:pointer; } .supportImage form{ display:block; position:absolute; bottom:0; width:100%; left:0; margin:auto; padding-bottom:23px; text-align:center; } .supportImage form input[type=email]{ border:0; background:#225f96; color:#fff; font-size:21px; padding:11px; width: 260px; margin-right: 10px; border-radius: 5px; } .supportImage form input[type=email]:-moz-placeholder { color: #fff; } .supportImage form input[type=email]:-ms-input-placeholder { color: #fff; } .supportImage form input[type=email]::-webkit-input-placeholder { color: #fff; } .supportImage form input[type=submit]{ background:#fff; max-width:25%; border:0; padding:11px 10px; color:#176cbf; font-size:21px; text-transform:uppercase; border-radius: 5px; font-weight:bold; } .supportImage form input[type=submit]:hover{ background:#ff6a25; color:#fff; } .product-selection .cost-shipping .cost-calculation .row > input{text-align:right;width: 95px;} .itemSizeSpinner .button{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; cursor:pointer; } .searchFacetIcon.inkColor { background-image: url("/cached/396/templateImages/searchbar/inkDrop-gray.png"); } .checkbox-label.active .searchFacetIcon.inkColor { background-image: url("/cached/396/templateImages/searchbar/inkDrop-blue.png"); } @media (hover: hover) { .checkbox-label:hover .searchFacetIcon.inkColor { background-image: url("/cached/396/templateImages/searchbar/inkDrop-blue.png"); } } .searchFacetIcon { background-repeat: repeat; float: left; height: 20px; width: 14px; margin-right:5px; } .searchFacetIcon.penType{ background-image: url("/cached/396/templateImages/searchbar/ballpoint-icon.png"); height:17px; margin-top:2px; } .searchFacetIcon.penType.bg-fountain{ background-image: url("/cached/396/templateImages/searchbar/fountain-icon.png"); } .searchFacetIcon.penType.bg-gel, .searchFacetIcon.penType.bg-gelpen{ background-image: url("/cached/396/templateImages/searchbar/gelpen-icon.png"); } .searchFacetIcon.penType.bg-highlighter{ background-image: url("/cached/396/templateImages/searchbar/Highlighter-icon.png"); } .searchFacetIcon.penType.bg-marker{ background-image: url("/cached/396/templateImages/searchbar/Marker-icon.png"); } .searchFacetIcon.inkColor.bg-rainbow { background:url("/cached/396/templateImages/searchbar/inkDrop-gray.png"), url(/cached/396/templateImages/productDetails/rainbow_icon.png) repeat; } .checkbox-label.active .searchFacetIcon.inkColor.bg-rainbow { background:url("/cached/396/templateImages/searchbar/inkDrop-blue.png"), url(/cached/396/templateImages/productDetails/rainbow_icon.png) repeat; } .searchDidYouMean{ font-size: 16px; padding: 5px 10px; } .searchDidYouMeanAlt{ padding: 5px 10px; } /* helpful footer */ .helpful-footer{background:#effaff; padding:25px 15px; position:relative;} .helpful-footer .footer_img{ display: inline-block; vertical-align: middle; width: 43%; text-align: center; padding-right: 10px; } .helpful-footer .footer_article{ display: inline-block; vertical-align: middle; width: 55%; margin-top: 10px; } .helpful-footer .blue_heading{font-size:18px; font-weight:400;color:#266db6; text-transform:capitalize; padding:0 0 20px;} .helpful-footer .footer_article p{font-size:14px; color:#555555;} .helpful-footer a{color:#ff6a25} .helpful-footer a:hover {text-decoration: none;} .helpful-footer .footer_img img { max-width: 100%; } @media (min-width:480px){ .helpful-footer .blue_heading{font-size:28px;} .helpful-footer .footer_article p{font-size:18px;} } @media (min-width:667px){ .helpful-footer .blue_heading{font-size:28px;} .helpful-footer .footer_article p{font-size:20px; line-height: 27px;} } @media (min-width:768px){ .helpful-footer .blue_heading{font-size:32px;} .helpful-footer .footer_article p {font-size:23px; line-height: 32px; } } @media (min-width:992px){ .helpful-footer .blue_heading{font-size:35px;} .helpful-footer .footer_article p{font-size:22px;} .helpful-footer .footer_article{width:56%;} } .prod-box .order-asfew{color:#242830;font-size:11px;line-height: 14px;font-style:italic;} .product-selection--xl-view .savings-row{margin:0} .product-selection--xl-view .cost-calculation{padding-top:0;} .pd-image-viewer .flickity-prev-next-button.next[disabled]:hover{ background: url(/cached/396/images/owl-arrows.png) no-repeat -70px 0; } .filter-zero-results .next-prev, .filter-zero-results .footer-product-count{display:none;} .footer-product-count{ text-align:center; font-style:italic; margin-bottom: 5px; } .product-selection .product-colors .view-video div{ background-color: #317eb3; } .product-selection--xl-view .product-selection__color-name--xl.product-selection__color-name{bottom:auto;} .featuredFacet { display: none; } @media(min-width:768px) { .featuredFacet { display: block; } .sidebar-filters ul.categories>li.featured-facets.active, .featured-facets { display: none; } } @media (min-width:992px){ .product-selection--xl-view li.view-video{display:none;} } .product-selection--xl-view .color-chicklets.long-list{max-height:314px;} /* Firefox mobile pops up a "select all" when you tap a color li */ .color-chicklets, .color-chicklets *{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .select-colors.qty a.active input{ -webkit-touch-callout: none; } /* custom styles for flavors */ .side-links a{display:inline-block;} .side-links .sic.flavor span{width:auto;height:auto;} .side-links .sic.flavor span a{padding:2px 5px;font-weight: normal;font-size: 12px;} .select-colors.flavor span a, .select-colors.flavor span{width:auto;height:auto;margin: 2px 0;} .select-colors.flavor span a{position:relative;padding:5px 13px;border-radius:4px;display: inline-block;font-weight:bold;} .select-colors.flavor span a.active{top:auto;left:auto;width:auto;height:auto;display:inline-block;padding:5px;} .select-colors.flavor span a.active:before{padding-right:2px;color:#000;display:inline;line-height:unset;font-size:18px;width:16px;} /* .category-header__desc { text-overflow: ellipsis; overflow: hidden; display: block; height: 52px; margin-top: .5rem; margin-bottom: 10px; line-height: 24px; font-size: 1rem; font-weight: normal; } */ .category header .featuredFacet a h4{display: inline;font-weight: inherit;} /* Vendor prefixes being ripped outputnav.main .main-submenu.main-submenu--open, .view-more:hover .main-submenu { */ @media screen and (min-width: 768px) { nav.main .main-submenu--css.main-submenu.main-submenu--open { display: -ms-flex; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } }