/* CONTENT PAGE *****************************************************/ @media all { #content-container { margin-top: 16px; } #content-container h1 { font-family: "Bold", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 1.4em; text-transform: uppercase; color: #333; margin-bottom: 8px; } #content-container h2 { font-family: "Bold", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 1em; text-transform: uppercase; color: #666; margin-bottom: 8px; } #content-container p { font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; margin-bottom: 8px; font-weight: 500; } #content-container p strong { font-weight: 700; } #content-container ul { margin: 15px; margin-left: 30px; } #content-container ul li { font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; padding: 4px 0; list-style: square; font-weight: 600; } #content-container-wrapper { display: table; width: 100%; } #content-container-left { display: table-cell; width: 49%; background: rgba(0,0,0,0.05); padding: 15px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content-container-middle { display: table-cell; width: 2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content-container-right { display: table-cell; width: 49%; background: rgba(0,0,0,0.05); padding: 15px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*- Contact Us Form -*/ #content-container-left table { width:100%; margin-bottom: 16px;} #content-container-left table tr td { padding: 0px; font-size: 0.8em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 600; padding: 3px 0; color: #fdbc5f; } #content-container-left table tr td label { color: #333; } #content-container-left table tr td:first-child { width: 150px; } #content-container-left table tr td input, #content-container-left table tr td select { padding: 5px; font-size: 1em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #333; width:100%;font-weight: 600; } #content-container-left table tr td a.btn { display: inline-block;vertical-align: bottom; vertical-align: top; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px !important; margin-top: 0px; padding:7px 15px; text-align: center; background: #1d428a; font: 1em "Bold", Tahoma, Arial, sans-serif; text-transform: uppercase; color: #fff; font-weight: 700; margin-left: 150px; } #content-container-left table tr td a.btn:hover { background: #1d237a; } /*- Manage Account Page -*/ #content-container #content-container-left h2 { margin-bottom: 10px; } #content-container #content-container-left ul.account-links + h2 { margin-bottom: 20px; } #content-container-left .required { text-align: right; width: 100%; color: #c00; padding-bottom: 10px; font: 0.80em "Semibold", Tahoma, Arial, sans-serif; margin-top: -40px; } #content-container-left .control-group { width: 100%; display: block; height: 29px; margin: 3px 0; } #content-container-left .control-group span { width: 35%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #c00; padding-right: 5px; } #content-container-left .control-group .controls { width: 65%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content-container-left .control-group span label { font: 0.8em "Semibold", Tahoma, Arial, sans-serif; padding-top: 5px; color: #333;} #content-container-left .control-group .controls input, #content-container-left .control-group .controls select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #666; font: 0.8em "Semibold", Tahoma, Arial, sans-serif; padding: 5px 8px; border: 1px solid #d7d7d7; } #content-container-left .control-group a.btn { display: inline-block; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px !important; margin-top: 0px; padding: 5px 15px; padding-bottom: 7px; text-align: center; background: #1d428a; font: 0.9em "Bold", Tahoma, Arial, sans-serif; text-transform: uppercase; color: #fff; font-weight: 700; margin-top: 5px; } #content-container-left .control-group a.btn:hover { background: #1d237a; } #content-container #content-container-left ul.account-links { margin-top: 0px; margin-bottom: 20px; } #content-container #content-container-left ul li { padding: 4px 0; list-style: square; } #content-container #content-container-left ul li a { font: 1em "Semibold", Tahoma, Arial, sans-serif; color: #1d428a; font-weight: 600; padding: 0px; margin: 0px; } #content-container-left .control-group .ajax__validatorcallout_popup_table { width: 250px !important; } #content-container-left .control-group .ajax__validatorcallout_popup_table_row { width: 250px !important; } #content-container-left .control-group .ajax__validatorcallout_callout_cell { width: 250px !important; color: #00000 !mportant; } .control-group span img { height: 14px; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .control-group span img + em { display: none; position: absolute; margin-top: 10px; width: 280px; background: #f4d79d; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0.8em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-style: normal; font-weight: 600; border: 1px solid #ffcc66; } .control-group span img:hover + em { display: block; } #content-container #content-container-right h2 { margin-bottom: 20px; } #content-container-right .required { text-align: right; width: 100%; color: #c00; padding-bottom: 10px; font: 0.80em "Semibold", Tahoma, Arial, sans-serif; margin-top: -40px; } #content-container-right .control-group { width: 100%; display: block; height: 29px; margin: 3px 0; } #content-container-right .control-group span { width: 35%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #c00; } #content-container-right .control-group .controls { width: 65%%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #content-container-right .control-group span label { font: 0.8em "Semibold", Tahoma, Arial, sans-serif; padding-top: 5px; color: #333;} #content-container-right .control-group .controls input, #content-container-right .control-group .controls select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #666; font: 0.8em "Semibold", Tahoma, Arial, sans-serif; padding: 5px 8px; border: 1px solid #d7d7d7; } #content-container-right .control-group a.btn { display: inline-block; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px !important; margin-top: 0px; padding: 5px 15px; padding-bottom: 7px; text-align: center; background: #1d428a; font: 0.9em "Bold", Tahoma, Arial, sans-serif; text-transform: uppercase; color: #fff; font-weight: 700; margin-top: 5px; } #content-container-right .control-group a.btn:hover { background: #1d237a; } #content-container-right .control-group .controls input.total-owing { background: #c00; color: #fff; font-weight: bold; } #content-container p.confirmation-message { display: block; padding-top: 10px; color: #c00;} .contentPage-search-header { padding: 10px 0; padding-bottom: 20px; } .contentPage-search-header p { font: 0.8em "Semibold", Tahoma, Arial, sans-serif; padding-top: 5px; color: #333; } .contentPage-search-header .boldweight { font-family: "Bold", Tahoma, Arial, sans-serif; font-size: 1.3em; padding: 0 3px; } } @media all and (max-width: 650px) { #content-container-middle { display: none; } #content-container-left { display: block; width: 100%; height: auto; } #content-container-right { display: block; width: 100%; } } @media all and (max-width: 450px) { #content-container-left .control-group { min-height: 50px; height: 50px; } #content-container-left .control-group span { width: 100%; display: block; float: none; } #content-container-left .control-group .controls { width: 100%; display: block; float: none; } #content-container-right .control-group { min-height: 50px; height: 50px; } #content-container-right .control-group span { width: 100%; display: block; float: none; } #content-container-right .control-group .controls { width: 100%; display: block; float: none; } #content-container-left table tr td { width: 100%; display: block; } #content-container-left table tr td a.btn { margin-left: 0px; margin-top: 5px; } } /* PRODUCT PAGE *****************************************************/ @media all { #product-container { margin-top: 16px; } #mci-photo { float: right; width: 47%; max-width: 460px; } #mci-photo-main { position: relative; } #mci-photo #img-main { border: 1px solid #d7d7d7; width: 100%; } #zoom {position: absolute; right: 5px; bottom: 5px; width: 22px; } #mci-photo-options { margin-top: 5px; background: #fff; border: 1px solid #d7d7d7; width: 100%; padding: 8px; padding-bottom: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #mci-photo-options img { cursor: pointer; margin-right: 5px; margin-bottom: 5px; width: 83px; } #mci-content { float: right; width: 53%; max-width: 515px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 25px; padding-top: 25px; } #mci-content h1 { font: 1em "Bold", Tahoma, Arial, sans-serif; font-size: 1.4em; text-transform: uppercase; color: #333; margin-bottom: 5px; padding-right: 60px; } #mci-content h1 span { font: 1em "Semibold", Tahoma, Arial, sans-serif; padding-left: 10px; } #mci-content p { font: 0.80em "Semibold", Tahoma, Arial, sans-serif; color: #333;font-weight: 500; margin-bottom: 6px; } #mci-content p strong { font-family: "Bold"; } #mci-social { float: right; margin-top: -25px; } #mci-social li { float: left; padding-left: 5px; } #mci-content table { width:100%; margin-top:16px; margin-bottom: 16px; } #mci-content table thead tr th { font: 0.9em "Semibold", Tahoma, Arial, sans-serif; text-transform: uppercase; background: rgba(0,0,0,0.2); padding: 8px 12px; text-align: left; } #mci-content table thead tr th:first-child { width: 80px;} #mci-content table tbody tr td { padding: 0px; font-size: 0.8em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #333; background: rgba(0,0,0,0.02); border-bottom: 1px solid #fff; vertical-align: top; } #mci-content table tbody tr td:first-child { padding: 0px; padding: 8px 12px; } #mci-content table tbody tr td li { float: left; } #mci-content table tbody tr td li a { font-size: 1em; font-family: "Bold", Tahoma, Arial, sans-serif; color: #333; padding: 8px 12px; min-width: 75px; display: block; height: 32px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #mci-content table tbody tr td li.active a { background: #fabb59; color: #fff; } #mci-price { border: 1px solid #d7d7d7; background: #fff; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 12px; } #mci-price h3 { font: 0.85em "Bold", Tahoma, Arial, sans-serif; color: #333; margin-bottom: 5px; } /*#mci-price h3.hidetext { display: none;}*/ #mci-price h3 span { font: 1em "Semibold", Tahoma, Arial, sans-serif; padding-left: 10px; } /*#mci-price h3 span.first-id { display: none; } */ #mci-price ul li.mci-price-price { float: left; width: 30%; font: 1.5em "Bold", Tahoma, Arial, sans-serif; color: #333; } #mci-price ul li.mci-price-price span { font: 1em "Semibold"; color: #666; text-decoration: line-through; padding-right: 5px; } #mci-price ul li.mci-price-price em { font: 0.6em "Semibold"; color: #333; padding-left: 3px; } #mci-price ul li.mci-price-qty { float: right; width: 70%; min-width: 220px; } #mci-price ul li.mci-price-qty ul { float: right; } #mci-price ul li.mci-price-qty ul li { float: left; } #mci-price ul li.mci-price-qty ul li:first-child { font: 0.9em "Semibold", Tahoma, Arial, sans-serif; text-transform: uppercase; color: #333; padding-right: 15px; padding-top: 6px; } #mci-price ul li.mci-price-qty ul li input { width: 40px; border: 1px solid #d7d7d7; background-color: #ffffff; color: #666; font: 0.85em "Bold", Tahoma, Arial, sans-serif; text-transform: uppercase; padding: 5px 10px; } #mci-price ul li.mci-price-qty ul li.plus-btn input, #mci-price ul li.mci-price-qty ul li.minus-btn input { width: 20px; border: none; cursor: pointer; font: 1.5em "Bold", Tahoma, Arial, sans-serif; color: #333366; padding: 1px 5px; margin-top: -3px; } #mci-price ul li.mci-price-qty ul li.plus-btn { padding-right: 15px; } #mci-price ul li.mci-price-qty ul li a { min-width:110px; display: inline-block;vertical-align: bottom; vertical-align: top; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 36px !important; margin-top: 0px; padding:7px 12px; text-align: center; background: #1d428a; font: 0.85em "Bold", Tahoma, Arial, sans-serif; text-transform: uppercase; color: #fff; font-weight: 700;} #mci-price ul li.mci-price-qty ul li a:hover { background: #1d237a; } .stock-availability { font-size: 0.8em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 600; font-style: italic; color: #0c0; } #mci-price ul li.backordermessage { display: block; float: left; color: #ccc; font-size: 0.8em; font-family: "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; padding: 5px 0; padding-top: 10px; } #mci-price ul li.ordererrormessage { display: block; float: left; font-size: 0.8em; font-family: "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; padding: 3px 0; } #product-listing { margin-top: 40px; } #product-listing h2 { margin-top: 20px; font-family: "Open Sans", Tahoma, Arial, sans-serif; font-weight: 400; font-size: 1.1em; text-transform: uppercase; color: #333; margin-bottom: 8px; } #product-listing h2 span { font-weight: 700; } .mci-price-type { display: none; } #mci-loginalert { } #mci-loginalert h3 { border: 1px solid #d7d7d7; background: #fff; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 12px; text-align: center; font: 0.85em "Semibold", Tahoma, Arial, sans-serif; color: #333; margin-bottom: 5px; } #mci-loginalert h3 a { color: #1d428a; font-family: "Bold"; } } @media all and (max-width: 850px) { #mci-content { float: left; padding-left: 0px; padding-top: 0px; width: 100%; max-width: 100%; padding-bottom: 20px; } #mci-photo { float: left; width: 100%; padding-bottom: 20px; } } @media all and (max-width: 550px) { #mci-price ul li.mci-price-qty { width: 100%; } #mci-price ul li.mci-price-qty ul { float: left; margin-top: 5px; } #mci-social { float: none; margin-top: 0px; display: block; } #mci-social li {padding-left: 0px; padding-right: 5px; padding-bottom: 10px; } } @media all and (max-width: 400px) { #mci-photo-options img { width: 60px; } } /* CATEGORY PAGE *****************************************************/ @media all { /*- Header -*/ #category-header { background: URL("/design/images/templates/bkng-category-header.jpg") no-repeat 50% 50%; margin-bottom: 13px; border: 1px solid #d7d7d7; display: table; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #category-header-content { display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px; padding-top: 10px; padding-right: 10px; } #category-header-content h1 { font: 3em "Cinzel", Tahoma, Arial, sans-serif; color: #333366; line-height: 95% !important; text-transform: uppercase; } #category-header-content p { max-width: 600px; font: 0.80em "Semibold", Tahoma, Arial, sans-serif; color: #333; margin-top: 8px; } #category-header-content p strong { font-family: "Bold"; } #category-header-image { width: 163px; display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: bottom; } #category-header-image img { width: 163px; } /* Filter */ #category-filter { background: rgba(0, 0,0, 0.2); margin-bottom: 13px; width: 100%; max-width: 973px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 8px; } #cf-results { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding-right: 210px; padding-bottom: 0px; } #cf-count { float: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 210px; } #cf-results ul { float: right; } #cf-results ul li { float: left; font-size: 0.8em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #666666; } #cf-results ul li:first-child { padding-right: 8px; text-transform: uppercase; font: 0.80em "Semibold", Tahoma, Arial, sans-serif; padding-top: 11px; } #cf-results li select { font: 1em "Semibold", Tahoma, Arial, sans-serif; padding: 8px; margin-left: 8px; } #cf-count ul { float: right; } #cf-count ul li { float: left; font-size: 0.8em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #666666; } #cf-count ul li:first-child { padding-right: 8px; text-transform: uppercase; font: 0.80em "Semibold", Tahoma, Arial, sans-serif; padding-top: 11px; } #cf-count li select { font: 1em "Semibold", Tahoma, Arial, sans-serif; padding: 8px; margin-left: 8px; } /* Pager */ #listing-pager { margin-top: 5px; } #listing-pager ul { float: right; } #listing-pager ul li { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 0.80em "Semibold", Tahoma, Arial, sans-serif; } #listing-pager ul li.prev, #listing-pager ul li.next { background: #fff; border: 1px solid #d7d7d7; height: 30px; width: 30px; text-align: center; padding-top: 5px; } #listing-pager ul li.pager-text { padding: 5px 10px; } } @media all and (max-width: 600px) { #category-header-content { max-width: 100%; } #category-header-image { display: none; } #cf-results { float: left; padding-right: 0px; display: block; padding-left: 7px; } #cf-count { display: none; } #cf-results li span { display: none; } } /* FORGOTTEN PASSWORD PAGE *****************************************************/ @media all { #container-form-full { background: rgba(0,0,0,0.05); padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container-form-full .control-group { width: 100%; display: block; height: 29px; margin: 3px 0; } #container-form-full .control-group span { width: 30%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fdbc5f; } #container-form-full .control-group .controls { width: 70%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container-form-full .control-group span label { font: 0.8em "Semibold", Tahoma, Arial, sans-serif; padding-top: 5px; color: #333;} #container-form-full .control-group .controls input, #content-container-right .control-group .controls select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #666; font: 0.8em "Semibold", Tahoma, Arial, sans-serif; padding: 5px 8px; border: 1px solid #d7d7d7; } #container-form-full a.btn { margin-left: 30%; display: inline-block; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px !important; margin-top: 0px; padding: 5px 15px; padding-bottom: 7px; text-align: center; background: #1d428a; font: 0.9em "Bold", Tahoma, Arial, sans-serif; text-transform: uppercase; color: #fff; font-weight: 700; margin-top: 5px; } #container-form-full a.btn:hover { background: #1d237a; } #container-form-full p.error-weight { margin-left: 30%; font: 0.8em "Semibold", Tahoma, Arial, sans-serif; color: #c00; padding-top: 10px; } #login-remember-me { margin-left: 30%; margin-top: 10px; } #login-remember-me label { font: 0.8em "Semibold", Tahoma, Arial, sans-serif; padding-left: 5px; } #login-links { margin-left: 30%; margin-top: 10px; } #login-links a { font: 0.8em "Semibold", Tahoma, Arial, sans-serif; color: #1d428a; } } @media all and (max-width: 450px) { #container-form-full .control-group { min-height: 50px; height: 50px; } #container-form-full .control-group span { width: 100%; display: block; float: none; padding-bottom: 5px; } #container-form-full .control-group .controls { width: 100%; display: block; float: none; } #container-form-full a.btn, #container-form-full p.error-weight, #login-remember-me, #login-links { margin-left: 0px; } } /* CHECK OUT PAGE *****************************************************/ @media all { .step-box, .step-box-sml { width: 33.3%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 20px; min-height: 450px; } .step-box-sml { min-height: 350px; } #sbox1 { padding-right: 20px; width: 32.5%; } #sbox2 { padding-right: 20px; padding-left: 20px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; width: 35%; } #sbox3 { padding-left: 20px; width: 32.5%;} .step-box-title h2 { font-family: "Bold", Tahoma, Arial, sans-serif; font-size: 1em; text-transform: uppercase; margin-bottom: 8px; } .step-box-title h2 span { font-family: "Semibold", Tahoma, Arial, sans-serif; font-weight: 400; padding-left: 5px; } .step-box-title p { font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; margin-bottom: 8px; font-weight: 600; } .step-box-confirm table { } .step-box-confirm table td { padding: 2px 0px; font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; margin-bottom: 8px; font-weight: 600; vertical-align: top;} .step-box-confirm table td:first-child { width: 120px; } .step-box a, .step-box-sml a { color: #1d237a; } .step-box-body { padding-top: 20px; } /* Column 1 */ .step-row-form { margin: 0px 0; display: block; clear: both; font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 600; } .step-row-form:after { clear: both; margin-bottom: 2px; } .step-row-form .input-label { float: left; width: 35%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 2px; } .step-row-form label { font: 1em "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 600; padding-top: 4px; } .step-row-form span { color: #fdbc5f; } .step-row-form .input-containers { float: left; width: 65%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 2px; font:1em "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 600; } .step-row-form .input-containers .pickhelpcontainer { margin:-15px 0 0 140px; padding:0; } .step-row-form .input-containers .pickhelpcontainer img.pickup-help { height: 14px; padding-left: 10px; padding-right: 10px; vertical-align: middle; margin-top: -1px; } .step-row-form .input-containers .pickhelpcontainer img.pickup-help + em { display: none; position: absolute; text-align: left; margin-top: 10px; width: 280px; background: #f4d79d; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 1em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-style: normal; font-weight: 600; border: 1px solid #ffcc66; text-transform: none; opacity: 1.0; } .step-row-form .input-containers .pickhelpcontainer img.pickup-help:hover + em { display: block; z-index: 10000; opacity: opacity: 1.0; margin-top:10px; } .step-row-form input, .step-row-form select { padding: 4px; font: 1em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; color: #333; width: 100%; border: 1px solid #d7d7d7;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #deliver .input-containers { padding: 3px; padding-left: 40%; width: 100%; position: relative; padding-bottom: 30px; } #deliver input[type="checkbox"] { width: 20px; position: absolute; margin-left: -20px; } #delivery-wrapper { display: none; padding-bottom: 30px; } /* Column 2 */ .step-box-item { display: block; width: 100%; margin-bottom: 4px; } .sbi-img { width: 25%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sbi-img img { width: 100%; border: 1px solid #d7d7d7; } .sbi-text { width: 75%; display: block; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 3%; } #sbox2 .step-box-body p { font: 0.8em "Open Sans", Tahoma, Arial, sans-serif; } #sbox2 .step-box-body p a { font-weight: 700; } .sbi-text p { font: 0.9em "Open Sans", Tahoma, Arial, sans-serif; } .sbi-text p a { font-weight: 700; display: block; padding-top: 2px; } .sbi-text p:nth-child(2) { margin-bottom: 2px; font-size: 0.8em; } .sbi-text ul { width: 100%; } .sbi-text ul li { float: left; } .sbi-text ul li input { padding: 4px; font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; width: 30px; margin-top: 0px; text-align: center; } .sbi-text ul li:nth-child(1), .sbi-text ul li:nth-child(3) { font: 1.1em "Bold", Tahoma, Arial, sans-serif; font-weight: 800; padding: 0 5px; width: 20px; } .sbi-text ul li:nth-child(4) { font: 0.9em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 800; width: 52%; text-align: right; padding-top: 3px; } .sbi-text ul li:nth-child(5) a { color: #fff; font: 1em "Bold"; background: #8f8f8f; padding: 1px 5px; text-transform: uppercase; margin-left: 8px; margin-top: 2px; } .sbb-item { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 5px; margin-bottom: 2px; text-align: right; font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; color: #333; position: relative; } .sbb-item span { display: inline-block; padding-right: 30px; text-transform: uppercase; font-weight: 800; width: 130px; padding-left: 15px; font-size: 1.2em; } .sbb-item input { display: inline-block; font: 1em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; color: #333; padding: 5px; width: 80px; margin-right: 35px; margin-left: 10px; } .sbb-item img.checkout-help { height: 14px; padding-left: 10px; padding-right: 0; vertical-align: middle; margin-top: -1px; } .sbb-item img.checkout-help + em { display: none; position: absolute; text-align: left; margin-top: 10px; width: 280px; background: #f4d79d; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 1em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-style: normal; font-weight: 600; border: 1px solid #ffcc66; text-transform: none; opacity: 1.0; } .sbb-item img.checkout-help:hover + em { display: block; z-index: 10000; opacity: opacity: 1.0; } .sbb-item .directdeposithelpcontainer { margin:0; padding:0; float:left; margin-left:37px; } .sbb-item .directdeposithelpcontainer img.checkout-help { height: 14px; padding-left: 10px; padding-right: 0; vertical-align: middle; margin-top: -1px; } .sbb-item .directdeposithelpcontainer img.checkout-help + em { display: none; position: absolute; text-align: left; margin-top: 10px; width: 280px; background: #f4d79d; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 1em; font-family: "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-style: normal; font-weight: 600; border: 1px solid #ffcc66; text-transform: none; opacity: 1.0; } .sbb-item .directdeposithelpcontainer img.checkout-help:hover + em { display: block; z-index: 10000; opacity: opacity: 1.0; } .sbb-item .clearboth { clear:both; } .promo-btn {position: absolute; right: 5px; top: 10px; } .grand-total { background: rgba(0,0,0,0.1); margin-bottom: 20px; } .sub-total, .shipping { background: rgba(0,0,0,0.03); } .sub-total { margin-top: 20px; } /* Column 3 */ .co-items-item { display: none; border-top: 1px solid #edd; padding-top: 20px; } .co-items-payment { margin-bottom: 15px; padding-bottom: 15px; } .co-items-payment ul li { padding: 7px 0; } .co-items-payment ul li span { font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; } .co-items-payment ul li img { float: right; margin-top: -7px; } .co-items-payment input.disabled-box { background: none; border: none; float: right; text-align: right; width: 100px; font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; color: #000; padding: 2px 5px; } .step-row-form-payment { margin: 0px 0; display: block; clear: both; } .step-row-form-payment a { font: 0.8em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 700; padding-left: 5px; } .step-row-form-payment p { font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 600; } .step-row-form-payment p a.termsandcondition { font: 0.90em "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 700; text-decoration:underline; padding-left:0; } .step-row-form-payment:after { clear: both; } .step-row-form-payment .input-label { float: left; width: 35%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 2px; } .step-row-form-payment .input-checkboxdelivery { width: 95%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 2px; text-align:left; } .step-row-form-payment .input-processbutton { width: 95%; text-align: center; } .step-row-form-payment textarea { font:0.8em "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 600; } .step-row-form-payment label { font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; font-weight: 600; padding-top: 4px; } .step-row-form-payment span { color: #fdbc5f; } .step-row-form-payment .input-containers-payment { float: left; width: 65%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 2px; } .step-row-form-payment input, .step-row-form-payment select { padding: 4px; font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; color: #333; width: 100%; border: 1px solid #d7d7d7;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .step-row-form-payment input.sml-field, .step-row-form-payment select.sml-field { width: 45%; display: inline-block; } .step-row-form-payment a.btn { display: block;vertical-align: bottom; vertical-align: top; position:relative; margin-top: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px !important; padding: 5px 15px; padding-bottom: 7px; text-align: center; background: #1d428a; font: 1em "Bold", Tahoma, Arial, sans-serif; text-transform: uppercase; color: #fff; font-weight: 700; } .step-row-form-payment a.btn:hover { background: #1d237a; } a.btn-print { display: inline-block;vertical-align: bottom; vertical-align: top; position:relative; margin-top: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px !important; padding: 5px 15px; padding-bottom: 7px; text-align: center; background: #1d428a; font: 1em "Bold", Tahoma, Arial, sans-serif; text-transform: uppercase; color: #fff; font-weight: 700; } a.btn-print:hover { background: #1d237a; } #process-order, #credit-card-choices { clear: both; display: block; border-top: 1px solid #edd; margin-top: 15px; padding-top: 10px; } .step-row-form-payment input[type="checkbox"] { width: 20px; } /* Items Box */ .items-box { margin-top: 30px; } .items-box h2 { font-family: "Bold", Tahoma, Arial, sans-serif; font-size: 1em; text-transform: uppercase; margin-bottom: 8px; } .items-box table { width: 100%; } .items-box thead th { font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; background: rgba(0,0,0,0.1); text-transform: uppercase; padding: 5px 8px; text-align: left; font-weight: 700; } .items-box tbody td { padding: 5px 8px; font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; color: #333; margin-bottom: 8px; font-weight: 600; vertical-align: top;} .items-box tbody td ul li { margin-left: 20px; } .items-box tbody tr.tbl-sub-total td { background: rgba(0,0,0,0.03); border-bottom: 1px solid #fff; } .items-box tbody tr.tbl-sub-total td:first-child { text-align: right; padding-right: 50px; } .items-box tbody tr.tbl-grand-total td { background: rgba(0,0,0,0.1); border-bottom: 1px solid #fff; } .items-box tbody tr.tbl-grand-total td:first-child { text-align: right; padding-right: 50px; } table td .step-box-confirm table td ol { margin: 10px 0px; margin-left: 30px; } table td .step-box-confirm table td ol li { list-style-type:decimal; padding: 3px 0; } table td .step-box-confirm table td ul { margin: 10px; margin-left: 30px; } table td .step-box-confirm table td ul li { list-style-type: square; } } @media all and (max-width: 970px ) { #sbox1, #sbox2, #sbox3 { width:100%; float: none; padding: 0px; border: none; margin-top: 30px; min-height: 100px; } } /* QUICK VIEW */ @media all { #main-container-inner.quick-view { background: #fff; padding: 0px; 10px; } .quick-view #product-container { margin-top: 0px; padding: 10px; position: relative; } #my-custom-close { position: absolute; right: 0px; margin-top: -20px; margin-right: -10px; } } @media all and (max-width: 500px ) { #my-custom-close { display: none; } } /* Blog *******************************************************************************/ @media all { #blog-container-wrapper { display: table; width: 100%; } #blog-container-rhs { display: table-cell; width: 230px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #blog-container-rhs h3 { font-family: "Semibold", Tahoma, Arial, sans-serif; font-size: 1em; } #blog-container-rhs ul { margin: 10px 0; } #blog-container-rhs ul li { font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #blog-container-rhs ul li a { color: #1d428a; } #blog-container, #blog-container-full { text-align: left; font: 0.80em "Open Sans", Tahoma, Arial, sans-serif; font-weight: 600; color: #333; display: table-cell; } #blog-container .blog-article, #blog-container-full .blog-article { display: block; padding: 15px 0; padding-bottom: 20px; border-bottom: 1px solid #ccc; text-align: left; margin-right: 40px; } #blog-container .blog-article { min-height: 130px; } #blog-container-full .blog-article { margin-bottom: 15px; border-bottom: none; } #blog-container .blog-article-right, #blog-container-full .blog-article-right { position: relative;} #blog-container .blog-article-right, #blog-container-full .blog-article-right .bar-header { padding-left: 135px; } .bar-content { display: block; clear: both; } #blog-container .blog-article .blog-article-left img, #blog-container-full .blog-article .blog-article-left img { } #blog-container .blog-article-right .bar-content-image img, #blog-container-full .blog-article-right .bar-content-image img { border: 1px solid #ccc; padding: 1px; } #blog-container .bar-header img, #blog-container-full .bar-header img { display: none; } #blog-container-full .bar-header { min-height: 85px; } #blog-container .bar-header h3, #blog-container-full .bar-header h3 { text-align: left; font-family: "Bold", Tahoma, Arial, sans-serif; font-size: 1.2em; } #blog-container .bar-header h3 a { color: #810052; } #blog-container-full .bar-header h3 { text-transform: none; line-height: 1em; margin-bottom: 0.2em; font-weight: 700; padding-bottom: 5px; } #blog-container .bar-header p, #blog-container-full .bar-header p { padding: 0px; margin-bottom: 7px; font-weight: bold; display: none; } #blog-container .blog-article-right .bar-content-image, #blog-container-full .blog-article-right .bar-content-image { position:absolute; width: 110px; height: 110px; top: 0px; margin-left: -135px; margin-top: -10px; } #blog-container-full .blog-article-right .bar-content-image { margin-left: 0px; } #blog-container .blog-article-right .bar-content-image img, #blog-container-full .blog-article-right .bar-content-image img { border: 1px solid #ddd; padding: 1px; } #blog-container-full a { font: 1em "Bold", Tahoma, Arial, sans-serif; color: #1d428a; } #blog-container-full .bar-content-text-full { margin-top: 40px; } #blog-container-full .bar-content-text-full p.centre-img { text-align: center; margin: 10px; } #blog-container-full .bar-content-text-full p.centre-img img { width: 100%; } #blog-container #bar-content-tags a, #blog-container .bar-header h3 a, #blog-container-full a { font: 1em "Bold", Tahoma, Arial, sans-serif; color: #1d428a; } #blog-container .bar-content-text { margin-top: 5px; } #blog-container-full .bar-content-text-full p { margin-bottom: 10px; } #blog-container #bar-content-tags { margin-top: 0px; margin-bottom: 7px; display: none; } #blog-container-full #bar-content-tags { margin-top: 10px; margin-bottom: 10px; } #blog-container-full #bar-content-tags p { margin: 0px; padding: 3px 0; line-height: auto; } #blog-container-full #bar-content-tags p:last-child { display: none; } #blog-container ul li.comment, #blog-container-full ul li.comment { display: none; } #blog-container-full ol { margin: 10px; margin-left: 30px; } #blog-container-full ol li { list-style-type: decimal; padding: 5px 0; } .bar-header-icon { display: none; } #pagerControl { clear: both; display: block; text-align: right; padding-right: 3px; margin-top: 10px; margin-right: 40px; } #pagerControl { background: none; } #pagerControl a { background: none; } /* Blog Buttons */ #blog-container-rhs ul:nth-child(4) { margin-top: 20px; padding-top: 15px; border-top: 1px solid #e4e4e4; } #blog-container-rhs ul:nth-child(4) li { margin-bottom: 8px; background: #c8dbec; } #blog-container-rhs ul:nth-child(4) li a { margin-left: 0px; padding: 10px; padding-bottom: 14px; padding-left: 52px; font-size: 1.1em; font-weight: 700; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #blog-container-rhs ul:nth-child(4) li:first-child a { background: URL("/design/images/icons/blog-catalogue.jpg") no-repeat 8px 8px; } #blog-container-rhs ul:nth-child(4) li:nth-child(2) a { background: URL("/design/images/icons/blog-price-list.jpg") no-repeat 8px 8px; } #blog-container-rhs ul:nth-child(4) li a span { color: #333; display: block; font-size: 0.9em; font-weight: 600; margin-top: -2px; } } @media all and (max-width: 600px) { #blog-container-wrapper, #blog-container-rhs, #blog-container, #blog-container-full { display: block; width: 100%; } #blog-container-rhs { margin-top: 20px; } #blog-container .blog-article, #blog-container-full .blog-article, #pagerControl { margin-right: 0px; } #blog-container .blog-article { min-height: 140px; } #blog-container .blog-article-right .bar-content-image, #blog-container-full .blog-article-right .bar-content-image { margin-top: 0px; } } /* Social Sharing ================================================== */ @media all { #share-container { display: block; width: 100%; float: none; height: 30px; } .sharrre .box { display: block; width: 100%;} .sharrre .buttons { width: 100%;} .sharrre .button{ float:left; width:80px; padding-right: 25px; height: 30px; } .sharrre .linkedin { width: 120px } } @media all and (max-width: 500px) { #share-container { height: 60px; } } /*Pickup Address*/ /**********************************************************/ @media all { .differentaddress-group { margin:7px 0 10px 0; padding:0; height:45px !important; } .differentaddress-group .differentaddress-controls { margin:0 5px 0 0 !important; margin-left: 35% !important; padding:0; font: 0.8em "Semibold", Tahoma, Arial, sans-serif; color:#333 !important; text-align:left !important; } #content-container-right .control-group.differentaddress-group .controls.differentaddress-controls input[type="checkbox"] { padding:0; width: 20px; float: left; } #content-container-right .control-group.differentaddress-group .controls.differentaddress-controls { display: inline-block; } #content-container-right .control-group.differentaddress-group span { margin:0 0 0 5px !important; width: 80%; font: 1em "Semibold", Tahoma, Arial, sans-serif; color: #333 !important; display: inline-block; } } @media all and (max-width: 450px) { .differentaddress-group .differentaddress-controls { margin-left: 0px !important; } #content-container-left .control-group .controls { width: 100%; display: block; float: none; } } /*CVN*/ .step-row-form-payment .input-containers-payment .cvnhelpcontainer { margin:-20px 0 10px 85px; padding:0; font: 0.8em "Semibold", Tahoma, Arial, sans-serif !important; color: #333; font-style: normal; font-weight: 600; } .step-row-form-payment .input-containers-payment .cvnhelpcontainer img.cvn-help { height: 14px; padding-left: 10px; padding-right: 10px; vertical-align: middle; margin-top: -1px; } .step-row-form-payment .input-containers-payment .cvnhelpcontainer img.cvn-help + em { display: none; position: absolute; text-align: left; margin-top: 10px; width: 280px; background: #f4d79d; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 0.8em "Semibold", Tahoma, Arial, sans-serif !important; color: #333; font-style: normal; font-weight: 600; border: 1px solid #ffcc66; text-transform: none; opacity: 1.0; } .step-row-form-payment .input-containers-payment .cvnhelpcontainer img.cvn-help:hover + em { display: block; z-index: 10000; opacity: opacity: 1.0; margin-top:10px; }