/** * @package BlueAcorn/Green Pistachio * @version 4.5.0 * @author Blue Acorn, Inc. * @copyright Copyright © 2022 Blue Acorn, Inc. * @desc This file was precompiled using modular pre-processor * css and javascript */ /*-------------------------------------------------------------- Resets --------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; line-height: normal; } body { margin: 0; padding: 0; line-height: normal; *font-size: small; } select, input, textarea, button { font: 100% sans-serif; } pre, code, kbd, samp { font-family: monospace, sans-serif; } a:hover, a:active { outline: none; } ul, ol { margin-left: 0; list-style: none; } nav ul, nav li { margin: 0; list-style: none; list-style-image: none; } small { font-size: 85%; } td { vertical-align: top; } sub, sup { font-size: 70%; line-height: 0; position: relative; top: -0.3em; } sub { bottom: -0.25em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } textarea { overflow: auto; } .ie6 legend, .ie7 legend { margin-left: -7px; } input[type="radio"] { vertical-align: text-top; margin-top: 2px; padding: 0; } input[type="checkbox"] { vertical-align: text-top; margin-top: 2px; padding: 0; } .ie7 input[type="checkbox"] { vertical-align: top; } .ie6 input { vertical-align: text-bottom; } input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } button, input, select, textarea { margin: 0; } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } ::-moz-selection { background: #ccc; color: #fff; text-shadow: none; } ::selection { background: #ccc; color: #fff; text-shadow: none; } a:link { -webkit-tap-highlight-color: transparent; } button { width: auto; overflow: visible; } .ie7 img { -ms-interpolation-mode: bicubic; } *:focus-visible { outline: 1px dotted #636363; } button::-moz-focus-inner { /*border: 0;*/ padding: 0; } /*-------------------------------------------------------------- Tools --------------------------------------------------------------*/ .hidden { display: block !important; border: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } .nobr { white-space: nowrap !important; } .wrap { white-space: normal !important; } .a-left { text-align: left !important; } .a-center { text-align: center !important; } .a-right { text-align: right !important; } .v-top { vertical-align: top; } .v-middle { vertical-align: middle; } .f-left, .left { float: left !important; } .f-right, .right { float: right !important; } .f-none { float: none !important; } .f-fix { float: left; width: 100%; } .no-display { display: none; } .no-display { display: none; } .no-margin { margin: 0 !important; } .no-padding { padding: 0 !important; } .no-bg { background: none !important; } .img-right { float: right; margin: 15px 0 30px 30px; } .img-left { float: left; margin: 15px 30px 30px 0; } .respond320, .respond480, .respond540, .respond640, .respond767, .respond768, .respond960 { display: none !important; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } /** Mixins, Variables and Helpers */ .triangle-props { content: ""; display: block; position: absolute; } /* ============================================ Clearfix ============================================ */ .bottom-container:before, .bottom-container:after, #nav-wrapper:before, #nav-wrapper:after, .header:before, .header-container:before, .nav-container:before, .main:before, .main-container:before, .col-main:before, .main .col-wrapper:before, .col-left:before, .col-right:before, .footer-container:before, .col2-set:before, .products-grid:before, .clearfix:before, .header:after, .header-container:after, .nav-container:after, .main:after, .main-container:after, .col-main:after, .main .col-wrapper:after, .col-left:after, .col-right:after, .footer-container:after, .col2-set:after, .products-grid:after, .clearfix:after { content: " "; display: table; } .bottom-container:after, #nav-wrapper:after, .header:after, .header-container:after, .nav-container:after, .main:after, .main-container:after, .col-main:after, .main .col-wrapper:after, .col-left:after, .col-right:after, .footer-container:after, .col2-set:after, .products-grid:after, .clearfix:after { clear: both; } .clearfix { zoom: 1; } /** * @package BlueAcorn/Green Pistachio * @version 4.5.0 * @author Blue Acorn, Inc. * @copyright Copyright © 2022 Blue Acorn, Inc. * @desc This file was precompiled using modular pre-processor * css and javascript */ /*ie7 fix*/ .ie7 .product-listing-view ul.products-grid, .ie7 .product-listing-view .bottom-container { clear: both; } .ie7 .form-search-mini button { display: block; float: left; } .ie7 .form-search-mini input[type="text"] { width: 70%; height: 18px; min-height: 18px; } .ie7 .hero-slide img { max-width: 1400px; width: 100%; /*height: 443px;*/ } .ie7 #hero .carousel-control { display: block !important; z-index: 10 !important; filter: alpha(opacity=100) !important; } .ie7 #hero .carousel-control.next { background: #fff url("https://www.signaturehardware.com/skin/frontend/enterprise/signature/images/sprite.png") no-repeat -364px 0; } .ie7 #hero .carousel-control.prev { background: #fff url("https://www.signaturehardware.com/skin/frontend/enterprise/signature/images/sprite.png") no-repeat -290px 0; } .ie7 .cms-index-index .carousel-nav { display: block !important; filter: alpha(opacity=100) !important; } .ie7 #hero { height: 1400px; } .ie7 #featured-categories .menu ul { text-align: center; } .ie7 #featured-categories .menu ul li { display: inline; } .ie7 .footer .newsletter-form .form-subscribe-header { width: 50%; float: left; } .ie7 .footer .newsletter-form .field-wrapper { width: 40%; float: right; } .ie7 .footer .newsletter-form .input-box { width: 70%; float: left; background: #fff; height: 30px; } .ie7 .footer .newsletter-form .input-box input { width: 90%; height: 17px !important; min-height: 17px; display: block; } .ie7 .footer .newsletter-form button { float: left; position: relative; display: block; } .ie7 .footer .newsletter-form button .arrow-right { position: absolute; left: 10px; top: 0px; display: block; } .ie7 .header-container .header { margin: 0; padding: 20px 0; height: 48px; } .ie7 .footer .footer-links .column { float: left; display: block; } .ie7 .footer .legal-info address, .ie7 .footer .legal-info p { display: block; float: left; line-height: 21px; } .ie7 .toolbar .view-mode, .ie7 .toolbar .sort-by, .ie7 .toolbar .limiter, .ie7 .toolbar .pages { width: 20%; } .ie7 .toolbar .pages { width: 15%; } .ie7 .toolbar .limiter select, .ie7 .toolbar .limiter label { float: left; display: block; } /*search*/ .ie7 .form-search-mini { width: 246px; position: relative; } .ie7 .form-search-mini input#search { width: 196px; padding: 0 10px; display: block; line-height: 30px; height: 30px; position: absolute; top: 2px; left: 0; } .ie7 .form-search-mini button { width: 30px; height: 30px; position: absolute; top: 2px; right: 0; } /*END search*/ /*mail*/ .ie7 .no-respond .footer .form-subscribe .field-wrapper .input-box { width: 375px; } /*END mail*/ .ie7 .featured-listing .sidebar { padding: 0 20px; } .ie7 .featured-listing .sidebar h2 { padding-top: 20px; } .ie7 .featured-listing .sidebar .button { width: 192px; } /*front bottom carousel*/ .ie7 .carousel-nav li, .ie7 .banana-nav li { display: inline; } .ie7 .widget-featured-products .products-grid .item { width: 338px !important; margin-right: 33px !important; } /*END front bottom carousel*/ /*END ie7 fix*/ /* ============================================ IE8 Fixes ============================================ */ .ie8 .thumbnail-counter { display: none; } .ie8 img { width: auto; } .ie8 .container { width: 1440px !important; } .ie8 .cms-index-index .container { width: 100% !important; } .ie8 #hero { width: 1280px; } .ie8 #loginMessage { padding-left: 0; } .ie8 .nav-search { height: 54px; } .ie8 .increment_links span.less:after { border-top: 5px solid #493627; border-bottom: none; } .ie8 .featured-listing .sidebar { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF)"; zoom: 1; } .ie8 .product-shop .add-to-cart .qty, .ie8 .form-search-mini input[type="text"], .ie8 .footer .form-subscribe .field-wrapper .input-box input { height: 30px; min-height: 0; } .ie8 div#listrak-recs .listrak-recommendation { width: 150px; } .ie8 .tooltip-icon { display: none !important; } .ie8 .checkout-cart-index.two-col-cart .cart-form { width: 70%; float: left; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-table > thead { background-color: #eeeeee; } .ie8 .checkout-cart-index.two-col-cart .cart-collaterals { display: none; } .ie8 .checkout-cart-index.two-col-cart .totals { position: relative; float: right; width: 28.09% !important; border: 2px #D3CBC0 solid; background-color: #FFF !important; font-family: 'Effra W01 Regular', arial, helvetica, sans-serif; background-color: #FFF; } .ie8 .checkout-cart-index.two-col-cart .totals h2 { display: block; font-family: 'Effra W01 Regular', arial, helvetica, sans-serif; font-size: 18px; line-height: 22px; margin-bottom: 18px; text-transform: uppercase; } @media (max-width: 740px) { .ie8 .checkout-cart-index.two-col-cart .totals h2 { display: none; } } .ie8 .checkout-cart-index.two-col-cart .totals td, .ie8 .checkout-cart-index.two-col-cart .totals th { font-size: 14px; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table { width: 100% !important; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table tr { border-bottom: 2px #D3CBC0 solid; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table tr td { margin-top: 8px; padding: 9px 0px; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table tr:nth-child > td:nth-child(1) { float: left; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table tr:nth-child > td:nth-child(2) { float: right; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table tr td#shipping-cell { width: 100% !important; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table .shipping { float: none; width: 100%; margin-left: 0; margin-top: 0; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table .shipping h2.customStyleSelectBox { padding: 0; background-color: #FFF; width: 100%; line-height: 13px; height: 17px; font-size: 11px; color: #BC5136; margin-bottom: 0; margin-top: 3px; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table .shipping .trigger.customStyleSelectBox:before, .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table .shipping .trigger.swatch-select:before { position: absolute; content: '+'; width: 0; height: 0; top: 0; right: 23px; font-size: 20px; color: #000; margin-top: 0 !important; border: none !important; } .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table .shipping .customStyleSelectBox .open:before, .ie8 .checkout-cart-index.two-col-cart #shopping-cart-totals-table .shipping .swatch-select .open:before { position: absolute; content: '-'; width: 0; height: 0; top: 0 !important; right: 23px !important; font-size: 20px; color: #000; margin-top: 0 !important; border: none !important; } /** * @package BlueAcorn/Green Pistachio * @version 4.5.0 * @author Blue Acorn, Inc. * @copyright Copyright © 2022 Blue Acorn, Inc. * @desc This file was precompiled using modular pre-processor * css and javascript */ .tooltipster-default { color: #393944; background: #fff; border: 1px solid #aea7a2; line-height: 17px; box-shadow: 0px 2px 2px #e4e4e4; -webkit-box-shadow: 0px 2px 2px #e4e4e4; -moz-box-shadow: 0px 2px 2px #e4e4e4; } /* Use this next selector to style things like font-size and line-height: */ .tooltipster-default .tooltipster-content { font-family: 'Effra W01 Regular', arial, helvetica, sans-serif; font-size: 12px; line-height: 17px; padding: 15px !important; overflow: hidden; } /* This is the base styling required to make all Tooltipsters work */ .tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; z-index: 9999999; pointer-events: none; width: auto; overflow: visible; } .tooltipster-base .tooltipster-content { overflow: hidden; } .tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: -1px; z-index: -1; } .tooltipster-arrow.tooltipster-arrow-left { left: 1px; } .tooltipster-arrow.tooltipster-arrow-top-left { top: 1px; left: 2px; } .tooltipster-arrow.tooltipster-arrow-bottom-left { top: -1px; left: 2px; } .tooltipster-arrow span, .tooltipster-arrow-border { display: block; width: 0; height: 0; position: absolute; } .tooltipster-arrow-border { border-color: #aea7a2 !important; } .tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-top: 8px solid; bottom: -7px; } .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid; bottom: -7px; } .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 8px solid; top: -7px; } .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-bottom: 9px solid; top: -7px; } .tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { left: 0; right: 0; margin: 0 auto; } .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { left: 5px; } .tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { left: 4px; } .tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { right: 6px; } .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { right: 5px; } .tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -7px; right: -7px; } .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 9px solid; margin-top: -8px; } .tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-right: 8px solid; top: 50%; margin-top: -7px; left: -7px; } .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-right: 9px solid; margin-top: -8px; } /* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */ .tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } .tooltipster-fade-show { opacity: 1; } .tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; left: 0px !important; opacity: 0; } /* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */ .tooltipster-content-changing { opacity: 0.5; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } /** * @package BlueAcorn/Green Pistachio * @version 4.5.0 * @author Blue Acorn, Inc. * @copyright Copyright © 2022 Blue Acorn, Inc. * @desc This file was precompiled using modular pre-processor * css and javascript */ /* ============================================ Email a Friend Feature ============================================ */ @media screen and (max-width: 740px) { .fancybox-wrap.fancybox-email-friend { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; overflow: auto !important; } } .fancybox-wrap.fancybox-email-friend .fancybox-inner { width: 100% !important; height: auto !important; } html.email-mobile-fancybox { height: 100%; overflow: hidden; } html.email-mobile-fancybox body { height: 100%; overflow: hidden; } #emailfriend { width: 100%; } #emailfriend #left-col { float: left; width: 50%; padding: 54px; background-color: #F0F0F0; } @media screen and (max-width: 740px) { #emailfriend #left-col { clear: both; width: 100%; padding-top: 54px; padding-bottom: 54px; } } #emailfriend #left-col .page-title h1 { font-size: 24px; line-height: 29px; padding: 0 0 10px; color: #493627; } #emailfriend #left-col .page-message { font-size: 14px; line-height: 17px; padding: 0 0 12px; color: #493627; } #emailfriend #right-col { float: left; width: 50%; padding: 54px 54px 80px; background-color: #fff; } @media screen and (max-width: 740px) { #emailfriend #right-col { clear: both; width: 100%; } } #emailfriend #right-col .fieldset { padding-top: 120px; padding-bottom: 40px; } @media screen and (max-width: 740px) { #emailfriend #right-col .fieldset { padding-top: 0; } } #emailfriend .form-list { text-align: left; } #emailfriend .form-list label { font-size: 14px; line-height: 17px; padding: 0 0 5px; color: #493627; } #emailfriend .form-list .input-box { width: auto !important; } #emailfriend .buttons-set.form-buttons { text-align: center; } #emailfriend button span { font-size: 18px; } @media screen and (max-width: 740px) { .fancybox-wrap.fancybox-email-friend-success { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; overflow: auto !important; } } .fancybox-wrap.fancybox-email-friend-success .fancybox-inner { width: 100% !important; } #emailFriendSuccess { width: 100%; height: 100%; background-color: #F0F0F0; text-align: center; padding: 160px 130px 150px; } @media screen and (max-width: 740px) { #emailFriendSuccess { padding: 80px 10px 50px; } } @media screen and (max-width: 675px) { #emailFriendSuccess { padding-top: 65px; } } @media screen and (max-width: 450px) { #emailFriendSuccess { padding: 110px 10px 50px; } } #emailFriendSuccess .checkmark:before { content: "\2713 "; color: #fff; background-color: #A9C4BA; border-radius: 50%; padding: 7px 12px; font-size: 25px; } #emailFriendSuccess .message { font-size: 24px; color: #493627; padding: 37px 20px 20px; } #emailFriendSuccess button { padding: 13px 22px; margin-top: 15px; font-size: 18px; } @media screen and (max-width: 740px) { p.emailto-link { display: none; } } /* ------------------------------------------------------------------- Microtip Modern, lightweight css-only tooltips Just 1kb minified and gzipped @author Ghosh @package Microtip ---------------------------------------------------------------------- 1. Base Styles 2. Direction Modifiers 3. Position Modifiers --------------------------------------------------------------------*/ /* ------------------------------------------------ [1] Base Styles -------------------------------------------------*/ [aria-label][role~="tooltip"] { position: relative; } [aria-label][role~="tooltip"]::before, [aria-label][role~="tooltip"]::after { transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; opacity: 0; pointer-events: none; transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s); position: absolute; box-sizing: border-box; z-index: 10; transform-origin: top; } [aria-label][role~="tooltip"]::before { background-size: 100% auto !important; content: ""; } [aria-label][role~="tooltip"]::after { background: rgba(255, 255, 255, 1); border-radius: 0; color: #000; content: attr(aria-label); font-size: var(--microtip-font-size, 13px); font-weight: var(--microtip-font-weight, normal); text-transform: var(--microtip-text-transform, none); padding: .5em 1em; white-space: nowrap; box-sizing: content-box; border: 1px solid #999; } [aria-label][role~="tooltip"]:hover::before, [aria-label][role~="tooltip"]:hover::after, [aria-label][role~="tooltip"]:focus::before, [aria-label][role~="tooltip"]:focus::after { opacity: 1; pointer-events: auto; } /* ------------------------------------------------ [2] Position Modifiers -------------------------------------------------*/ [role~="tooltip"][data-microtip-position|="top"]::before { background: url("https://www.signaturehardware.com/skin/frontend/base/default/css/data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; height: 6px; width: 18px; margin-bottom: 5px; } [role~="tooltip"][data-microtip-position|="top"]::after { margin-bottom: 11px; } [role~="tooltip"][data-microtip-position|="top"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; } [role~="tooltip"][data-microtip-position|="top"]:hover::before { transform: translate3d(-50%, -5px, 0); } [role~="tooltip"][data-microtip-position|="top"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; } [role~="tooltip"][data-microtip-position="top"]:hover::after { transform: translate3d(-50%, -5px, 0); } /* ------------------------------------------------ [2.1] Top Left -------------------------------------------------*/ [role~="tooltip"][data-microtip-position="top-left"]::after { transform: translate3d(calc(-100% + 16px), 0, 0); bottom: 100%; } [role~="tooltip"][data-microtip-position="top-left"]:hover::after { transform: translate3d(calc(-100% + 16px), -5px, 0); } /* ------------------------------------------------ [2.2] Top Right -------------------------------------------------*/ [role~="tooltip"][data-microtip-position="top-right"]::after { transform: translate3d(calc(0% + -16px), 0, 0); bottom: 100%; } [role~="tooltip"][data-microtip-position="top-right"]:hover::after { transform: translate3d(calc(0% + -16px), -5px, 0); } /* ------------------------------------------------ [2.3] Bottom -------------------------------------------------*/ [role~="tooltip"][data-microtip-position|="bottom"]::before { background: url("https://www.signaturehardware.com/skin/frontend/base/default/images/microtip/top-arrow2.svg") no-repeat; height: 14px; width: 19px; margin-top: 0px; margin-bottom: 0; } [role~="tooltip"][data-microtip-position|="bottom"]::after { margin-top: 13px; } [role~="tooltip"][data-microtip-position|="bottom"]::before { transform: translate3d(35%, -10px, 0); bottom: auto; left: 50%; top: 100%; z-index: 10; } [role~="tooltip"][data-microtip-position|="bottom"]:focus::before, [role~="tooltip"][data-microtip-position|="bottom"]:hover::before { transform: translate3d(35%, 30px, 0); } [role~="tooltip"][data-microtip-position|="bottom"]::after { transform: translate3d(-35%, -10px, 0); top: 100%; left: 50%; z-index: 9; } [role~="tooltip"][data-microtip-position="bottom"]:focus::after, [role~="tooltip"][data-microtip-position="bottom"]:hover::after { transform: translate3d(-35%, 30px, 0); } /* ------------------------------------------------ [2.4] Bottom Left -------------------------------------------------*/ [role~="tooltip"][data-microtip-position="bottom-left"]::after { transform: translate3d(calc(-100% + 16px), -10px, 0); top: 100%; } [role~="tooltip"][data-microtip-position="bottom-left"]:hover::after { transform: translate3d(calc(-100% + 16px), 0, 0); } /* ------------------------------------------------ [2.5] Bottom Right -------------------------------------------------*/ [role~="tooltip"][data-microtip-position="bottom-right"]::after { transform: translate3d(calc(0% + -16px), -10px, 0); top: 100%; } [role~="tooltip"][data-microtip-position="bottom-right"]:hover::after { transform: translate3d(calc(0% + -16px), 0, 0); } /* ------------------------------------------------ [2.6] Left -------------------------------------------------*/ [role~="tooltip"][data-microtip-position="left"]::before, [role~="tooltip"][data-microtip-position="left"]::after { bottom: auto; left: auto; right: 100%; top: 50%; transform: translate3d(10px, -50%, 0); } [role~="tooltip"][data-microtip-position="left"]::before { background: url("https://www.signaturehardware.com/skin/frontend/base/default/css/data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; height: 18px; width: 6px; margin-right: 5px; margin-bottom: 0; } [role~="tooltip"][data-microtip-position="left"]::after { margin-right: 11px; } [role~="tooltip"][data-microtip-position="left"]:hover::before, [role~="tooltip"][data-microtip-position="left"]:hover::after { transform: translate3d(0, -50%, 0); } /* ------------------------------------------------ [2.7] Right -------------------------------------------------*/ [role~="tooltip"][data-microtip-position="right"]::before, [role~="tooltip"][data-microtip-position="right"]::after { bottom: auto; left: 100%; top: 50%; transform: translate3d(-10px, -50%, 0); } [role~="tooltip"][data-microtip-position="right"]::before { background: url("https://www.signaturehardware.com/skin/frontend/base/default/css/data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; height: 18px; width: 6px; margin-bottom: 0; margin-left: 5px; } [role~="tooltip"][data-microtip-position="right"]::after { margin-left: 11px; } [role~="tooltip"][data-microtip-position="right"]:hover::before, [role~="tooltip"][data-microtip-position="right"]:hover::after { transform: translate3d(0, -50%, 0); } /* ------------------------------------------------ [3] Size -------------------------------------------------*/ [role~="tooltip"][data-microtip-size="small"]::after { white-space: initial; width: 80px; } [role~="tooltip"][data-microtip-size="medium"]::after { white-space: initial; width: 150px; } [role~="tooltip"][data-microtip-size="large"]::after { white-space: initial; width: 260px; } /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('https://www.signaturehardware.com/skin/frontend/enterprise/signature/js/fancybox/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('https://www.signaturehardware.com/skin/frontend/enterprise/signature/js/fancybox/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('https://www.signaturehardware.com/skin/frontend/enterprise/signature/js/fancybox/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('https://www.signaturehardware.com/skin/frontend/enterprise/signature/js/fancybox/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('https://www.signaturehardware.com/skin/frontend/enterprise/signature/js/fancybox/fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('https://www.signaturehardware.com/skin/frontend/enterprise/signature/js/fancybox/fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } }