.prodBreadcrumbs, .prodBreadcrumbs h2, .prodBreadcrumbs .prodCrumbLink{ font-size:20px; line-height:24px; margin:0; padding:8px 0 0 0; color:#333; text-decoration:none; } .prodBreadcrumbs h2{ display:inline; } .prodBreadcrumbs{ border-bottom:1px solid #DDD; } .prodCrumbLink:hover{ color:#000; text-decoration:underline; } .prodNavTable{ padding-bottom:10px; } .prodDisplay { clear: both; font-size:10pt; color :#444; padding-bottom:80px; } .prodImg { padding-bottom:5px; position:relative;} .imgUpper{ padding-top:10px } .prodImg .MagicZoom{ width:100%; } .millSizesImg{ max-width:100%; max-height:50vh; } .prodDesc { padding:0px 5px 5px 5px; } .prodTitle { padding-top:0; margin-top:0; } .prodOrder { padding-top: 10px; } .prodCatalogDesc { padding-bottom:10px; line-height: 1.2; } .prodColors { clear: both; } .prodSizes { clear: both; } .prodOrder { clear: both; } .colorHeading { clear: both; font-size: 11pt; } .sizeHeading { clear: both; font-size: 11pt; } .imgDesc { } #imgMsg{ position:absolute; opacity:0.6; background-color:#333; padding:8px; border-radius:16px; z-index:100; color:#fff; } .sizeOuter { float: left; margin:2px; cursor:pointer; text-align:center; border:2px solid #CCCCCC; color:#666666; border-radius:18px;} .colorOuter { float: left; margin:2px; cursor:pointer; border:2px solid #CCCCCC; background-color:#FFF; border-radius:18px; } .colorOuter a{ display:block!important; /* magiczoom auto adds display:inline-block... can't prevent with options */ } .sizeOuter.OOS, .colorOuter.OOS { border-style:dotted; position:relative; } .OOS .sizeInner{ opacity:0.7; } .colorOuter.OOS .colorInnerWrap:after, .sizeOuter.OOS a:after { content: "\f00d"; /* Close icon */ font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; position: absolute; font-size: 28px; color: #999; top: 50%; left: 50%; margin: -11px 0 0 -11px; z-index: 1; opacity:0.2; } .colorOuter.OOS .colorInnerWrap:after{ opacity:0.4 } .sizeOuter.selected, .colorOuter.selected { border-color: #666; } .colorOuter.selected, .sizeOuter.selected{ box-shadow: 0 0 6px #666; } .colorInner { width:30px; height:30px; margin: 1px; border-radius:15px; overflow:hidden;} .colorInner img { width:30px; height:30px; } .sizeInner { font-size:11pt; vertical-align:middle; text-align:center; line-height:30px; height:30px; margin: 0 2px; min-width:28px; border-radius:15px; } .sizeOuter a{ text-decoration:none; color:#666666; width:30px; border-radius:18px;} .selectedColor, .selectedSize { font-weight:bold; } .prodTopTabOuter .tab-pane{ padding:5px; } /* Multi Hex value colors */ .multiHex{ float:left; height:100%; border:0; margin:0; padding:0; } .multi1of2, .multi2of2{ width:50%; } .multi1of3{ width:50%; } .multi2of3, .multi3of3{ width:25%; } .multi1of4, .multi2of4, .multi3of4, .multi4of4{ width:25%; } /*** New PreSell Classes ***/ .presellDesc{ color:#EE159B; float:left; } .streetDate { color:#00CC00; float:left; margin-left: 8px; } .preSellCopy{ color:#008800; clear:both; } .colorOuter.preSell, .sizeOuter.preSell{ border-color: #008800; } .colorOuter.preSell.selected, .sizeOuter.preSell.selected{ border-color:#00CC00; } .prodIcons {} .featureIcon { padding:4px; } .imgUpper { display:block; clear: both; } .imgLower { display:block; clear: both; text-align:center;} .prodPrice {font-size: 11pt;} .regPriceLabel { float:left; } .regPrice { float:left; } .priceStrike { float:left; text-decoration: line-through; padding-right:8px;} .salePriceLabel { float:left; } .salePrice { float:left; color: red; } .optLinkRow{ display:inline-block; } .optLinkRow a { white-space: nowrap; margin: 0 2px; } /*========-------- Cart Button Display --------========*/ .colorSelect { float: left; } .sizeSelect { } .prodQty { } .prodCartBtn { padding-top:8px; } .orderBtnRow { } .addToCart { } .cartError { height: 20px; color: red; } .viewCart { } /*========-------- Image Overlay Display --------========*/ #imgMessage { display:none; width:175px; position: absolute; opacity: 0.60; -moz-opacity: 0.60; -khtml-opacity: 0.60; filter: alpha(opacity=60); z-index:5; border-radius:9px; } .imgMessageText { font-size:12pt; color: #ffffff; width:175px; background-color:#4a4a4a; text-align:center; } /*========-------- Image Library styles --------========*/ .imgLibDiv { z-index: 5; } .heightPad {padding-top: 3px; padding-bottom: 3px; vertical-align: middle;} .imgLibTable {border: 1px solid black; background-color: #FFFFFF; text-align: center; width: 100%; hasLayout: true; -moz-box-shadow: 0 1px 5px #444; -webkit-box-shadow: 0 1px 5px #444; box-shadow:0 1px 5px #444; } .imgLibHdr { background: #e9e9e9; color: #444; font-weight: bold; font-size: 12px; border-bottom: 1px solid black; padding: 2px;} .imgLibButton { display: block; vertical-align: middle; background: #DCDCDC; border-radius:7px; width:70px; height:17px; line-height:15px; font-size:9px; text-decoration:none; cursor: pointer;} a.imgLibLink, a.imgLibLink:active, a.imgLibLink:link, a.imgLibLink:visited, a.imgLibLink:hover { font-size: 9px; text-decoration: none; vertical-align: middle; } .closeButton { border: 2px solid white; font-weight: bold; text-align: center; vertical-align: middle; font-size: 12px; cursor: pointer; } .prodImgInner { text-align:center; } /* Alternet View Styles */ .altViews { clear:both; } .altViewInner{ float:left; max-width:50px; } .altViewInner a, .altViewInner img{ width: 100%; height:auto; } /* Magic Zoom Plus v5.2.9 Copyright 2019 Magic Toolbox Buy a license: https://www.magictoolbox.com/magiczoomplus/ License agreement: https://www.magictoolbox.com/license/ */ /** * Core styles */ #mzoom, #mainProdImg1{ width:100%!important; height:auto!important; max-width:400px !important; max-height:400px !important; z-index: 999; } .prodImgInner img { max-width:400px !important; max-height:400px !important; } @font-face { font-family: "magictoolbox-thin"; font-weight: normal; font-style: normal; src: url("fonts/magictoolbox-thin.eot?#iefix") format("embedded-opentype"), url("data:font/opentype;base64,AAEAAAANAIAAAwBQRkZUTXJLSEgAAAdAAAAAHEdERUYAKQAPAAAHIAAAAB5PUy8yAlYL4QAAAVgAAABWY21hcEAYY70AAAHUAAABSmdhc3D//wADAAAHGAAAAAhnbHlmMMVOJwAAAzQAAAGIaGVhZAmWUYMAAADcAAAANmhoZWEP9QamAAABFAAAACRobXR4L0EAQAAAAbAAAAAkbG9jYQGGAgAAAAMgAAAAFG1heHAAUAAcAAABOAAAACBuYW1l6MPgdAAABLwAAAH1cG9zdLaTuyIAAAa0AAAAZAABAAAAAQAAEWdxz18PPPUACwgAAAAAANDtg/MAAAAA0O2D8wAA/gIInAaeAAAACAACAAAAAAAAAAEAAAae/gIAuAibAAD//wicAAEAAAAAAAAAAAAAAAAAAAAJAAEAAAAJABkABQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQZeAZAABQAIBTMFmQAAAR4FMwWZAAAD1wBmAhIAAAAABQAAAAAAAAAAAAAAAAAAAAACAAAAAAAAUGZFZABAoAGgBgZm/mYAuAaeAf4AAAABAAAAAAAABAAAAAAAAAACqgAACJsAAAOlAAADpQAACJsAAAibAAAHfABAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAACgBv//AAAAAKAB//8AAGACAAEAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqACoAKgBMAGAAdACIAJwAxAAFAAAAAAQABZoAAgAFAAgACwAPAAATEQkBIQE3AREJASEDESERZgFd/uECuP6kPQFd/mYBXP1IpAQABNf77AIK/ZkCC1z99gQU/lICCvrNBZr6ZgABAAD+AgicBp4ACwAACQEHCQEnCQE3CQEXBHEEKyP71fvVIwQr+9UjBCsEKyMCUPvVIwQr+9UjBCsEKyP71QQrIwAAAAEAAP4CA6YGngAFAAARARcJAQcDixv8iQN1GwJQBE4X+8n7yRcAAAABAAD+AgOmBp4ABQAACQEnCQE3A6b8dxsDd/yHGwJQ+7IXBDcENxcAAQAAADcInAPdAAUAACUBNwkBFwRO+7IXBDcENxc3A4oa/IkDeRoAAAEAAAA3CJwD3QAFAAAJAQcJAScETgROF/vJ+8kXA938dxsDd/yHGwACAEAAQAHAAcAADQAYAAAlBycGIyImNDYyFhUUDwEWMzI2NCYiBhUUAcAXcSk3P1lZflkh1yc5OFBQcFBXF3EhWX5ZWT82KQInUHBQUDg5AAAADACWAAEAAAAAAAEAEQAkAAEAAAAAAAIABABAAAEAAAAAAAMALQChAAEAAAAAAAQAEQDzAAEAAAAAAAUACwEdAAEAAAAAAAYAEQFNAAMAAQQJAAEAIgAAAAMAAQQJAAIACAA2AAMAAQQJAAMAWgBFAAMAAQQJAAQAIgDPAAMAAQQJAAUAFgEFAAMAAQQJAAYAIgEpAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAFQAaABpAG4AAFRoaW4AAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAATQBhAGcAaQBjAFQAbwBvAGwAYgBvAHgALQBUAGgAaQBuACAAOgAgADIANwAtADEALQAyADAAMQA1AABGb250Rm9yZ2UgMi4wIDogTWFnaWNUb29sYm94LVRoaW4gOiAyNy0xLTIwMTUAAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAAAAAAIAAAAAAAD/mgBmAAAAAAAAAAAAAAAAAAAAAAAAAAAACQAAAAEAAgECAQMBBAEFAQYBBwd1bmlBMDAxB3VuaUEwMDIHdW5pQTAwMwd1bmlBMDA0B3VuaUEwMDUHdW5pQTAwNgAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAgAAQAEAAAAAgAAAAAAAAABAAAAANBwQGEAAAAA0O2D8wAAAADQ7YPz"); } .MagicZoom, .mz-figure, .mz-lens, .mz-zoom-window, .mz-loading, .mz-hint, .mz-expand .mz-expand-stage, .mz-expand .mz-expand-stage .mz-image-stage, .mz-expand .mz-image-stage > figure .mz-caption, .mz-thumb img, .mz-expand-thumbnails, .mz-expand-controls, .mz-button { -webkit-box-sizing: border-box; box-sizing: border-box; } .MagicZoom, .mz-figure { display: inline-block; outline: 0 !important; font-size: 0 !important; line-height: 100% !important; direction: ltr !important; position: relative; z-index: 1; margin: 0 auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .MagicZoom { -webkit-transform: translate3d(0,0,0); -ms-touch-action: pan-y; touch-action: pan-y; } figure.mz-figure { overflow: hidden; margin: 0 !important; width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .MagicZoom img, .mz-figure img { border: 0 !important; margin: 0 !important; outline: 0 !important; padding: 0 !important; } .MagicZoom > img, .mz-figure > img { width: 100%; height: auto; } .ie8-magic .MagicZoom > img, .ie8-magic .mz-figure > img { width: 100%; max-width: none !important; } .mz-figure.mz-no-zoom.mz-no-expand, .mz-expand .mz-figure.mz-no-zoom { cursor: default !important; } .mz-figure.mz-active, .mz-expand { -ms-touch-action: none; touch-action: none; } .mz-lens, .mz-zoom-window { position: absolute !important; overflow: hidden !important; pointer-events: none !important; } .mz-lens img, .mz-zoom-window img { position: absolute !important; max-width: none !important; max-height: none !important; } .mz-lens img { -webkit-transition: none !important; transition: none !important; } .mz-zoom-window { z-index: 2000000000; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .mz-zoom-window.mz-magnifier { -webkit-mask-image: -webkit-radial-gradient(circle, white, black); -webkit-mask-clip: content; cursor: none; } .mz-figure.mz-active .mz-zoom-window.mz-magnifier { pointer-events: auto !important; cursor: inherit !important; } .mz-zoom-window.mz-magnifier.mz-expanded { z-index: 2147483647; } .mz-zoom-window img { width: auto; height: auto; left: -1000%; right: -1000%; top: -1000%; bottom: -1000%; margin: auto !important; -webkit-transition: none !important; transition: none !important; -webkit-transform-origin: 50% 50% !important; -ms-transform-origin: 50% 50% !important; transform-origin: 50% 50% !important; } .mz-zoom-window.mz-preview img { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; width: 100% !important; height: auto !important; -webkit-transform: none !important; transform: none !important; } .lt-ie9-magic .mz-zoom-window img { margin: 0 !important; } .mz-expand-controls { z-index: 2147483647; } .mz-fade { -webkit-transition: opacity .25s; transition: opacity .25s; } .mz-hidden { opacity: 0; } .mz-visible { opacity: 1; } .mobile-magic .mz-expand .mz-expand-bg { -webkit-transform-style: flat !important; transform-style: flat !important; } .mobile-magic .mz-expand .mz-image-stage > figure .mz-caption { display: none !important; } .mobile-magic .mz-expand-controls.mz-fade { transition: none !important; } .mobile-magic .mz-expand > .mz-zoom-window { top: 0 !important; left: 0 !important; } .mz-expanded-view-open, .mz-expanded-view-open body { overflow: hidden !important; } .mz-expanded-view-open body { height: auto !important; } /** * Main figure */ .mz-figure.mz-active { background: #fff; } .mz-figure.mz-no-zoom, .mz-figure.mz-click-zoom, .mz-figure.mz-active { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mz-figure.mz-active.mz-no-expand { cursor: crosshair; } .mz-figure.mz-active.mz-click-zoom.mz-no-expand { cursor: crosshair; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } .mz-figure.mz-active.mz-magnifier-zoom.mz-hover-zoom.mz-no-expand { cursor: none; } .mz-figure.mz-magnifier-zoom.mz-active { overflow: visible !important; } .mz-figure.mz-active > img { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(80%) opacity(60%); filter: grayscale(80%) opacity(60%); } .no-cssfilters-magic .mz-figure.mz-active > img { opacity: 0.6; } .lt-ie10-magic .mz-figure.mz-active > img { opacity: 1; filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1,opacity=0.6); } .mz-figure.mz-active.mz-inner-zoom, .lt-ie11-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom, .lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom > img { opacity: 0; } .lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom, .lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom > .mz-zoom-window { opacity: 1; } .lt-ie10-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom, .lt-ie10-magic .mz-figure.mz-active.mz-inner-zoom > img { filter: alpha(opacity=0); } .ie9-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom { background: transparent; } /** * Zoom lens */ .mz-lens { border: 1px solid #aaa; border-color: rgba(170,170,170,0.7); box-shadow: 0 0 5px rgba(0,0,0,.3); cursor: none; z-index: 10; opacity: 0; } .mz-figure.mz-active .mz-lens { opacity: 1; -webkit-transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s; transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s; } .mz-figure.mz-active.mz-magnifier-zoom .mz-lens { border-radius: 50%; opacity: 0; cursor: none; } /** * Zoom window */ .mz-zoom-window { background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .2); } .mz-zoom-window.mz-magnifier { border-radius: 100%; border: 0; background: rgba(255,255,255,.3); } .mz-zoom-window.mz-magnifier:before { content: ""; display: block; position: absolute; top: 0;bottom: 0; left: 0; right: 0; border-radius: 100%; border: 1px solid rgba(170,170,170,0.7); box-shadow: inset 0 0 20px 1px rgba(0,0,0,.3); background: transparent; z-index: 1; } .mz-zoom-window.mz-magnifier.mz-square, .mz-zoom-window.mz-magnifier.mz-square:before { border-radius: 0 !important; } .lt-ie9-magic .mz-zoom-window { border: 1px solid #e5e5e5; } .mz-zoom-window.mz-inner { border: none; box-shadow: none; } /* Caption in zoom window */ .mz-zoom-window .mz-caption { background: #777; color: #fff; font-size: 10pt; opacity: 0.8; position: absolute; top: 0; z-index: 150; padding: 3px; width: 100%; line-height: normal !important; text-align: center !important; } .lt-ie9-magic .mz-zoom-window .mz-caption { filter: alpha(opacity=80); } .mz-zoom-window.caption-bottom .mz-caption { top: auto; bottom: 0; } .mz-zoom-window.mz-expanded > .mz-caption { display: none; } /* Zoom window animations */ .mz-zoom-window.mz-deactivating, .mz-zoom-window.mz-activating { -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } .mz-zoom-window.mz-deactivating { -webkit-transition-duration: .25s, .25s, .25s; transition-duration: .25s, .25s, .25s; } .mz-zoom-window.mz-p-right, .mz-zoom-window.mz-p-left, .mz-zoom-window.mz-p-top, .mz-zoom-window.mz-p-bottom { opacity: 0; z-index: -100; } .mz-zoom-window.mz-p-right { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } .mz-zoom-window.mz-p-left { -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } .mz-zoom-window.mz-p-top { -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } .mz-zoom-window.mz-p-bottom { -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0); } /* Inner mode animation */ .mz-zoom-window > img { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mz-zoom-window.mz-p-inner.mz-deactivating > img, .mz-zoom-window.mz-p-inner.mz-activating > img { -webkit-transition: -webkit-transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9) !important; transition: transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9) !important; } /* Magnifier mode animation */ .mz-zoom-window.mz-p-magnifier { -webkit-transform: scale(.1); transform: scale(.1); } /* Preview mode animation */ .mz-zoom-window.mz-preview.mz-deactivating, .mz-zoom-window.mz-preview.mz-activating, .mz-zoom-window.mz-custom.mz-deactivating, .mz-zoom-window.mz-custom.mz-activating { -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } .mz-zoom-window.mz-preview.mz-deactivating, .mz-zoom-window.mz-custom.mz-deactivating { -webkit-transition-duration: .2s; transition-duration: .2s; } .mz-zoom-window.mz-p-preview, .mz-zoom-window.mz-p-custom { opacity: 0; } /** * Hint & Loading */ .mz-hint, .mz-loading { color: #eee; background: rgba(49,51,61,0.7); font: normal 12px/1.2em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif; text-decoration: none; text-align: center; direction: ltr; display: inline-block; margin: 0; position: absolute; z-index: 1000; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .mz-hint { bottom: 8px; left: 0; right: 0; padding: 0 10%; background-color: transparent; -webkit-transition: opacity 0.25s ease, z-index 0.25s ease; transition: opacity 0.25s ease, z-index 0.25s ease; } .mz-hint-message { display: inline-block; background: rgba(49,51,61,0.7); border-radius: 2em; padding: .7em 1.1em; } .mz-hint-message:before { content: '\02295'; font-family: serif; font-size: 1.5em; speak: none; text-align: center; vertical-align: -2px; margin-right: 6px; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .mobile-magic .mz-hint-message:before { display: none; } .mz-hint-hidden { opacity: 0; z-index: -1; -webkit-transition-delay: .6s; transition-delay: .6s; } /* Hint in the expanded view on mobile */ .mz-expand .mz-hint { font-size: 18px; line-height: 1.1em; top: 50%; bottom: auto; margin: 0; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); } .mz-expand .mz-hint-message { padding: 1.1em; } .mz-expand .mz-hint-message:before { display: none; } .mz-expand .mz-hint-hidden { -webkit-transition-delay: 1s; transition-delay: 1s; opacity: 0; } /* Loading indicator */ .mz-loading { font-size: 0; border-radius: 100%; opacity: 0; padding: 0; width: 36px; height: 36px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .mz-loading:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 24px; height: 24px; margin: auto; text-indent: -9999em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 1); border-top-color: transparent; box-sizing: border-box; } .mz-loading.shown { opacity: 1; z-index: 1; -webkit-transition: opacity 0s; transition: opacity 0s; } .mz-loading.shown:after { -webkit-animation: spin-loading .9s infinite linear; animation: spin-loading .9s infinite linear; } @-webkit-keyframes spin-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .lt-ie10-magic .mz-loading { border-radius: 2em; font-size: 12px; padding: .7em 1.1em; width: auto; height: auto; } .lt-ie10-magic .mz-loading:after { content: 'Loading...'; text-indent: 0; border: none; position: relative; } .lt-ie9-magic .mz-loading { filter: alpha(opacity=0); right: 0; left: 0; width: 126px; margin: auto; } .lt-ie9-magic .mz-hint-message, .lt-ie9-magic .mz-loading.shown { background: transparent !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c31333D', EndColorStr='#7c31333D'); } .lt-ie9-magic .mz-hint-hidden { filter: alpha(opacity=0); } /** * Expanded view */ .mz-expand, .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > img, .mz-expand .mz-expand-bg > svg, .mz-expand .mz-expand-stage, .mz-expand .mz-expand-stage .mz-image-stage { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > img, .mz-expand .mz-expand-bg > svg { width: auto !important; height: auto !important; } .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > svg { min-width: 100% !important; min-height: 100% !important; } .mz-expand { background-color: rgba(0, 0, 0, 1); text-align: center; vertical-align: middle; display: block; overflow: hidden; z-index: 2100000000; position: fixed; width: auto; height: auto; -webkit-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-overflow-style: none; } /* Expanded view background */ .mz-expand .mz-expand-bg { display: inline-block; max-width: none !important; max-height: none !important; margin: auto; vertical-align: middle; z-index: -100; background-repeat: no-repeat; background-size: cover; -webkit-perspective: 600px; perspective: 600px; -webkit-transform: translate3d(0, 0, 0) scale(10) rotate(0.01deg); transform: translate3d(0, 0 ,0) scale(10) rotate(0.01deg); } :root:not([data-magic-ua=safari]) .mz-expand .mz-expand-bg { filter: url("data:image/svg+xml;utf8,#blur"); -webkit-filter: blur(20px) brightness(60%); filter: blur(20px) brightness(60%); } .mz-expand .mz-expand-bg > img { margin: auto; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } [data-magic-ua=safari] .mz-expand .mz-expand-bg > img { filter: url("data:image/svg+xml;utf8,#blur"); -webkit-filter: blur(20px) brightness(60%); filter: blur(20px) brightness(60%); } .mz-expand .mz-expand-bg > svg { margin: auto; opacity: .6; } [data-magic-ua=edge] .mz-expand .mz-expand-bg, .lt-ie10-magic .mz-expand .mz-expand-bg { display: none !important; } .lt-ie9-magic .mz-expand { background: #1f1f1f; } [data-magic-ua=edge] .mz-expand { background-color: rgba(31, 31, 31, .96); } /** Plain backgrounds: dark-bg, white-bg **/ .mz-expand.plain-bg .mz-expand-bg, .mz-expand.dark-bg .mz-expand-bg, .mz-expand.white-bg .mz-expand-bg { display: none !important; } .mz-expand.dark-bg { background-color: #1f1f1f; background-color: rgba(31, 31, 31, .96); } .mz-expand.white-bg { background-color: #fff; } /* Expanded view stage */ .mz-expand .mz-expand-stage { z-index: 2100000000; padding: 0; } .mz-expand .mz-expand-stage .mz-image-stage { z-index: 50; left: 120px; right: 120px; padding: 20px 0 40px 0; margin: 0; text-align: center; vertical-align: middle; -webkit-perspective: 600px; perspective: 600px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mz-expand .mz-expand-stage.with-thumbs .mz-image-stage { padding-bottom: 120px; } .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage { padding: 0 !important; left: 0; right: 0; } .mz-expand .mz-image-stage > figure:before, .mz-expand .mz-image-stage:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; font-size: 0; line-height: 100%; width: 0; } .mz-expand .mz-image-stage > figure { width: 100%; max-width: 100%; max-height: 100%; padding: 0; margin: 0; display: inline-block; vertical-align: middle; font-size: 0; line-height: 100%; position: relative; } .mz-expand .mz-figure { overflow: visible; max-width: 100% !important; } .mz-expand .mz-figure > img { max-width: 100%; width: auto; height: auto; } .mz-expand .mz-zoom-in .mz-image-stage > figure, .mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-activating, .mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active { width: 100%; height: 100%; } .mz-expand .mz-figure { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mz-expand .mz-figure.mz-active { cursor: crosshair; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } /* When inner zoom is always shown */ .mz-expand .mz-expand-stage.mz-zoom-in.mz-always-zoom .mz-image-stage > figure > figure > img { z-index: 1; position: absolute !important; top: -5000px !important; bottom: -5000px !important; left: -5000px !important; right: -5000px !important; margin: auto !important; } .lt-ie10-magic .mz-zoom-window.mz-expanded img { filter: alpha(opacity=100); } .lt-ie10-magic .mz-expand .mz-figure.mz-magnifier-zoom { overflow: hidden; filter: alpha(opacity=100); } /* Caption in expanded view */ .mz-expand .mz-caption { color: #fff; text-shadow: 0px 0px 46px #000; padding: 10px 4px; font: normal 10pt/1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: center; width: 100%; position: absolute; left: 0; opacity: 0; } .mz-expand .mz-caption.mz-show { -webkit-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; opacity: 1; } .mz-expand .mz-caption a { color: inherit; cursor: pointer; } .mz-expand.white-bg .mz-caption { color: #555; text-shadow: none; } .lt-ie9-magic .mz-expand .mz-caption { top: 100%; } .mz-expand .mz-zoom-window { box-shadow: none; background: transparent; } .lt-ie9-magic .mz-expand .mz-zoom-window { border: 0; } /* Expanded view on mobile */ .mobile-magic .mz-expand-stage .mz-expand-thumbnails, .mobile-magic .mz-expand-stage .mz-image-stage { left: 0px; right: 0px; } .mobile-magic .mz-expand .mz-expand-stage.with-thumbs { bottom: 0px; } .mobile-magic .mz-expand-stage .mz-image-stage { padding: 0; } .mobile-magic .mz-expand .mz-expand-stage.with-thumbs .mz-image-stage { padding: 5px 0 90px; } .mobile-magic .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage { padding-top: 0; } .mobile-magic .mz-expand .mz-expand-thumbnails { padding: 15px 0; height: 90px; } /** * Buttons & Arrows */ .mz-expand-controls, button.mz-button { margin: 0 !important; padding: 0 !important; outline: 0 !important; } button.mz-button { color: #b4b4b4 !important; font: 900 34px/1 'magictoolbox-thin' !important; cursor: pointer; z-index: 90 !important; background-color: transparent !important; border: 1px solid rgba(180, 180, 180, 0) !important; border-radius: 100% !important; box-shadow: none !important; position: absolute !important; text-transform: none !important; text-align: center; speak: none; -webkit-font-smoothing: antialiased; width: 60px !important; height: 60px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; } button.mz-button:before { display: inline; position: static; color: inherit !important; font: inherit !important; -webkit-font-smoothing: inherit !important; } button.mz-button.mz-button-prev, button.mz-button.mz-button-next { margin: auto 10px !important; top: 0 !important; bottom: 0 !important; overflow: hidden !important; } button.mz-button.mz-button-prev { left: 0 !important; } button.mz-button.mz-button-next { right: 0 !important; } button.mz-button.mz-button-close { font-size: 26px !important; margin: 10px !important; top: 0 !important; right: 0 !important; z-index: 95 !important; } :root:not(.mobile-magic) button.mz-button { color: rgba(180, 180, 180, .75) !important; -webkit-transform: scale(.85) !important; transform: scale(.85) !important; -webkit-transition: color .25s, border-color .25s, -webkit-transform .25s !important; transition: color .25s, border-color .25s, transform .25s !important; } :root:not(.mobile-magic) button.mz-button:hover { color: rgba(180, 180, 180, 1) !important; border-color: rgba(180, 180, 180, .6) !important; -webkit-transform: scale(1) !important; transform: scale(1) !important; } .mobile-magic button.mz-button { -webkit-transition: -webkit-transform .1s !important; transition: transform .1s !important; } .mobile-magic button.mz-button:active { border-color: rgba(180, 180, 180, .6) !important; -webkit-transform: scale(.95) !important; transform: scale(.95) !important; } button.mz-button.mz-button-close:before { content: "\a001"; } button.mz-button.mz-button-prev:before { content: "\a002"; } button.mz-button.mz-button-next:before { content: "\a003"; } @media screen and (max-device-width: 767px) { button.mz-button-prev, button.mz-button-next { display: none !important; } .mobile-magic .mz-expand button.mz-button { width: 44px !important; height: 44px !important; font-size: 18px !important; color: rgba(255, 255, 255, 0.8) !important; background-color: rgba(49,51,61,0.3) !important; border-color: transparent !important; } } .lt-ie9-magic button.mz-button { border: 0; filter: alpha(opacity=75); } .lt-ie9-magic button.mz-button:hover { filter: alpha(opacity=100); } /** * Thumbnails */ /* Thumbnails on the page */ /* a[data-zoom-id], .mz-thumb, .mz-thumb:focus { display: inline-block; line-height: 0; outline: none; } */ a[data-zoom-id] img, .mz-thumb img { border: 0; box-shadow: 0 0 1px 0px rgba(0,0,0,0.3); box-sizing: border-box; } .mz-thumb:hover:not(.mz-thumb-selected) img { -webkit-filter: brightness(75%); filter: brightness(75%); } .mz-thumb-selected img { -webkit-filter: brightness(60%); filter: brightness(60%); } .no-cssfilters-magic .mz-thumb:hover, .no-cssfilters-magic .mz-thumb.mz-thumb-selected { background: #000; } .no-cssfilters-magic .mz-thumb:hover:not(.mz-thumb-selected) img { opacity: .75; filter: alpha(opacity=75); } .no-cssfilters-magic .mz-thumb-selected img { opacity: .6; filter: alpha(opacity=60); } .ie9-magic .mz-thumb img { box-shadow: 0 0 4px 0px rgba(0,0,0,0.3); } /* Thumbnails in expanded view */ .mz-expand-thumbnails { z-index: 50; position: absolute; bottom: 0; left: 65px; right: 65px; height: 80px; padding: 10px 0; box-sizing: border-box; } .mz-expand-thumbnails .magic-thumbs .magic-thumb { padding: 10px 2px; } .mz-expand-thumbnails .magic-thumb > img { cursor: pointer; height: 40px; box-shadow:0 0 5px 1px rgba(0,0,0,0.3); } .mz-expand-thumbnails .magic-thumb:not(.magic-thumb-selected) > img:hover { -webkit-filter: brightness(70%); filter: brightness(70%); } .mz-expand-thumbnails .magic-thumb-selected img { -webkit-filter: brightness(50%); filter: brightness(50%); } .mz-expand-thumbnails .magic-thumbs .magic-thumbs-button { box-shadow: none; } .mz-expand-thumbnails .magic-thumbs .magic-thumbs-button-disabled { opacity: 0; } .no-cssfilters-magic .mz-expand-thumbnails .magic-thumb:hover:not(.magic-thumb-selected) img { opacity: .7; filter: alpha(opacity=70); } .no-cssfilters-magic .mz-expand-thumbnails .magic-thumb-selected img { opacity: .5; filter: alpha(opacity=50); } /** Hide thumbnails in expanded view with .no-expand-thumbnails class **/ .mz-expand.no-expand-thumbnails .mz-expand-stage.with-thumbs .mz-image-stage { padding-bottom: 40px; } .mz-expand.no-expand-thumbnails .mz-expand-thumbnails { display: none; } .mobile-magic .mz-expand.no-expand-thumbnails .mz-expand-stage.with-thumbs .mz-image-stage { padding: 0; } .magic-thumbs, .magic-thumbs .magic-thumbs-wrapper, .magic-thumbs ul, .magic-thumbs li, .magic-thumbs li:before, .magic-thumbs li:after, .magic-thumbs li img, .magic-thumbs .magic-thumbs-button { margin: 0; padding: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .magic-thumbs { direction: ltr; overflow: visible; z-index: 100; position: relative; left: 0; top: 0; padding: 0 30px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -ms-touch-action: none; touch-action: none; } .magic-thumbs { width: 100%; height: 100%; white-space: nowrap; } .magic-thumbs.no-buttons { padding: 0 !important; } .magic-thumbs-wrapper { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; } .magic-thumbs ul { list-style: none; font-size: 0; display: inline-block; vertical-align: middle; height: 100%; position: relative; white-space: nowrap; } .magic-thumbs.no-buttons ul { left: 0 !important; padding: 0 !important; -webkit-transition: none !important; transition: none !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .magic-thumbs ul li { margin: 0 4px; height: 100%; width: auto; vertical-align: top; line-height: 0; display: inline-block; } .magic-thumbs ul li:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; } .magic-thumbs ul li > img { width: auto; height: auto; max-width: none !important; max-height: 100% !important; vertical-align: middle; } .ie8-magic .magic-thumbs ul li > img { max-width: none !important; max-height: none !important; } /* vertical */ .magic-thumbs.magic-thumbs-vertical { height: 100%; } .magic-thumbs-vertical { padding: 30px 0; } .magic-thumbs-vertical ul { height: auto; width: 100%; white-space: normal; } .magic-thumbs-vertical ul li { width: 100%; height: auto; } .magic-thumbs-vertical ul li { margin: 4px 0; } .magic-thumbs-vertical ul li > img { max-width: 100% !important; max-height: none !important; } .ie8-magic .magic-thumbs-vertical ul li > img { width: 100%; } /** * Buttons */ .magic-thumbs button.magic-thumbs-button { color: #b4b4b4 !important; font: 900 24px/1 'magictoolbox-thin' !important; cursor: pointer; z-index: 90 !important; background-repeat: no-repeat; background-color: transparent !important; background-image: none; border: 0; border-radius: 0; box-shadow: none !important; overflow: hidden; position: absolute; text-transform: none !important; speak: none; text-align: center; -webkit-font-smoothing: antialiased; width: 30px; height: 100%; top: 0; bottom: 0; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; } .magic-thumbs button.magic-thumbs-button:before { display: inline; position: static; color: inherit !important; font: inherit !important; -webkit-font-smoothing: inherit !important; } .magic-thumbs .magic-thumbs-button-prev { left: 0; } .magic-thumbs .magic-thumbs-button-next { right: 0; } .magic-thumbs .magic-thumbs-button-prev:before { content: "\a002"; } .magic-thumbs .magic-thumbs-button-next:before { content: "\a003"; } :root:not(.mobile-magic) .magic-thumbs button.magic-thumbs-button { color: rgba(180, 180, 180, .75) !important; -webkit-transform: scale(.85) !important; transform: scale(.85) !important; -webkit-transition: color .25s, -webkit-transform .25s !important; transition: color .25s, transform .25s !important; } :root:not(.mobile-magic) .magic-thumbs button.magic-thumbs-button:hover { color: rgba(180, 180, 180, 1) !important; -webkit-transform: scale(1) !important; transform: scale(1) !important; } /* Vertical buttons */ .magic-thumbs-vertical .magic-thumbs-button { width: 100%; height: 30px; left: 0; right: 0; top: auto; bottom: auto; } .magic-thumbs-vertical .magic-thumbs-button-prev { top: 0; } .magic-thumbs-vertical .magic-thumbs-button-next { bottom: 0; } .magic-thumbs-vertical .magic-thumbs-button-prev:before { content: "\a005"; } .magic-thumbs-vertical .magic-thumbs-button-next:before { content: "\a004"; } .magic-thumbs.no-buttons .magic-thumbs-button { display: none !important; } .magic-thumbs-button-disabled { opacity: 0.2; filter: alpha(opacity = 20); } /* =============== ToolTip Class =============== */ .descTooltip{ position: relative; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; display:block; padding:0; margin:0; } .descTooltip:after{ background: #000; background: rgba(0,0,0,.8); border-radius: 6px; top: -30px; color: #fff; content: attr(data-desc); left: -9999px; white-space:nowrap; min-width:20px; padding: 0 5px; margin:0; position: absolute; z-index: 9930; border:1px solid #fff; box-shadow:0 0 10px #000; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; opacity:0; text-align:center; min-width:50px; } .descTooltip:before{ border: solid; border-color: #FFF transparent; border-width: 8px 8px 0 8px; top: -10px; content: ""; margin:0; padding:0; left: -9999px; position: absolute; z-index: 9940; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; opacity:0; } .descTooltip:hover:after{ left: -8px; opacity:100; } .descTooltip:hover:before{ left: 8px; opacity:100; } .selected .descTooltip:after, .selected .descTooltip:before{ display:none; } /* FDM4 Decorator Styles */ #fdm4Decorator { z-index:100; width:96%; /*height:720px;*/ padding:10px; position:absolute; top:70px; margin: 0 auto; text-align:center; left: 0; right: 0; background:#DDDDDD; border:1px solid #333; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 55px #333 ; -webkit-box-shadow: 0 0 55px #333 ; box-shadow: 0 0 55px #333 ; -webkit-transition: opacity 0.7s; transition: opacity 0.7s; opacity:1; } #fdm4Decorator.offScreen{ left:-9999px; display:block; opacity:0.01; } #fdm4DecoratorIframe{ width:100%; height:680px; border: 1px solid #999; } .decorateLineBtn{ text-align:center; position:relative; top:8px; } a.decoratorClose, a.decoratorClose:active,a.decoratorClose:link, a.decoratorClose:hover, a.decoratorClose:visited{ position:absolute; right:-13px; top:-13px; background:#fff; color: #4d4d4d; border:2px solid #333; border-radius:15px; display:block; width:25px; height:25px; text-align:center; line-height:20px; font-size:28px; /*box-shadow: 1px 1px 2px #000; */ text-decoration:none; } a.decoratorClose:hover { color: #b2151b; } #wishlistAddStub{ min-width:200px; min-height:100px; padding:10px; background:#FAFAFA; border:1px solid #DDD; border-radius:6px; box-shadow:0 0 10px #000; position:absolute; display:none; z-index:15; } #wishlistAddStub.showWishlistAdd{ display:block; } .featTypeDesc{ font-weight:bold; } /* Item Notification */ .itemNotifyBtn i { font-size: 24px; color: #888; } .itemNotifyBtn.selected i { color: #6a975d; } prodReviews{ } .reviewDetail{ } .reviewRating{ } .reviewTitle{ font-weight: bold; } .reviewDate{ } .reviewBy{ margin: 5px 0px; } .reviewBy span { padding-left: 3px; } .prodReviewForm{ } .starFull{ display:inline-block; width:20px; height:20px; background: url('../img/starFullSm.png') no-repeat top center; } .starHalf{ display:inline-block; width:20px; height:20px; background: url('../img/starHalfSm.png') no-repeat top center; } .starEmpty{ display:inline-block; width:20px; height:20px; background: url('../img/starEmptySm.png') no-repeat top center; } .helpfulOuter { margin-bottom: 5px; } .helpfulOuter a { font-size: 20px; padding: 2px 9px; border-radius: 20px; } .verifiedPurchase{display:inline-block;height:20px;margin-left:100px} .verifiedPurchase i {color:#5cb85c;font-size:20px;} .reviewAverage{ padding-top:15px; } .reviewAverageTxt{margin-left:5px; position:relative; top:-5px; } /*v 013400 v*/ .compDetail { padding-top:10px; } @media (min-width: 768px) { .compDetail:first-child { padding-left:0px; } .compDetail .thumbnail:first-child { margin-left:0px; } } .compDetail .thumbnail { min-height: 225px; max-width: 225px; margin-left: auto; margin-right: auto; } .compDetailRegPriceStrike { text-decoration: line-through; float: right; } .compDetailSalePriceOuter { float: left; color: red; } /*^ 013400 ^*/ /* Color Swatch overrides .colorOuter{ border:0; padding:0; margin:1px; width:65px; height:50px; } .colorOuter a{ font-size:10px; line-height:1; font-weight:normal; box-shadow: 1px 1px 1px #ddd; } .colorOuter a:hover, .colorOuter a:focus{ color:inherit; } .colorInner{ margin:0; padding:0; width:65px; height:50px; } .colorText{ position:absolute; top:2px;left:2px; width:61px; word-wrap:break-word; } img.colorSwatch{ width:100%; height:100%; } .colorOuter.OOS .colorInnerWrap:after{ margin: -15px 0 0 -11px; } */ .prodTitle{ color:#444; margin: 10px 0 15px 0; line-height: 1.4; font-weight:bold; } .txtLight .onSwatchText{ text-shadow:0 1px 1px #000; } .txtDark .onSwatchText{ text-shadow:0 1px 1px #fff; } .sizeSelection .sizeComma:last-child{ display:none; } .colorWarning{ font-size:8pt; color:#901; line-height:2.5; font-weight:bold; } .prodStyleCode{ text-transform:uppercase; } .compDetail a{ width:100%; max-width: 180px; display: inline-block; } .compDetail a img{ max-width:100%; } .quickorderTop{ margin:0 15px; } /* ================== Quickorder ======================= */ .links-icons { width:100px; } .notify-icon { font-size:20px; color:silver; cursor:pointer; padding:5px; } .product-count .notify-icon { font-size:14px; padding:0px; } .selected { color:green; } .product-count { font-weight:bold; } .qtyOrdered { background-color:#d9f3d9; } .noQty { color:blue !important; } .orderGrid{ width:100%; } .orderGrid td{ text-align:center; line-height:1.5; } .orderGrid th{ text-align:center; } .orderGrid thead tr th{ border-right: 1px solid #999; } .orderGrid tr{ border:1px solid #999; text-shadow:0 1px 0 #fff; background: #ffffff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); } .orderGrid .qoDesc{ border-right:1px solid #999; background:#fff; text-align:left; /*box-shadow: 0 0 0 2px #FFFFFF inset;*/ } .qoGridItem,.qoNotify,.qoPrepack { border-right: 1px solid #999; } .qoRegPrice{ display:inline; } .qoSalePrice{ display:block; color:red;} .qoPriceStrike{ text-decoration: line-through; } .txtLight{ color:#fff; font-weight:bold; text-shadow:none; /*text-shadow:0 1px 0 #222;*/ } .txtDark{ color:#000; font-weight:bold; text-shadow:none; /*text-shadow:0 -1px 0 #EEE;*/ } .stockLabel, .expStockLabel, .eachLabel{ font-weight:normal; text-shadow:none; text-align:right; margin-right:6px; /*font-style: italic;*/ opacity:0.6; } .stockLabel, .expStockLabel{ cursor: pointer; text-decoration:underline; } .gridSwatch{ border: 1px solid #fff; box-shadow: 0 0 1px #000; width:40px; height:40px; } /* =============== Quickorder Sale Expiry ToolTip Class =============== */ .qoSaleExpTooltip{ position: relative; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; display:block; padding:0; margin:0; } .qoSaleExpTooltip:after{ background: #000; background: rgba(0,0,0,.8); border-radius: 6px; top: -30px; color: #fff; content: attr(data-sale_expiry); left: -9999px; white-space:nowrap; min-width:20px; padding: 0 5px; margin:0; position: absolute; z-index: 9930; border:1px solid #fff; box-shadow:0 0 10px #000; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; opacity:0; } .qoSaleExpTooltip:before{ border: solid; border-color: #FFF transparent; border-width: 8px 8px 0 8px; top: -9px; content: ""; margin:0 0 0 35%; padding:0; left: -9999px; position: absolute; z-index: 9940; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; opacity:0; } .qoSaleExpTooltip:hover:after{ left: -1px; opacity:45; } .qoSaleExpTooltip:hover:before{ left: 12px; opacity:45; } /*===================================================*/ /* Backorder Overlay */ /*===================================================*/ .backorderDialog{ position:absolute; display:none; background:#fff; border:1px solid #ccc; border-radius:6px; padding:6px; z-index: 9900; /* must be higher z-index than overlay (9800) */ text-align:center; box-shadow: 0 0 50px #000000; } .backorderTitle{ text-align:center; margin: -6px -6px 0 -6px; padding:0 6px; } .boMessage{ font-weight:bold; padding: 10px 0 6px 0; } .backorderDialog li{ list-style:none; } .boChoiceTable{ margin:0 auto; } .boChoiceTable td, .boChoiceTable th{ padding: 0 5px; } .boOptList{ text-align:left; width:100%; margin:0 auto 8px auto; background:#F6F6F6; padding: 5px; } .boChoiceTable th:first-child, .boChoiceTable td:first-child{ text-align:left; } .boChoiceTable{ border: 1px solid #EEE; margin-bottom:8px; text-shadow: 0 1px 0 #FFF; } .boChoiceTable th{ border-right:1px solid #EEE; border-left:1px solid #EEE; margin: 0 -1px; font-variant:small-caps; background: #F0F0F0; } .boChoiceTable thead{ border-bottom: 1px solid #EEE; } .boChoiceTable tr:nth-child(even){ background:#F3F3F3; } .boChoiceTable tr:nth-child(odd){ background:#F9F9F9; } /* Item Notification */ .qoNotifyBtn i { font-size: 24px; color: #888; } .qoNotifyBtn.selected i { color: #6a975d; } /* Prepack Dialog */ .fdm4DecoratorTitle{ font-size: 20px; font-weight: bold; font-style: italic; } .btn-decorate{ position:relative; } .btn-decorate img{ position:absolute; top:-14px; left:3px; } /* FDM4 Decorator Styles */ #fdm4Decorator { z-index:100; width:96%; /*height:720px;*/ padding:10px; position:absolute; top:70px; margin: 0 auto; text-align:center; left: 0; right: 0; background:#DDDDDD; border:1px solid #333; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 55px #333 ; -webkit-box-shadow: 0 0 55px #333 ; box-shadow: 0 0 55px #333 ; -webkit-transition: opacity 0.7s; transition: opacity 0.7s; opacity:1; } #fdm4Decorator.offScreen{ left:-9999px; display:block; opacity:0.01; } #fdm4DecoratorIframe{ width:100%; height:680px; border: 1px solid #999; } .decorateLineBtn{ text-align:center; position:relative; top:8px; } a.decoratorClose, a.decoratorClose:active,a.decoratorClose:link, a.decoratorClose:hover, a.decoratorClose:visited{ position:absolute; right:-13px; top:-13px; background:#fff; color: #4d4d4d; border:2px solid #333; border-radius:15px; display:block; width:25px; height:25px; text-align:center; line-height:20px; font-size:28px; /*box-shadow: 1px 1px 2px #000; */ text-decoration:none; } a.decoratorClose:hover { color: #b2151b; } #applyDesignDialog{ z-index: 9999; display: none; position: absolute; width: 980px; background-color : #ffffff; top: 125px; border: 1px solid #666; border-radius: 6px; box-shadow: 0 0 75px #000; box-sizing: border-box; } #applyDesignDialog div{ box-sizing: border-box; } #applyDesignTitle{ font-size:16px; font-weight:bold; background:#eee; border-bottom:1px solid #999; text-align:center; line-height:28px; border-radius: 6px 6px 0 0; margin-bottom:10px; position:relative; } #applyDesignForm{ display:none; } .designPreview{ width:175px; float:left; border:2px solid #CCC; margin:10px; border-radius:6px; cursor:pointer; } .designPreview.selected{ border-color: #00d6c9; box-shadow:0 0 10px #00d6c9;; } .designTitle{ text-align:center; font-size:12px; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; } .designLocPreview{ float:left; position:relative; } .designLocPreview.selected{ /*font-weight:bold;*/ text-decoration:underline; border-radius:4px; } .designLocPreview.selected::before{ content:''; width:100%; height:100%; position:absolute; box-shadow:inset 0 0 6px 0 #999; border-radius: 4px; } .designPreview.selected .designLocPreview.selected::before{ box-shadow:inset 0 0 6px 0 #00d6c9; } .designLocTitle{ text-align:center; font-size:11px; } .designImg, .designPreview img{ width:100%; height:auto; display:block;} #decMsgArea{ text-align:center; margin: 8px 0.5%; } #decMsgArea .decMsgSuccess, #decMsgArea .decMsgError { border-radius:6px; padding:6px; } #decMsgArea .decMsgSuccess{ color: #3c763d; background-color: #dff0d8; background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc)); background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0); background-repeat: repeat-x; border:1px solid #b2dba1; } #decMsgArea .decMsgError{ color: #a94442; background-color: #f2dede; background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3)); background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); background-repeat: repeat-x; border:1px solid #dca7a7; } .designOverlay{ background: #000; opacity: 0; position: absolute; z-index: 99; border-radius:6px; } #applyDesignGrid{ width:99%; margin:5px 0.5%; background-color:#999; border-spacing:1px; border-collapse:separate; border-radius:6px; text-align:center; border:1px solid #999; font-size:14px; } table#applyDesignGrid tbody tr:last-child td:first-child { border-radius: 0 0 0 5px; } table#applyDesignGrid tbody tr:last-child td:last-child { border-radius: 0 0 5px 0; } #applyDesignGrid .laGridRow_even{ background: #EEE; /* background: -moz-linear-gradient(top, #dddddd 0%, #cccccc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#cccccc)); background: -webkit-linear-gradient(top, #dddddd 0%,#cccccc 100%); background: -o-linear-gradient(top, #dddddd 0%,#cccccc 100%); background: linear-gradient(to bottom, #dddddd 0%,#cccccc 100%); */ } #applyDesignGrid .laGridRow_odd{ background: #F9F9F9; /* background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fafafa)); background: -webkit-linear-gradient(top, #ffffff 0%,#fafafa 100%); background: -o-linear-gradient(top, #ffffff 0%,#fafafa 100%); background: linear-gradient(to bottom, #ffffff 0%,#fafafa 100%); */ } #applyDesignGrid .swatchborder{ margin: 0 auto 4px auto; border-radius:5px !important; } #applyDesignGrid th{ font-size: 14px; text-shadow: 0 -1px 0 #000; color:#fff; min-width:60px; } .laGridWhse{ text-align:left; margin-left:10px; } .laGridLabel{ text-align:right; font-size: 11px; line-height:18px; font-weight: normal; text-decoration: none; font-style: italic; opacity:0.6; margin-right:10px; } .la_avail, .la_ordered{ font-size:12px; line-height:18px;} .la_design_input{ width:50px; text-align:center; } .laGridColor{ text-align:center; font-weight:bold; } .laGridCell{ text-align:center; } .laGridButtonRow{ width:99%; margin: 8px 0.5%; border:1px solid #AAA; background:#EEE; border-radius:6px; } .laGridButtonRow .fdm4Button{ float:right; } .laGridButtonRow .fdm4Button a{ margin:3px; } .laSelectedDesign{ float:left; margin-left:5px; line-height:35px} .laSelectedDesign label{ font-weight:bold; margin-right:5px; } .unapplied{ box-shadow:inset 0 0 10px -3px #00d6c9; } /***^^ 010003 ^^***/ /* For design selection slider */ .designArrow{ position:absolute; display:table-cell; vertical-align:middle; text-align:center; height:100%; width:25px; z-index:10; opacity:0.7; cursor:pointer; } .designArrow img{ margin-top:130px; padding:2px; border:2px solid #333; border-radius:20px; background:#fff; } #applyDesignDialog .arrowOn{ opacity:1; } #applyDesignDialog .arrowOn img{ box-shadow:0 0 15px #EEE; } #selDesignLeft { left:5px; display:none; } #selDesignRight{ right:5px; display:none; } #selectDesign{ overflow:hidden; position:relative } #selectDesignInner{ position:absolute; left:0;} .designLocTitle{ width: 100%; text-align:center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .designInstruct{ margin-left: 10px; } .designInstruct span{ border-bottom:1px solid #ccc; padding-bottom:3px; } #applyDesignTitle .decoratorClose{ font-weight:normal; width:24px; height:24px; top:-13px; right:-13px; } /* loading msg on top of overlay */ #loadingDesign{ position:absolute; border:1px solid #000; border-radius:25px; background:rgba(0,0,0,0.5); width:325px; z-index:9801; text-align:center; box-shadow: inset 0 0 100px -25px #000; padding:25px; } #loadingDesignMsg{ color:#F6F6F6; text-shadow:0 0 15px #000; } .submitDecoRemoved{ color:#900; display:block; text-align:center; } .swatchborder{ border: 1px solid #000; width:45px; height:45px; border-radius:5px; } div.swatchborder img{ border:1px solid #fff; width:43px; height:43px; border-radius:5px; } table.swatchborder{ width:45px; height:45px; border-collapse: separate; } table.swatchborder td.swatchborder { border-color: #FFF; border-radius:5px; } .qoDecImage{ cursor: pointer; margin-right:2px; } .laGridBtns{ float:right; margin:3px 5px 0 0; } .laGridBtns .btn{ margin: 0 3px; } .applySizeCol{ text-align:center; } .gridLegend{ margin:0; padding:0; } .gridLegend li{ float:left; list-style:none; margin:0; padding: 0 15px 0 0; } #orderGridLoading img { width:80px; } .gridInput { padding: 0px 3px; } .gridOOS .qoGridItem { vertical-align: text-top; } /* Responsive Redesign Styling */ /* limited Flex classes from bootstrap 4 .... use with caution if at all ... */ .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } .flex-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .flex-last { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .flex-unordered { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .flex-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-between, .login-page-checkout .nav-tabs { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } @media (min-width: 375px) { .flex-sm-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .flex-sm-last { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .flex-sm-unordered { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .flex-sm-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-sm-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-sm-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-sm-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-sm-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-sm-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-sm-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-sm-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-sm-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-sm-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-sm-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-sm-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-sm-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-sm-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-sm-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-sm-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-sm-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-sm-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-sm-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-sm-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-sm-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-sm-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-sm-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-sm-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-sm-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-sm-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-sm-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-sm-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } } @media (min-width: 768px) { .flex-md-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .flex-md-last { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .flex-md-unordered { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .flex-md-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-md-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-md-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-md-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-md-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-md-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-md-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-md-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-md-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-md-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-md-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-md-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-md-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-md-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-md-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-md-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-md-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-md-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-md-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-md-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-md-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-md-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-md-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-md-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-md-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-md-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-md-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-md-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-md-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } } @media (min-width: 1024px) { .flex-lg-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .flex-lg-last { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .flex-lg-unordered { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .flex-lg-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-lg-column, .tab-collapse-inner .nav-pills { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-lg-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-lg-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-lg-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-lg-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-lg-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-lg-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-lg-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-lg-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-lg-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-lg-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-lg-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-lg-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-lg-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-lg-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-lg-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-lg-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-lg-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-lg-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-lg-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-lg-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-lg-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-lg-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-lg-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-lg-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-lg-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-lg-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } } @media (min-width: 1440px) { .flex-xl-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .flex-xl-last { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .flex-xl-unordered { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .flex-xl-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-xl-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-xl-row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-xl-column-reverse { -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-xl-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-xl-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .justify-content-xl-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-xl-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-xl-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-xl-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-xl-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-xl-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-xl-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-xl-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .align-items-xl-baseline { -webkit-box-align: baseline !important; -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-xl-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-xl-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-xl-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-xl-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-xl-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-xl-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-xl-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-xl-auto { -ms-flex-item-align: auto !important; -ms-grid-row-align: auto !important; align-self: auto !important; } .align-self-xl-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-xl-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-xl-center { -ms-flex-item-align: center !important; -ms-grid-row-align: center !important; align-self: center !important; } .align-self-xl-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-xl-stretch { -ms-flex-item-align: stretch !important; -ms-grid-row-align: stretch !important; align-self: stretch !important; } } /* END Flex columns */ .product-content .product-input { margin-bottom: 5px; } .product-content .product-input .form-control { text-align: center; color: #000; font-size: 16px; padding: 0.6875rem 0.25rem; } .product-content .product-input .form-control::-webkit-input-placeholder { color: #9b9b9b; } .product-content .product-input .form-control:-ms-input-placeholder { color: #9b9b9b; } .product-content .product-input .form-control::placeholder { color: #9b9b9b; } .product-content .product-size, .product-content .product-price { font-size: 15px letter-spacing: 0.5px; text-transform: uppercase; } .product-content .product-count { font-size: 0.8125rem; letter-spacing: 0.5px; color: #4a4a4a; } .product-content .product-stock { font-size: 0.875rem; color: #d0011b; } .product-content .product-elem { text-align: center; } .product-content .product-elem .form-control { display: inline-block; width: 70px; height: 25px; border-color: rgba(0, 0, 0, 0.5); } .product-content .product-elem .form-control:focus { border-color: rgba(0, 0, 0, 0.5); } @media (max-width: 1023px) { .product-content .product-elem .form-control { width: 55px; height: 45px; } } @media (max-width: 767px) { .product-content .product-elem .form-control { width: 64px; height: 54px; } } @media (max-width: 374px) { .product-content .product-elem .form-control { width: 50px; width: 3.125rem; height: 45px; height: 2.8125rem; } } @media (max-width: 767px) { .product-content .product-elem { width: 25%; margin-bottom: 10px; margin-bottom: 0.625rem; } } .product-content .product-elem-stock .product-price { color: #9b9b9b; text-decoration: line-through; } .product-content .product-elem-disabled { pointer-events: none; } .product-content .product-elem-disabled .product-size, .product-content .product-elem-disabled .form-control, .product-content .product-elem-disabled .product-count, .product-content .product-elem-disabled .product-price { color: #cecece; } .product-content .product-elem-disabled .form-control { color: #cecece; border-color: #cecece; } .product-content .product-elem-disabled .form-control::-webkit-input-placeholder { color: #cecece; } .product-content .product-elem-disabled .form-control:-ms-input-placeholder { color: #cecece; } .product-content .product-elem-disabled .form-control::placeholder { color: #cecece; } .product-content .product-elem-active .product-count { color: #f6a623; } /* .product-item:nth-child(even){ background: #FAFFFF; } .product-item:nth-child(odd){ background: #FFFFFA; } */ .product-item .product-qty, .product-item .prod-whse-cutoff{ font-size: 15px letter-spacing: 1px; } @media (max-width: 767px) { .product-item .product-qty, .product-item .prod-whse-cutoff { margin-bottom: 10px; margin-bottom: 0.625rem; } } /* this uses rem that is calculated based on the html font-size - set appropriatly here ... */ html{ font-size:16px; } .swatch-name{ font-weight:bold;} /* More missing css from bella mockups ... not begining with .product-content ... */ .product-full { margin-bottom: 5px; } .product-full .product-grid-heading .product-grid-action { padding-top: 0; padding-bottom: 0; } @media (min-width: 768px) { .product-full .product-grid-heading { border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 0; } } .product-full .product-head { margin-bottom:10px; } @media (max-width: 767px) { .product-full .product-head { margin-bottom: 0.875rem; -ms-flex-wrap: wrap; flex-wrap: wrap; } .qoGridWhse .product-head{ margin-bottom:0; } .qoGridWhse .product-grid-heading{ padding-bottom:0!important; } } .product-full .product-grid-action { padding: 1rem 0; } @media (max-width: 1023px) { .product-full .product-grid-action { -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: right; } .product-full .product-grid-action > *:not(.btn):not(.banner-about-us-video .link-main):not(.banner-about-us-video .card-hover .card-link):not(.card-hover .banner-about-us-video .card-link):not(.banner-about-us-video .card-cover .card-link):not(.card-cover .banner-about-us-video .card-link):not(.banner-about-us-video .slider-home-inner .slider-link):not(.slider-home-inner .banner-about-us-video .slider-link) { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .product-full .product-grid-action .btn, .product-full .product-grid-action .banner-about-us-video .link-main, .banner-about-us-video .product-full .product-grid-action .link-main, .product-full .product-grid-action .banner-about-us-video .card-hover .card-link, .banner-about-us-video .card-hover .product-full .product-grid-action .card-link, .product-full .product-grid-action .card-hover .banner-about-us-video .card-link, .card-hover .banner-about-us-video .product-full .product-grid-action .card-link, .product-full .product-grid-action .banner-about-us-video .card-cover .card-link, .banner-about-us-video .card-cover .product-full .product-grid-action .card-link, .product-full .product-grid-action .card-cover .banner-about-us-video .card-link, .card-cover .banner-about-us-video .product-full .product-grid-action .card-link, .product-full .product-grid-action .banner-about-us-video .slider-home-inner .slider-link, .banner-about-us-video .slider-home-inner .product-full .product-grid-action .slider-link, .product-full .product-grid-action .slider-home-inner .banner-about-us-video .slider-link, .slider-home-inner .banner-about-us-video .product-full .product-grid-action .slider-link { margin: 0.75rem 0; } } .product-full .product-content { flex: 1 0 auto; -webkit-box-flex: 1; -ms-flex: 1 0 auto; } .product-full .product-item { padding: 5px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin:0 -15px; } .product-full .product-links { padding-left: 2rem; padding-top: 25px; } @media (min-width: 1440px) { .product-full .product-links .btn, .product-full .product-links .banner-about-us-video .link-main, .banner-about-us-video .product-full .product-links .link-main, .product-full .product-links .banner-about-us-video .card-hover .card-link, .banner-about-us-video .card-hover .product-full .product-links .card-link, .product-full .product-links .card-hover .banner-about-us-video .card-link, .card-hover .banner-about-us-video .product-full .product-links .card-link, .product-full .product-links .banner-about-us-video .card-cover .card-link, .banner-about-us-video .card-cover .product-full .product-links .card-link, .product-full .product-links .card-cover .banner-about-us-video .card-link, .card-cover .banner-about-us-video .product-full .product-links .card-link, .product-full .product-links .banner-about-us-video .slider-home-inner .slider-link, .banner-about-us-video .slider-home-inner .product-full .product-links .slider-link, .product-full .product-links .slider-home-inner .banner-about-us-video .slider-link, .slider-home-inner .banner-about-us-video .product-full .product-links .slider-link { min-width: 10.5rem; } } .product-full .swatch-wrapper { font-size: 15px } .product-full .swatch-wrapper .swatch-select { float: left; width: 28px; height: 28px; margin-right: 15px; } .img-select{ width: 28px; height: 28px; } .product-full .swatch-wrapper .swatch-name { display: block; padding-left: 43px; margin-top:4px; } @media (max-width: 1023px) { .product-full .product-links { padding-left: 1rem; } .product-full .product-links .btn, .product-full .product-links .banner-about-us-video .link-main, .banner-about-us-video .product-full .product-links .link-main, .product-full .product-links .banner-about-us-video .card-hover .card-link, .banner-about-us-video .card-hover .product-full .product-links .card-link, .product-full .product-links .card-hover .banner-about-us-video .card-link, .card-hover .banner-about-us-video .product-full .product-links .card-link, .product-full .product-links .banner-about-us-video .card-cover .card-link, .banner-about-us-video .card-cover .product-full .product-links .card-link, .product-full .product-links .card-cover .banner-about-us-video .card-link, .card-cover .banner-about-us-video .product-full .product-links .card-link, .product-full .product-links .banner-about-us-video .slider-home-inner .slider-link, .banner-about-us-video .slider-home-inner .product-full .product-links .slider-link, .product-full .product-links .slider-home-inner .banner-about-us-video .slider-link, .slider-home-inner .banner-about-us-video .product-full .product-links .slider-link { padding-left: 0.5rem; padding-right: 0.5rem; } } @media (max-width: 767px) { .product-full { margin-bottom: 0; } .product-full .product-item { padding: 20px 15px; } .product-full .product-links { padding: 0.75rem 0 0; } .product-full .product-links .btn, .product-full .product-links .banner-about-us-video .link-main, .banner-about-us-video .product-full .product-links .link-main, .product-full .product-links .banner-about-us-video .card-hover .card-link, .banner-about-us-video .card-hover .product-full .product-links .card-link, .product-full .product-links .card-hover .banner-about-us-video .card-link, .card-hover .banner-about-us-video .product-full .product-links .card-link, .product-full .product-links .banner-about-us-video .card-cover .card-link, .banner-about-us-video .card-cover .product-full .product-links .card-link, .product-full .product-links .card-cover .banner-about-us-video .card-link, .card-cover .banner-about-us-video .product-full .product-links .card-link, .product-full .product-links .banner-about-us-video .slider-home-inner .slider-link, .banner-about-us-video .slider-home-inner .product-full .product-links .slider-link, .product-full .product-links .slider-home-inner .banner-about-us-video .slider-link, .slider-home-inner .banner-about-us-video .product-full .product-links .slider-link { max-width: 10rem; margin-left: auto; margin-right: auto; } .product-full .product-grid-action { font-size: 1.125rem; text-align: center; margin-top: 6rem; } .product-full .product-grid-action .btn, .product-full .product-grid-action .banner-about-us-video .link-main, .banner-about-us-video .product-full .product-grid-action .link-main, .product-full .product-grid-action .banner-about-us-video .card-hover .card-link, .banner-about-us-video .card-hover .product-full .product-grid-action .card-link, .product-full .product-grid-action .card-hover .banner-about-us-video .card-link, .card-hover .banner-about-us-video .product-full .product-grid-action .card-link, .product-full .product-grid-action .banner-about-us-video .card-cover .card-link, .banner-about-us-video .card-cover .product-full .product-grid-action .card-link, .product-full .product-grid-action .card-cover .banner-about-us-video .card-link, .card-cover .banner-about-us-video .product-full .product-grid-action .card-link, .product-full .product-grid-action .banner-about-us-video .slider-home-inner .slider-link, .banner-about-us-video .slider-home-inner .product-full .product-grid-action .slider-link, .product-full .product-grid-action .slider-home-inner .banner-about-us-video .slider-link, .slider-home-inner .banner-about-us-video .product-full .product-grid-action .slider-link { margin-top: 1.5rem; padding: 1rem; } .product-full .swatch-wrapper .swatch-select { margin-right: 0.625rem; } .product-full .swatch-wrapper .swatch-name { display: block; padding-left: 2.375rem; } } .program-item .product-links, .program-color-select .product-links, .program-fabric-select .product-links { text-align: right; white-space: nowrap; } .program-item .product-links .link-simple + .link-simple, .program-color-select .product-links .link-simple + .link-simple, .program-fabric-select .product-links .link-simple + .link-simple { margin-left: 1rem; } .qoCell{ text-align:center; } .qoCell::-webkit-inner-spin-button, .qoCell::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .product-sublinks .btn-default{ margin-top:5px; } .product-elem-disabled .qoCell{ background:#FEFEFE; } .image-select{ display:inline-block; vertical-align:middle; height: 28px; width: 28px; } .image-select,.img-select{ border-radius:3px; border:1px solid #ddd; } /* END Responsive Redesign Styling */ /* New Desktop Condensed Look */ .product-grid-heading{ padding:5px 15px 5px 20px; background-color:#F9F9F9; position: -webkit-sticky; position: sticky; top: 0; /* This should match the header height if it is sticky or be 0 - collaped header is slightly smaller... */ z-index:10; display:block; box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.20); border:0; margin:0 -15px; } .qoGridWhse .product-grid-heading .product-links{ padding-top:0; padding-bottom:0; } /* .qoGridWhse .product-grid-heading .product-description{ display:none!important; } */ .qoGridWhse .swatch-wrapper{ margin-bottom:4px; } @media (min-width: 768px) { .qoGridWhse .product-grid-heading{ top: 0px; /* This should match the header height if it is sticky or be 0 */ } .quickorderGrid .swatch-wrapper{ margin-bottom:0; } .quickorderGrid .product-grid-heading .product-description{ display:flex!important;; } .qoGridWhse .product-item .product-price{ display:none; } } @media (min-width: 1024px) { .product-content .product-elem .form-control { width: 70px; height: 25px; padding: 0; } .product-full .product-links{ padding-top:15px; } .quickorderGrid .product-grid-heading .product-elem { width: 70px; } } /* Move warehouse / cutoff to left on large displays */ @media (min-width: 1149px) { .quickorderGrid .product-item, .quickorderGrid .product-grid-heading{ display:flex; flex-direction:row; } .quickorderGrid .product-head{ width:15%; margin-bottom:0; } .quickorderGrid .product-head{ display:block!important; } .quickorderGrid .product-description{ width:85%; } .qoGridColor .swatch-wrapper{ margin-top:17px; } .qoGridColor.product-full .swatch-wrapper .swatch-name{ position:relative; top:4px; } .quickorderGrid .prod-whse-cutoff{ font-size:13px; } } .whseDescHead{ margin-right:auto; font-weight:bold; font-size:14px; color: #444; } .whseCutoffHead{ margin-left:auto; } .alert-modal-success .modal-content{ color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert-modal-danger .modal-content{ color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .product-estArrival { font-size: 8pt; color: blue; } @media (min-width: 768px) { .product-estArrival { font-size: 10px; } } @media (min-width: 1024px) { .product-estArrival { font-size: 8pt; } }