@font-face {
    font-family: 'source_sans_proregular';
    src: url(./sourcesanspro-regular-webfont.eot);
    src: url(./sourcesanspro-regular-webfont.eot?#iefix) format("embedded-opentype"), url(./sourcesanspro-regular-webfont.woff2) format("woff2"), url(./sourcesanspro-regular-webfont.woff) format("woff"), url(./sourcesanspro-regular-webfont.ttf) format("truetype"), url(./sourcesanspro-regular-webfont.svg#source_sans_proregular) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'source_sans_probold';
    src: url(./sourcesanspro-bold-webfont.eot);
    src: url(./sourcesanspro-bold-webfont.eot?#iefix) format("embedded-opentype"), url(./sourcesanspro-bold-webfont.woff2) format("woff2"), url(./sourcesanspro-bold-webfont.woff) format("woff"), url(./sourcesanspro-bold-webfont.ttf) format("truetype"), url(./sourcesanspro-bold-webfont.svg#source_sans_probold) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'source_sans_prosemibold';
    src: url(./sourcesanspro-semibold-webfont.eot);
    src: url(./sourcesanspro-semibold-webfont.eot?#iefix) format("embedded-opentype"), url(./sourcesanspro-semibold-webfont.woff2) format("woff2"), url(./sourcesanspro-semibold-webfont.woff) format("woff"), url(./sourcesanspro-semibold-webfont.ttf) format("truetype"), url(./sourcesanspro-semibold-webfont.svg#source_sans_prosemibold) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'arialregular';
    src: url(./arial-regular-webfont.eot);
    src: url(./arial-regular-webfont.eot?#iefix) format("embedded-opentype"), url(./arial-regular-webfont.woff2) format("woff2"), url(./arial-regular-webfont.woff) format("woff"), url(./arial-regular-webfont.ttf) format("truetype"), url(./arial-regular-webfont.svg#arialregular) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'arialbold';
    src: url(./arial-bold-webfont.eot);
    src: url(./arial-bold-webfont.eot?#iefix) format("embedded-opentype"), url(./arial-bold-webfont.woff2) format("woff2"), url(./arial-bold-webfont.woff) format("woff"), url(./arial-bold-webfont.ttf) format("truetype"), url(./arial-bold-webfont.svg#arialbold) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'roboto_condensedregular';
    src: url(robotocondensed-regular-webfont.eot);
    src: url(robotocondensed-regular-webfont.eot?#iefix) format("embedded-opentype"), url(robotocondensed-regular-webfont.woff2) format("woff2"), url(robotocondensed-regular-webfont.woff) format("woff"), url(robotocondensed-regular-webfont.ttf) format("truetype"), url(robotocondensed-regular-webfont.svg#roboto_condensedregular) format("svg");
    font-weight: 400;
    font-style: normal
}

body,
html {
    height: 100%;
    background-color: #fff;
    margin: 0;
    padding: 0;
    border: 0
}

html {
    -ms-overflow-style: scrollbar
}

body,
button,
input,
select,
textarea {
    font-family: arial, verdana, helvetica, sans-serif;
    color: #2c3e49;
    font-size: 11px
}

a:active,
a:hover,
a:link,
a:visited {
    color: #043fa0;
    text-decoration: underline
}

a:hover {
    color: #000;
    text-decoration: underline
}

h1 {
    margin: 8px 0!important;
    padding: 18px 0 0;
    font-size: 24px!important;
    color: #527c00!important;
    font-weight: 700!important;
    font-family: arial
}

/* Product/page green heading: balance the padding (base h1 is 18px top / 0 bottom,
   which drops the text to the bottom of the box) - 5px top and 5px bottom. */
h1.green {
    padding: 5px 0
}

hr {
    border: 0;
    border-bottom: 1px solid #888;
    margin: 20px 0 10px;
    padding: 0;
    height: 0
}

hr.style-two {
    border: 0;
    height: 2px;
    margin: 0;
    padding: 0;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

form {
    margin: 0
}

img,
table {
    border: 0
}

em {
    font-style: italic
}

strong {
    font-weight: 700
}

.clearing {
    height: 0;
    font-size: 0;
    clear: both
}

.valign-middle {
    vertical-align: middle
}

.valign-middle-adv-lvl1 {
    height: 100%;
    display: table
}

.valign-middle-adv-lvl2 {
    display: table-cell;
    vertical-align: middle
}

.halign-center,
.halign-center-noscript {
    display: table;
    margin: 0 auto;
    text-align: center
}

.center {
    text-align: center
}

.right-box {
    width: 100%;
    text-align: right;
    background: #f6f6f6;
    border: 1px solid #aeaeae;
    padding: 8px 0
}

.text-block {
    margin-bottom: 15px;
    font-family: 'source_sans_proregular'
}

.text-pre-block {
    margin-top: 15px
}

.nowrap {
    white-space: nowrap
}

.width-100 {
    padding-bottom: 0;
    width: 100%
}

.page-break {
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    page-break-after: always
}

.pointer {
    cursor: pointer
}

.overflow {
    position: relative;
    margin-right: 20px;
    padding-bottom: 20px;
    overflow: auto
}

.hidden {
    display: none
}

label {
    vertical-align: bottom;
    line-height: 15px
}

label input {
    margin: 0;
    vertical-align: bottom
}

label.input-block {
    vertical-align: middle;
    line-height: 21px
}

label.input-block input,
label.input-block select {
    vertical-align: middle
}

.input-row label,
label.input-row {
    float: left;
    padding-right: 20px
}

.plain-box {
    display: block;
    padding-bottom: 15px
}

.plain-box .label-title {
    display: block
}

.default-value {
    color: #aaa
}

.underline {
    text-decoration: underline
}

.dotted {
    text-decoration: none!important;
    border-bottom: 1px dotted #888
}

.toggle-link {
    background: url(/skin/common_files/images/arrow_down.png) right 8px no-repeat;
    padding-right: 15px
}

.cursor-hover:hover {
    border: 1px solid #1a478f!important
}

.input-style,
input[type=password],
input[type=text],
select,
textarea {
    border: 1px solid #bbb;
    padding: 2px;
    background: #fff;
    font-family: 'source_sans_proregular'
}

input[type=password]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {
    border: 1px solid #999
}

.error-message {
    color: #b51a00
}

input.err,
select.err,
textarea.err {
    border: 1px solid #b51a00;
    background-color: #f7f3f3
}

div.error-message {
    margin: 0 0 15px
}

.form-text {
    color: #112536;
    font-weight: 700
}

.list-item a:link,
.list-item a:visited,
a.list-item:link,
a.list-item:visited {
    color: #043fa0;
    text-decoration: none
}

.list-item a:hover,
a.list-item:hover {
    color: #2863c2;
    text-decoration: underline
}

.list-item a:active,
a.list-item:active {
    color: #043fa0;
    text-decoration: none
}

tr.head-row th {
    background: #ccc;
    font-weight: 700
}

tr.center-row th {
    text-align: center
}

div.ajax-popup-error-message {
    padding: 0 5px;
    margin: 10px 0;
    display: none
}

div.ajax-popup-error-message span {
    float: left;
    margin: 0 10px 0 3px
}

.currency {
    white-space: nowrap
}

input.datepicker-formatted {
    border: 1px solid #bbb;
    margin-right: 5px
}

input.datepicker-formatted[disabled] {
    background: #fff;
    color: #bbb
}

input.zipcode {
    width: 100px
}

input.zip4 {
    width: 60px
}

span.validate-mark {
    margin: 0;
    padding: 0;
    vertical-align: middle
}

span.validate-mark img {
    width: 15px;
    height: 15px;
    margin-left: 3px
}

span.validate-matched img {
    background: url(/skin/common_files/images/icon_ok.png) left top no-repeat
}

span.validate-non-matched img {
    background: url(/skin/common_files/images/icon_nok.png) left top no-repeat
}

#page-container {
    min-height: 100%;
    position: relative;
    max-width: 95%;
    margin: 0 auto
}

.checkout-container .minicart-box {
    top: 119%;
}

#content-container {
    clear: both;
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-bottom: 10px;
    margin-top: 115px
}

#content-container2 {
    float: left;
    position: relative;
    right: 100%;
    width: 200%
}

#center {
    float: left;
    position: relative;
    width: 50%;
    left: 50%
}

#left-bar {
    float: left;
    position: relative;
    width: 195px;
    margin-left: 6px
}

#right-bar {
    float: right;
    right: 6px;
    position: relative;
    width: 150px
}

#center-main {
    margin: 0;
    position: relative;
    overflow: hidden
}

#header {
    height: 125px;
    position: absolute!important;
    top: 0;
    left: 0;
    width: 100%
}

.rtl {
    direction: rtl
}

#header .line1 {
    position: relative;
    height: auto;
    display: inline-block;
    direction: ltr;
    padding-top: 10px;   /* match live site (was 5px) */
    width: 100%
}

#header .line1 .banner {
    position: absolute;
    top: 7px;
    right: 6px;
    width: auto;
    direction: rtl
}

.minicart.ajax-minicart-icon {
    cursor: pointer
}

.login-signin {
    font-family: 'source_sans_proregular';
    font-size: 15px;
    position: relative;
    top: 3px;   /* nudge sign in / register down 3px */
}

#horizontal-menu {
    list-style: none;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    z-index: 1000;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#horizontal-menu li {
    cursor: pointer;
    list-style: none;
    float: left;
    position: relative;
    padding: 5px 8px 1px;
    background: url(/skin/common_files/images/horizontal_menu_item.png) left top repeat-x;
    color: #000;
    height: 20px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 5px;
}

#horizontal-menu li.orange:hover,
#horizontal-menu li:hover,
.horizontal-menu-li-hover {
    color: #0063af;
    background: #fff
}

#horizontal-menu li a:active,
#horizontal-menu li a:hover,
#horizontal-menu li a:link,
#horizontal-menu li a:visited {
    text-decoration: none;
    color: #661A1A
}

#horizontal-menu li a:hover {
    color: #0063af
}

#horizontal-menu li div {
    display: none;
    padding: 0;
    white-space: nowrap;
    margin-top: 2px
}

#horizontal-menu li.orange:hover div,
#horizontal-menu li:hover div,
.horizontal-menu-li-hover-div {
    display: block;
    position: absolute;
    left: -1px;
    top: 16px;
    background: #fff;
    border: 1px solid #aaa;
    border-top: 0 none;
    min-width: 170px
}

#horizontal-menu li div a,
#horizontal-menu li.orange div a {
    font-size: 12px;
    display: block;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    float: none!important
}

#horizontal-menu li.orange {
    height: 17px;
    background: url(/skin/common_files/images/head_linebg.gif) left top repeat-x;
    font-weight: 700
}

#horizontal-menu li.orange a:active,
#horizontal-menu li.orange a:hover,
#horizontal-menu li.orange a:link,
#horizontal-menu li.orange a:visited {
    color: #FFF
}

#horizontal-menu li.orange:hover a:active,
#horizontal-menu li.orange:hover a:hover,
#horizontal-menu li.orange:hover a:link,
#horizontal-menu li.orange:hover a:visited {
    color: #f26202
}

#horizontal-menu li div a.support-link:hover {
    background: url(/skin/common_files/images/external_link.gif) no-repeat 96% #c2d5e4
}

#horizontal-menu li div a:active,
#horizontal-menu li div a:hover,
#horizontal-menu li div a:link,
#horizontal-menu li div a:visited,
#horizontal-menu li.orange div a:active,
#horizontal-menu li.orange div a:hover,
#horizontal-menu li.orange div a:link,
#horizontal-menu li.orange div a:visited,
#horizontal-menu li.orange:hover div a:active,
#horizontal-menu li.orange:hover div a:hover,
#horizontal-menu li.orange:hover div a:link,
#horizontal-menu li.orange:hover div a:visited {
    color: #003072;
    text-decoration: none;
    font-weight: 400
}

#horizontal-menu li div a.support-link {
    background: url(/skin/common_files/images/external_link.gif) no-repeat 96% #e3ebf6
}

#horizontal-menu li div a:hover {
    background: #e3ebf6
}

#horizontal-menu li.orange div a {
    background: url(/skin/common_files/images/external_link.gif) no-repeat 96% #e3ebf6
}

.tabs {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    height: 25px;
    width: 80%;
    text-align: right
}

.tabs ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.tabs li {
    float: right;
    margin: 0 1px 0 0;
    padding: 0;
    background: url(/skin/common_files/images/tab_r.png) right top no-repeat;
    height: 25px
}

.tabs a {
    display: block;
    background: url(/skin/common_files/images/tab_l.png) left top no-repeat;
    margin: 0 5px 0 0;
    padding: 5px 10px 5px 15px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: #253161;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
    height: 25px;
    outline-style: none
}

.tabs a:hover {
    color: #2863c2
}

#header .phones {
    position: absolute;
    right: 10px;
    top: 25px;
    height: 42px;
    vertical-align: middle;
    line-height: 42px;
    color: #5480a2;
    text-align: right;
    white-space: nowrap;
    font-size: 11px
}

#header .phones span {
    padding-left: 15px
}

#header .line2 {
    position: relative;
    height: auto;
    min-height: 27px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
}

#header .line2 div,
#header .line2 span {
    color: #000
}

#header .line2 a {
    color: #fff;
    text-transform: uppercase;
    font-family: 'source_sans_prosemibold';
    text-decoration: none
}

#header .line2 a:hover {
    text-decoration: underline
}

.menu_chkout a {
    font-size: 19px!important
}

#header .line2 .full-mini-cart a {
    color: #000;
    font-size: 12px
}

#header .line2 a:hover {
    color: #fff;
    text-align: underline
}

#header div.search {
    position: static;
    left: auto;
    width: 100%;
    top: 0;
    height: 39px;
    line-height: 25px;
    vertical-align: middle
}

/* header search box: match live-site position (flush to column, no offset) */
#header .line1 div.search {
    position: relative;   /* anchor the magnifier button to the search box */
    margin-top: 0;
    margin-left: 0;
    width: 100%;
}
/* header logo: match live-site position (flush-left, no top pad).
   Overrides common_files/css/main.css `#header .line1 .logo{padding-top:9px;margin-left:27px;width:auto}`.
   Higher specificity (div.logo) so it wins regardless of aggregation order. */
#header .line1 div.logo {
    margin-left: 0;
    padding-top: 0;
    width: 25%;   /* restore bootstrap col width (live renders 342px); common_files forces width:auto */
}
/* magnifier button: sit at the search box's right corner, vertically centered.

   The offset is deliberately 2px, not the 4px that would place the button exactly
   against the inside of the input's 4px green border. Sitting exactly on that edge
   is what opened a hairline of white on Windows Chrome (reported 2026-08-26 with a
   screenshot): the button and the border are laid out from opposite sides of the
   same box, so when the browser rounds their sub-pixel positions in different
   directions the two edges stop meeting and background shows through the crack.
   Linux Chrome rounds them together and shows nothing wrong - measured flush on
   every width from 480px to 1920px and at 1.0/1.25/1.5/2.0 device pixel ratios,
   which is exactly why an exact-fit value is the wrong thing to rely on.

   Overlapping the border by 2px removes the dependency on rounding entirely: there
   is no seam to open because the two shapes are no longer edge-to-edge. 2px of the
   4px border still shows to the right of the button. Live tonerpirate.com overlaps
   by 1px for the same reason, so this is the same technique, one pixel deeper.

   margin-right overrides the 3px that `#header input` sets higher up in this file.
   Stating it here keeps the arithmetic in ONE place: 1px + 1px = the 2px offset.
   The 641-1100px band at the end of the file re-asserts `right: 1px !important`
   and inherits this margin, so it lands on the same 2px. */
#header .line1 input.image-button {
    top: 2px;
    right: 1px;
    margin-right: 1px;
}
/* header search input: 3px shorter */
#header .line1 input.text {
    height: 42px;
}
/* "Enter Keyword" placeholder: slightly gray (match live site) */
#header .line1 input.text::-webkit-input-placeholder { color: #999; opacity: 1; }
#header .line1 input.text::-moz-placeholder { color: #999; opacity: 1; }
#header .line1 input.text:-ms-input-placeholder { color: #999; }
#header .line1 input.text::placeholder { color: #999; opacity: 1; }

/* second-row section body text: match live (live body is 14px; test body is 11px) */
.row.second-row .horizondal-line,
.row.second-row .image_list li {
    font-size: 14px;
    line-height: 1.43;
}

#header span.search {
    font-size: 12px;
    padding-left: 20px;
    padding-right: 5px;
    font-weight: 700
}

#header input.text {
    width: 100%;
    padding: 8.5px 4px;
    height: 45px
}

#header input.text2 {
    width: 69%;
    height: 43px;
    padding-left: 5px
}

#header a.search {
    text-decoration: underline
}

#header div.toplinks {
    position: absolute;
    top: 0;
    left: 400px;
    height: 39px;
    line-height: 25px;
    vertical-align: middle
}

#header div.toplinks a:link,
#header div.toplinks a:visited {
    font-weight: 700;
    color: #000;
    text-decoration: none;
    font-size: 12px
}

#header div.toplinks a:active,
#header div.toplinks a:hover {
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: 12px
}

#header div.rightlinks {
    position: absolute;
    top: 0;
    right: 5px;
    height: 39px;
    line-height: 25px;
    vertical-align: middle
}

#header div.rightlinks a:link,
#header div.rightlinks a:visited {
    font-weight: 700;
    color: #661A1A;
    text-decoration: none;
    font-size: 12px
}

#header div.rightlinks a:active,
#header div.rightlinks a:hover {
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: 12px
}

.search_new {
    position: relative
}

#header input[type=text] {
    border: 4px solid #a1ba58;
    font-size: 15px;
    line-height: 0
}

#header button.simple-button {
    vertical-align: middle;
    margin-bottom: 3px;
    margin-right: 3px
}

#header button.simple-button img {
    margin-left: 0
}

#header .languages {
    position: absolute;
    top: 7px;
    right: 20px;
    text-align: right;
    vertical-align: middle
}

#header .languages-flags,
#header .languages-row {
    top: 9px
}

#header .languages-flags a,
#header .languages-flags strong {
    padding-left: 5px;
    padding-right: 5px
}

#header .languages label {
    line-height: 21px;
    vertical-align: middle;
    font-size: 12px
}

#header .languages select {
    margin-left: 5px
}

#header .line3 {
    position: relative;
    width: 100%;
    height: 39px;
    text-align: right
}

.printable-bar a {
    background: url(../images/printer.png) no-repeat 0 0;
    padding: 2px 20px 6px 33px;
    color: #262626;
    font-size: 13px;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;   /* keep "Printable version" on one line (its col-md-2 box was wrapping it) */
}

div.printable-bar {
    float: right;
    padding: 5px 34px;   /* was 11px — halved so the breadcrumb/printable bar isn't too thick */
    background: #ebebeb
}

/* Un-clip the footer. A base-layout rule pins #footer to height:39px; position:absolute; overflow:hidden,
   which hid the Help / News / Reviews / Stay In Touch columns (they render but get clipped). Restore
   normal flow so the full footer shows like the live site. */
body #footer {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    float: none !important;
    display: block !important;
    width: 100%;
}
/* 1px left divider on each of the four footer columns; keep the menu-dialog box border off */
#footer .left-border { border-left: 1px solid #d2d2d2; }
#footer .menu-dialog { border: none; }

/* Footer font sizes to match live: Help links stay 13px (from .menu-dialog ul li a); News and
   Reviews widgets go to 14px (their text was inheriting the 11px body size). The author/date in
   the reviews widget keep their own 10px rule. */
#footer .menu-news { font-size: 14px; }
#footer .menu-reviews-section { font-size: 14px; }

/* Reviews widget body at 12px: the product title, the review text, the ....more.... / ....less....
   toggle, and the "Read more product reviews" / "Read all reviews" links.
   Sized on the .acr-comment CONTAINER rather than on .tp-readmore-text, because the expander only
   wraps content it actually truncates — short reviews are left untouched and have no
   .tp-readmore-text span, so styling just the span would render short reviews 14px and long ones
   12px. The toggle inherits from the container, so it needs no rule of its own.
   Scoped to #footer on purpose: .tp-readmore is a reusable component, and a font-size baked into
   it would follow it into product descriptions. Plain rules (no !important) — nothing sets a
   font-size on these elements, they were only inheriting the 14px above, and a direct rule always
   beats an inherited one. */
#footer .acr-product-title,
#footer .acr-product-title a { font-size: 12px; }
#footer .acr-comment { font-size: 12px; }
#footer .acr-link,
#footer .acr-link a { font-size: 12px; }

/* Reviews widget: thumbnail sits to the LEFT of the star rating, on the row BELOW the title, so
   the title gets the full column width (see customer_reviews_menu.tpl for the markup).
   Flex rather than the module's float:left, so the stars centre against the taller thumbnail and
   no clearing div is needed between them.
   - .acr-image width:auto !important — the skin forces width:100% on the thumbnail between
     1101-1495px (see the @media block further down, inherited from live's main.css). That existed
     to give the long title its own row; the title now has one by structure, and left at 100% the
     image would eat the flex row and push the stars off it.
   - .acr-rating overflow:hidden — the stars inside .acr-vote-bar are float:left, so the box
     collapses to 0 content height (it measured 5px = its padding alone). overflow:hidden makes it
     a block formatting context so it actually wraps the stars, which align-items:center needs. */
#footer .acr-media-row { display: flex; align-items: center; }
#footer .acr-media-row .acr-image { float: none; width: auto !important; flex: 0 0 auto; }
#footer .acr-media-row .acr-rating { overflow: hidden; padding-top: 0; }

/* Spread Help / News / Reviews / Stay In Touch evenly across the full page width.
   The wrapper is a flex row (see bottom.tpl); drop the Bootstrap float and force equal
   quarters on desktop, letting them wrap 2-up / stacked on smaller screens. */
.footer-cols { display: flex; flex-wrap: wrap; width: 100%; }
.footer-cols > div { float: none; }
@media (min-width: 992px) {
    .footer-cols > div { flex: 1 1 25%; max-width: 25%; }
}
/* Drop the tall forced min-height on the footer columns so they end ~one line below their
   content instead of leaving a big empty block at the bottom. */
#footer .left-border { min-height: 0 !important; padding-bottom: 0; }
/* Tighten the Stay In Touch column (the tallest one, which sets the footer height): shrink the
   margin around the address image / Authorize.Net seal so the page ends ~one line below it. */
#footer .phone { margin-top: 2px; margin-bottom: 6px; }

#footer .box {
    width: 100%;
    border: none;
    padding: 0
}

#footer .subbox {
    background: url(../images/footer_border.png) no-repeat;
    color: #fff;
    height: 40px;
    vertical-align: middle;
    padding: 0;
    position: relative;
    background-size: cover
}

#footer .subbox .left {
    line-height: 40px;
    vertical-align: middle;
    text-align: center
}

#footer .subbox .right {
    background: 0 0;
    position: absolute;
    right: 12px;
    top: 0;
    text-align: right;
    line-height: 40px;
    vertical-align: middle
}

#footer .subbox a {
    color: #667d92;
    text-decoration: underline
}

#footer .subbox a:hover {
    text-decoration: none
}

#location {
    min-height: 25px;
    line-height: 15px;
    margin-bottom: 10px;
    font-size: 11px;
    color: #818891
}

/* Breadcrumb — "Green accent": ancestor crumbs are green semibold links (underline on hover);
   current page is bold black; chevron '›' separators. The chevron is injected via CSS ::before so
   we don't depend on the breadcrumbs_separator config (still '-->'); the '-->' text is hidden with
   font-size:0. (This is the skin's improved design - deliberately nicer than live's plain '-->'.)
   #location0 / .printable-bar keep their slimmed vertical padding so the bar stays thin. */
font.bread-crumb,
a.bread-crumb {
    font-size: 13px;
    text-decoration: none;
}
a.bread-crumb {
    color: #5c7d22;
    font-weight: 600;
}
a.bread-crumb:hover {
    text-decoration: underline;
}
font.last-bread-crumb {
    color: #111;
    font-weight: 700;
}

#location span {
    padding: 0 5px
}

/* chevron '›' separators (replaces the '-->' text) */
#location0 > span {
    font-size: 0;
    padding: 0 9px;
}
#location0 > span::before {
    content: '\203A';
    font-size: 14px;
    color: #b5b5b5;
}

/* Center the breadcrumb text + the printable link vertically in the gray bar. The row is two
   Bootstrap columns (breadcrumb / printable) of unequal height; flexing the wrapper with
   align-items:center lines them up on the bar's centre line instead of top-aligning the shorter
   one. flex-wrap keeps them stacking on narrow (col-xs-12) screens. (Replaces the wrapper's old
   inline display:inline-block — see bread_crumbs.tpl .bread-row.) */
.bread-row { display: flex; align-items: center; flex-wrap: wrap; }

/* ============================================================================
   PRINT STYLESHEET — makes EVERY page print as a clean, branded document.
   Fired by the browser's print (Ctrl+P) and by the "Printable version" link,
   which now calls window.print() (see customer/printable_link.tpl) instead of
   the old, broken server-side ?printable=Y route.
   Strategy: hide all site chrome + interactive controls, flatten the skin's
   absolute / double-width centering hacks to a single full-width column, and
   print the page's real content (H1 + product / category / help body) in black
   on white under a simple TonerPirate header.
   ============================================================================ */
@media print {
  /* --- hide site chrome, navigation and interactive controls ---
     (body #footer, not #footer: an earlier un-clip rule sets `body #footer{display:block!important}`
     which out-specifies a bare #footer, so the footer would otherwise still print.) --- */
  #header, body #footer, .menu-container, .bread-row, .printable-bar,
  .pf-inline, .banner-black, .browse_products,
  .no-print, .eu-cookie, #dialog-message,
  #tabs-container_product, select,
  button, input[type="button"], input[type="submit"], input[type="image"],
  a.simple-button, a.button, div.button, .add2cart, .qty,
  .menu_checkout_cart, .checkout_menu, .menu-minicart, .desktop_view {
    display: none !important;
  }

  /* --- flatten the layout hacks: one static, full-width column --- */
  html, body {
    background: #fff !important;
    margin: 0 !important; padding: 0 !important; width: auto !important;
  }
  #page-container, #page-container2,
  #content-container, #content-container2,
  #center, #center-main, #center2 {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    left: 0 !important; right: 0 !important;
    margin: 0 !important; padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  /* --- simple branded print header at the top of the document --- */
  #content-container::before {
    content: "TonerPirate.com";
    display: block;
    font: 700 20px/1.2 Arial, sans-serif;
    color: #000;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #000;
  }

  /* --- readable black-on-white body, no link/box chrome --- */
  body, body * {
    color: #000 !important;
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a { color: #000 !important; text-decoration: none !important; }
  h1, .green { color: #000 !important; font-size: 20px !important; margin: 6px 0 10px !important; }
  #center-main { font-family: Arial, Helvetica, sans-serif !important; font-size: 12pt; line-height: 1.4; }
  img { max-width: 100% !important; height: auto !important; }

  /* main content dialog: borderless, full width. page-break-inside:auto is critical — the general
     .dialog rule sets page-break-inside:avoid, which on a tall dialog (e.g. the FAQ, ~2000px) forces
     the WHOLE dialog onto a fresh page, leaving an empty first page. Let it break naturally. */
  .dialog, .dialog .content, .product-details {
    width: 100% !important; border: 0 !important; margin: 0 !important; padding: 0 !important;
    page-break-inside: auto !important;
  }

  /* PRINT-ONLY category product listing: one product per row, image left (35%) / title + price
     right (65%); "See details" and the quantity / add-to-cart / wishlist row are dropped. Screen
     view keeps its grid — the grid's per-breakpoint width rules are `@media screen`, so they don't
     apply here in print. */
  .dialog-category-products-list .item {
    width: 100% !important; max-width: 100% !important; float: none !important;
    margin: 0 !important; padding: 10px 0 !important; min-height: 0 !important;
    border-bottom: 1px solid #ccc; page-break-inside: avoid;
  }
  .dialog-category-products-list .itemdiv { display: flex !important; align-items: center; width: 100%; }
  .dialog-category-products-list .image {
    flex: 0 0 35% !important; max-width: 35% !important; width: 35% !important;
    float: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 10px !important;
    text-align: center;
  }
  .dialog-category-products-list .details {
    flex: 0 0 65% !important; max-width: 65% !important; width: 65% !important;
    padding: 0 0 0 20px !important; text-align: left !important;
  }
  .dialog-category-products-list .price-row { text-align: left !important; margin: 5px 0 0 !important; }
  .dialog-category-products-list .see-details,
  .dialog-category-products-list .product_details-button { display: none !important; }

  /* drop the products-"per page" selector in print — its <select> is already hidden, which left an
     orphaned "per page" label in the pagination bar. (The "Result pages" links stay.) */
  .navigation-bar .item-right,
  .per-page-selector { display: none !important; }

  /* keep key blocks from splitting awkwardly across pages; never append link URLs */
  h1, h2, .product-details img, .subcategories { page-break-inside: avoid; }
  a[href]:after { content: "" !important; }

  @page { margin: 1.4cm; }
}

#dialog-message {
    margin: 0;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 350px;
    z-index: 1000
}

#dialog-message .box {
    position: relative;
    border: 1px solid #000;
    border-top: 3px solid #000;
    padding: 10px 25px 10px 59px;
    vertical-align: middle;
    text-align: left;
    min-height: 32px
}

#dialog-message a.close-link {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 13px;
    height: 13px;
    text-decoration: none
}

#dialog-message .close-img {
    width: 13px;
    height: 13px;
    background: url(/skin/common_files/images/but_cross.gif) left top no-repeat
}

#dialog-message .message-i {
    color: #112536;
    border-color: #7a97c1;
    background: url(/skin/common_files/images/icon_info.gif) 10px 10px no-repeat #f4f5f7
}

#dialog-message .message-w {
    color: #3e3104;
    border-color: #c3902f;
    background: url(/skin/common_files/images/icon_warning.gif) 10px 10px no-repeat #f8f7f3
}

#dialog-message .message-e {
    color: #590a0a;
    border-color: #d30000;
    background: url(/skin/common_files/images/icon_error.gif) 10px 10px no-repeat #f7f3f3
}

#dialog-message .anchor {
    position: relative;
    margin-left: auto;
    margin-right: 0;
    height: 15px;
    text-align: right;
    vertical-align: middle
}

#dialog-message .anchor img {
    width: 12px;
    height: 10px;
    vertical-align: middle;
    background: url(/skin/common_files/images/goto_arr.gif) left top no-repeat
}

.dialogtr {
    color: #1a2b3c
}

.fill-error label {
    color: #ce0000
}

.fill-error input[type=password],
.fill-error input[type=text],
.fill-error select,
.fill-error textarea {
    border: 1px solid #ce0000;
    background-color: #ffebeb
}

div.error-label {
    color: #ce0000;
    font-size: 9px!important;
    display: none
}

.fill-error div.error-label {
    display: block
}

.inline-message {
    height: 16px;
    line-height: 16px;
    vertical-align: middle;
    padding: 1px 1px 15px;
    margin: 0
}

.inline-message img.icon-w {
    vertical-align: top;
    width: 18px;
    height: 18px;
    background: url(/skin/common_files/images/icon_warning_small.gif) no-repeat
}

.cart-message {
    padding: 5px 5px 5px 35px;
    text-align: left;
    min-height: 20px;
    color: #4f6280;
    font-size: 10px;
    margin-top: 10px;
    margin-bottom: 10px
}

.cart-message-w {
    background: url(/skin/common_files/images/icon_warning_small.gif) 5px 5px no-repeat #efefef
}

.cart-message div.close-link {
    float: right;
    width: 25px;
    height: 13px;
    text-align: right;
    cursor: pointer;
    background: url(/skin/common_files/images/but_cross.gif) right top no-repeat
}

.menu-dialog {
    margin-bottom: 15px
}

.menu-dialog .title-bar {
    width: 100%;
    background: #D1D1D1;
    border: 0;
    border-bottom: #000 1px solid;
    height: 23px;
    overflow: hidden
}

.menu-dialog .title-bar img.icon {
    vertical-align: middle;
    margin: 0 2px 3px
}

.menu-dialog .title-bar h2 {
    font-size: 11px;
    color: #000;
    font-weight: 700;
    line-height: 23px;
    height: 23px;
    margin: 0;
    padding: 0;
    width: auto;
    display: inline;
    white-space: nowrap
}

.menu-dialog .link-title span.title-link {
    float: right;
    padding: 8px 7px 8px 0
}

.menu-dialog .link-title a.title-link {
    text-decoration: none;
    outline-style: none
}

.menu-dialog .link-title .title-link img {
    width: 7px;
    height: 11px;
    background: url(/skin/common_files/images/spriteme1.png) -10px -167px no-repeat
}

.menu-dialog .content {
    border: 0;
    background-color: #fff;
    padding: 3px;
    overflow: hidden
}

.menu-dialog .content a:link,
.menu-dialog .content a:visited {
    color: #000;
    text-decoration: underline
}

.menu-dialog .content a:active,
.menu-dialog .content a:hover {
    color: red;
    text-decoration: underline
}

.menu-dialog ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.menu-dialog ul li {
    padding: 0;
    vertical-align: middle
}

.menu-dialog .item {
    color: #112536;
    font-size: 10px
}

.menu-dialog ul li a {
    font-size: 13px;
    text-decoration: none
}

.menu-dialog ul li a:hover {
    text-decoration: underline
}

.menu-dialog hr {
    background-color: #999
}

.menu-dialog .login-text ul li {
    padding: 1px 0
}

.menu-dialog .Tbl,
.cat-tabs .Tbl {
    display: table;
    width: 100%
}

.menu-dialog .Tbr,
.cat-tabs .Tbr {
    display: table-row;
    width: auto
}

.menu-dialog .Tbc,
.cat-tabs .Tbc {
    width: 95px;
    display: table-cell;
    border: none;
    padding: 3px 3px 3px 8px;
    font-family: Arial
}

.Tbc a:active,
.Tbc a:hover,
.Tbc a:visited,
.menu-dialog .Tbc a:link {
    text-decoration: none
}

/* home-page category showcase blocks (CD/DVD Optical Media, Toner Cartridges) */
.cat-showcase { margin-bottom: 15px; }
.cat-showcase .sc-title {
    background: #4c6923;
    padding: 7px 12px;
}
.cat-showcase .sc-title h2 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: normal;   /* source_sans_probold is already bold (its @font-face is weight 400) */
    line-height: 1.25;
    font-family: 'source_sans_probold', Arial, Helvetica, sans-serif;  /* bold, same Source Sans as WELCOME */
}
.cat-showcase .content { padding: 8px 4px; }
.cat-showcase .Tbc a:link,
.cat-showcase .Tbc a:visited { color: #000; font-size: 14px; line-height: 20px; text-decoration: none; }  /* match live subcategory links */
.cat-showcase .Tbc a:hover { color: #FF4421; }

/* Toner / Ink shown as two tabs in one space (product-page tab look), sized for the left column */
.cat-tabs { margin-bottom: 15px; }
.cat-tabs .cat-tabs-menu { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.cat-tabs .cat-tabs-menu li { float: left; width: 50%; box-sizing: border-box; text-align: center;
    background: #e3e3e3; border: 1px solid #4c6923; border-bottom: none; }
.cat-tabs .cat-tabs-menu li.current { background: #4c6923; border-color: #4c6923; }
.cat-tabs .cat-tabs-menu li a { display: block; padding: 8px 2px; color: #333; font-size: 15px;
    font-family: 'source_sans_probold', Arial, Helvetica, sans-serif; text-decoration: none; white-space: nowrap; }
.cat-tabs .cat-tabs-menu li.current a { color: #fff; }
.cat-tabs .cat-tabs-menu li a:hover { color: #4c6923; }
.cat-tabs .cat-tabs-menu li.current a:hover { color: #fff; }
/* min-height, not height: the box never shrinks below this (so it doesn't change size between the
   toner and ink tabs, whose lists differ), and on desktop the equal-height rule below lets it grow
   to match Featured Products instead. overflow-y keeps a longer category list inside the box. */
.cat-tabs .cat-tab { clear: both; border: 1px solid #4c6923; border-top: none; background: #fff;
    min-height: 304px; box-sizing: border-box; overflow-y: auto; }

/* ---- home lower row: category tabs and Featured Products end at the same line ----
   These two boxes sit side by side and used to be matched by hand - .cat-tab was pinned to 304px
   chosen to land near the Featured box's height. It only ever approximated it (the two bottom
   edges sat 2px apart) and any change to a featured card - a taller title, a different row count -
   would drift them apart again with nothing to catch it.

   Flex does the matching instead: the row stretches both columns to the taller of the two, and each
   box grows to fill its column, so the bottoms line up by construction at every width.

   Gated at 992px because that is where col-md- takes effect; below it the columns stack full-width
   and there are no side-by-side heights to reconcile.

   The bootstrap .row clearfix pseudo-elements would otherwise become stray flex items, so they are
   turned off here - the flex container does its own containment and needs no clearfix. */
@media (min-width: 992px) {
    .row.home-lower-row { display: flex; flex-wrap: wrap; align-items: stretch; }
    .row.home-lower-row:before,
    .row.home-lower-row:after { display: none; }

    .row.home-lower-row > [class*="col-"] { display: flex; flex-direction: column; }

    .row.home-lower-row .cat-tabs,
    .row.home-lower-row .featured-block { flex: 1 1 auto; display: flex; flex-direction: column; }

    /* the tab body absorbs the leftover height in its column; min-height:0 is what allows a flex
       item to be shorter than its content, which is what makes its overflow-y scroll work */
    .row.home-lower-row .cat-tabs .cat-tab { flex: 1 1 auto; min-height: 0; }

    /* keep the Featured box's white interior filling its border when the category side is taller */
    .row.home-lower-row .featured-block .feat-carousel { flex: 1 1 auto; }
}

/* ---- second row: the 2x2 grid must stay a 2x2 grid ----
   Between 641px and 1199px the four blocks (WELCOME / GOV & SCHOOL POs / 1-3 Days Delivery /
   By the Numbers) are widened to 50% by the bands further down this file, so they are meant to
   read as two rows of two.

   They are floats, and the four blocks are not the same height (at 1200px-ish WELCOME runs 212px
   against GOV's 180px). A float does not start a new line, it slots into the first gap it fits:
   block 3 rose into the space under the SHORTER right-hand block instead of starting row 2, and
   block 4 was then pushed below it, so the bottom two blocks ended up stacked diagonally rather
   than side by side. Nothing about the widths was wrong - the gap-filling was.

   Making the row a wrapping flex container removes the mechanism: flex items fill a line and then
   break to the next one as a group, so two 50% blocks per line is the only possible outcome, at any
   height. align-items:flex-start keeps every block's own height exactly as it is today - the fix is
   only about where blocks land, not how tall they are.

   The .row clearfix pseudo-elements are turned off for the same reason as the row above: in a flex
   container they would become stray items, and a flex container needs no clearfix. */
@media screen and (min-width: 641px) and (max-width: 1199px) {
    .row.second-row { display: flex; flex-wrap: wrap; align-items: flex-start; }
    .row.second-row:before,
    .row.second-row:after { display: none; }
}

/* Featured products carousel (FEATURED PRODUCTS) */
.featured-block { margin-bottom: 15px; }
.menu-dialog.featured-block { border: 1px solid #4c6923; }  /* green border to match the category box */
.featured-block .featured-bar { background: #4c6923; padding: 7px 12px; }
.featured-block .featured-bar h2 {
    margin: 0; color: #fff; font-size: 19px; font-weight: 500;
    text-transform: uppercase; font-family: 'source_sans_proregular', Arial, Helvetica, sans-serif; line-height: 1.25;  /* match WELCOME etc. */
}
.feat-carousel { position: relative; padding: 6px 24px; background: #fff; }
/* ~20px white space between the last row and the box's bottom border.
   Needs .content specificity because the shared `.content` rule sets padding to 3px. */
.feat-carousel.content { padding-bottom: 20px; }
.feat-viewport { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 0 12px; box-sizing: border-box; }
.feat-viewport::-webkit-scrollbar { display: none; }
/* Featured carousel modelled on live's flexisel: the product box (.feat-inner) is a FIXED 210px
   (like itemdiv-flex) so the product and image never scale with the browser. The outer .feat-card
   (like nbs-flexisel-item) is the flexible slot that provides the space around each product:
   its width is max(210px, quarter-of-viewport), so on wide screens 4 products fill the row with
   flexible space around them, and on narrow screens the slot stays a fixed 210px and the extra
   products scroll — never smaller than the product, never overlapping. */
.feat-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.feat-card { flex: 0 0 max(210px, calc((100% - 30px) / 4)); padding: 8px 0; box-sizing: border-box; text-align: center; }
.feat-inner { width: 210px; margin: 0 auto; }   /* fixed product box, centered in the flexible slot */
.feat-card .feat-img { display: block; }
/* fixed 210x150 image regardless of page size */
.feat-card .feat-img img { width: 210px; height: 150px; object-fit: contain; margin: 6px 0 10px; display: block; }
/* product name box: fill card with 2px side margins, centered text, 15px semibold, hover-underline */
.feat-card .product-title {
    display: block; height: 70px; overflow: hidden;
    text-align: center; color: #000; text-decoration: none;
    font-size: 15px; line-height: 20px; margin: 6px 2px 8px;
    font-family: 'source_sans_prosemibold', Arial, sans-serif; font-weight: normal;
}
.feat-card .product-title:hover { color: #000; text-decoration: underline; }
/* inline [qty | price | add-to-cart] : flatten buy_now's form with display:contents, then order; button to the right like live */
.feat-buy { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: nowrap; height: 33px; }
.feat-buy .buy-now, .feat-buy .buy-now form { display: contents; }
.feat-buy .quantity { order: 1; margin: 0 !important; padding: 0; display: flex; align-items: center; }
.feat-buy .quantity .quantity-title { display: none; }
.feat-buy .quantity select { height: 33px; background: #ebebeb; font-size: 15px !important; margin: 0; vertical-align: middle; text-align: center; text-align-last: center; }
.feat-buy .price-value {
    order: 2; color: #cc230c; font-size: 19px; margin: 0; white-space: nowrap; line-height: 33px;
    font-family: 'source_sans_prosemibold', Arial, sans-serif; font-weight: normal;
}
.feat-buy .button-row { order: 3; margin: 0 !important; padding: 0; display: flex; align-items: center; }
.feat-buy .button-row ~ .button-row { display: none; }  /* hide add-to-wishlist (2nd button-row) */
.feat-buy .clearing { display: none; }
/* green shopping-cart icon button instead of the "Buy Now" text button (match live) */
.feat-buy .add-to-cart-button {
    margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
    display: flex !important; align-items: center; height: 33px; line-height: 0; vertical-align: middle;
}
.feat-buy .add-to-cart-button .button-right {
    display: flex !important; align-items: center; height: 33px; padding: 0 !important; margin: 0 !important;
    background: none !important;
}
.feat-buy .add-to-cart-button .button-left {
    display: block !important; width: 39px !important; height: 32px !important; padding: 0 !important; margin: 0 !important;
    background: url("/skin/tonerpirate/images/cart_button.png") no-repeat center !important; background-size: 39px 32px !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: transparent !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden; white-space: nowrap;
}
/* solid green disc arrows with white chevron */
.feat-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #4c6923; color: #fff; font-size: 18px; line-height: 1;
    cursor: pointer; text-decoration: none; box-shadow: 0 2px 6px rgba(20,30,10,.25);
    z-index: 5; -webkit-user-select: none; user-select: none; transition: background .16s ease;
}
.feat-arrow svg { width: 18px; height: 18px; display: block; stroke: #fff; }
.feat-arrow:hover { background: #3d551c; color: #fff; }
.feat-prev { left: 2px; }
.feat-next { right: 2px; }

.dialog {
    padding: 0;
    margin: 0 0 30px;
    page-break-inside: avoid;
    border: 0;   /* match live: no box border around dialogs (main.css sets 1px solid #acb7c7) */
}

.dialog .title {
    position: relative;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    border: 0;
    vertical-align: middle;
    line-height: 30px;
    margin: 0;
    padding: 0;
    text-align: left;
    overflow: hidden
}

.dialog .title h2 {
    margin: 0;
    padding: 0;
    font-size: 22px;
    overflow: hidden;
    white-space: nowrap;
    color: #527c00;
    font-family: 'source_sans_prosemibold'
}

.dialog .content {
    border: 0;
    background: 0 0;
    text-align: left;
    padding: 10px 10px 25px 0;
    color: #333F56;
    font-family: Arial;
    font-size: 14px;   /* match live: test body base is 11px vs live 14px; content inherits it */
}

/* Reviews (reviews.php + product Reviews tab). On live, the review LIST is styled by the module
   CSS modules/Advanced_Customer_Reviews/main.css: .acr-reviews-list uses source_sans_proregular
   16px, while the surrounding dialog content (the "N results found" header) stays at the inherited
   ~11px. The 4.7.10 module CSS lacks the source_sans_pro rule, so replicate live's exact rule here.
   (source_sans_proregular @font-face is already defined at the top of this file.) */
.dialog.acr-dialog .content { font-size: 11px; }
.acr-reviews-list { padding-top: 11px; font-family: 'source_sans_proregular'; font-size: 16px; }

.list-dialog .title h2 {
    width: 100%
}

.list-dialog .title div.sort-box {
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    overflow: hidden
}

.list-dialog .title div.sort-box .search-sort-bar {
    padding: 0;
    margin: 7px 0
}

.list-dialog .title div.sort-box .search-sort-cell,
.list-dialog .title div.sort-box .search-sort-title {
    padding-right: 10px
}

.noborder {
    border: 0
}

.noborder .content {
    padding: 0
}

button.button {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    margin: 0 0 8px 0 !important;
    vertical-align: top;
    overflow: visible;
    outline-style: none
}

button.button .button-right {
    display: block;
    padding: 0 10px 0 0
}

button.button .button-left {
    display: block;
    margin: 0 0 0 -6px;
    background: #f7f7f7;
    border: 1px solid #aeaeae;
    padding: 1px 15px;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
    font-family: arial;
    font-weight: 600;
    color: #2e2e2e;
    font-size: 15px;
    height: auto
}

div.button {
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0 10px 0 0;
    white-space: nowrap;
    float: left
}

div.button a,
div.button div {
    display: block;
    padding: 0 5px 0 15px;
    line-height: 21px;
    white-space: nowrap;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #111d4d;
    font-weight: 700;
    font-size: 11px;
    text-decoration: none;
    outline-style: none
}

button.simple-button {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    height: 15px;
    margin: 3px 0 0;
    padding: 0;
    white-space: nowrap;
    color: #043fa0;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    vertical-align: middle;
    outline-style: none
}

button.simple-button span {
    text-decoration: underline
}

button.simple-button img {
    display: none
}

a.simple-button {
    font-size: 11px;
    white-space: nowrap;
    color: #043fa0;
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 21px;
    vertical-align: bottom;
    text-decoration: underline;
    outline-style: none
}

a.simple-button:hover {
    color: #2863c2
}

input.image-button {
    padding: 0;
    border: 0;
    width: 50px;
    height: 37px;
    background: url(../images/Sprite_images.jpg) -10px -10px no-repeat;
    vertical-align: middle;
    position: absolute;
    right: 18px;
    top: 7%
}
/* The rule above positions every image-button absolutely (right:18px; top:7%) for the header search
   box. The One-Page-Checkout coupon "apply" button is the same class, so when the coupon form is
   expanded it escaped to the top-right of the summary column - appearing next to the checkout welcome
   box. Keep the coupon button in normal flow so it sits beside the coupon-code field. */
#opc_coupon input.image-button {
    position: static;
    right: auto;
    top: auto;
    /* The stock arrow lives in a JPEG sprite (Sprite_images.jpg) sized for a ~21px button; shrinking
       that box clipped or blurred it. Swap in a crisp SVG arrow that scales cleanly to an 18px button
       lined up with the coupon field. (Real file, not a data URI - X-Cart's CSS merger mangles those.) */
    width: 20px;
    height: 18px;
    background: url(../images/coupon-apply.svg) center/contain no-repeat;
    margin: 0 0 0 8px;   /* gap from the input; drop the stray 1px bottom margin */
}
/* Line up the "Coupon code:" label, its input and the apply button on one row. Stock inline layout
   left them on three different references (input vertical-align:bottom, button middle, text baseline),
   so they never shared a centre line. Flex with align-items:center puts all three on one centre. */
#opc_coupon form[name="couponform"] {
    display: flex;
    align-items: center;
}
#opc_coupon form[name="couponform"] label[for="coupon"] {
    display: flex;
    align-items: center;
    margin: 0;
}
#opc_coupon form[name="couponform"] #coupon {
    margin: 0 0 0 8px;   /* gap between the "Coupon code:" text and the field */
    vertical-align: middle;
}
/* Error alert popup (jQuery UI "xalertbox" dialog - e.g. the message shown for an invalid coupon
   code): widen from the stock 300px to 500px. jQuery UI sets the dialog's width and left inline for a
   300px box, so !important is needed, and left:50% + margin-left:-250px re-centres it at the new
   width. Scoped to error-type dialogs (.type-e). */
.ui-dialog.type-e {
    width: 500px !important;
    left: 50% !important;
    margin-left: -250px !important;
}

a.image-button {
    text-decoration: none
}

a.image-button img {
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    width: 19px;
    height: 18px;
    background: url(/skin/common_files/images/spriteme1.png) -10px -346px no-repeat;
    vertical-align: middle
}

button.main-button .button-right {
    background: url(/skin/common_files/images/but_main_right.png) right top no-repeat
}

button.main-button .button-left {
    background: #f7f7f7!important;
    border: 1px solid #aeaeae;
    color: #2e2e2e;
    padding: 1px 8px;
    height: auto;
    width: auto;
    border-radius: 4px
}

button.main-button.added-to-cart-button .button-left {
    background: url(/skin/common_files/images/but_main_check_left.png) left top no-repeat;
    padding-left: 27px
}

div.main-button a,
div.main-button div {
    background: #db4f03;
    background: -moz-linear-gradient(bottom, #db4f03 0%, #fb9a00 55%);
    background: -webkit-gradient(linear, bottom left, bottom right, color-stop(0%, #db4f03), color-stop(55%, #fb9a00));
    background: -webkit-linear-gradient(bottom, #db4f03 0%, #fb9a00 55%);
    background: -o-linear-gradient(bottom, #db4f03 0%, #fb9a00 55%);
    background: -ms-linear-gradient(bottom, #db4f03 0%, #fb9a00 55%);
    background: linear-gradient(to top, #db4f03 0%, #fb9a00 55%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#db4f03', endColorstr='#fb9a00', GradientType=1);
    border-radius: 3px;
    color: #fff;
    padding: 5px 18px;
    font-size: 15px
}

a.simple-main-button,
button.simple-main-button {
    color: #800
}

button.light-button {
    padding-right: 10px
}

button.light-button .button-right {
    background: url(/skin/common_files/images/but_light_right.gif) right top no-repeat;
    padding: 0 2px 0 0
}

button.light-button .button-left {
    background: #f7f7f7!important;
    padding: 3px 11px 0 15px;
    color: #2e2e2e!important;
    font-size: 15px;
    border: 1px solid #aeaeae;
    width: auto!important;
    line-height: 24px;
    border-radius: 3px;
    height: auto;
    font-family: arial
}

div.light-button {
    padding: 0 5px 0 0;
    background: url(/skin/common_files/images/but_light_right.gif) right top no-repeat
}

div.light-button a,
div.light-button div {
    background: url(/skin/common_files/images/but_light_left.gif) left top no-repeat;
    padding: 0 5px 0 11px;
    color: #365f8f;
    font-size: 11px
}

a.simple-delete-button {
    color: transparent;
    background: url(../images/delete_cross.png) left 7px no-repeat;
    padding-left: 13px
}

a.simple-delete-button-woicon {
    color: #800
}

div.drop-out-button {
    padding: 0 23px 0 0;
    background: url(/skin/common_files/images/but_right_dropout.png) right top no-repeat
}

div.drop-out-button a,
div.drop-out-button div {
    background: url(/skin/common_files/images/but_left.png) left top no-repeat;
    padding-right: 10px
}

div.dropout-container {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0
}

div.dropout-wrapper {
    float: left;
    position: relative;
    z-index: 1;
    margin: 0
}

div.dropout-box {
    border: 1px solid #adb6c6;
    background-color: #fff;
    padding: 5px 0;
    margin-top: 26px;
    position: absolute;
    display: none
}

div.dropout-wrapper ul {
    margin: 0;
    padding: 0
}

div.dropout-wrapper ul li {
    list-style-position: outside;
    list-style-type: none;
    padding: 5px 15px;
    float: left
}

div.dropout-wrapper ul li .button {
    float: left;
    position: relative
}

div.dropout-wrapper .button {
    float: none;
    position: absolute;
    margin-right: 0;
    margin-top: 2px
}

button.menu-button {
    height: 22px
}

button.menu-button .button-right {
    background: url(/skin/common_files/images/but_menu_right.png) right top no-repeat;
    padding-right: 7px;
    height: 20px
}

button.menu-button .button-left {
    background: url(/skin/common_files/images/but_menu_left.png) left top no-repeat;
    padding: 0 1px 0 8px;
    color: #deedf7;
    font-size: 10px;
    height: 21px;
    line-height: 20px
}

div.menu-button {
    background: url(/skin/common_files/images/but_menu_right.png) right top no-repeat;
    padding-right: 7px
}

div.menu-button a,
div.menu-button div {
    background: url(/skin/common_files/images/but_menu_left.png) left top no-repeat;
    padding: 0 1px 0 8px;
    line-height: 20px;
    color: #deedf7!important;
    font-size: 10px
}

button.do-add2cart-error,
button.do-add2cart-success,
button.do-add2cart-wait {
    cursor: default
}

button.do-add2cart-error .button-right,
button.do-add2cart-success .button-right,
button.do-add2cart-wait .button-right {
    background: url(/skin/common_files/images/but_light_right.gif) right top no-repeat;
    padding: 0 5px 0 0
}

button.do-add2cart-error .button-left,
button.do-add2cart-success .button-left,
button.do-add2cart-wait .button-left {
    background: url(/skin/common_files/images/but_light_left.gif) left top no-repeat;
    padding: 0 10px 0 15px;
    color: #365f8f;
    font-size: 11px
}

button.do-add2cart-wait .button-left .progress {
    display: block;
    background: #547020 url(/skin/common_files/images/progress.gif) left 45% repeat-x
}

.button-row,
.button-row-right {
    margin-top: 20px;
    padding: 0;
    height: 23px;
    line-height: 23px
}

.buttons-row .button,
.buttons-row a.simple-button,
.buttons-row button.simple-button {
    float: left
}

.button-row-right .button,
.button-row-right a.simple-button,
.button-row-right button.simple-button,
.buttons-row-right .button,
.buttons-row-right a.simple-button,
.buttons-row-right button.simple-button {
    float: right
}

.buttons-row,
.buttons-row-right {
    margin: 5px 0 0
}

.buttons-row .button-separator {
    float: left;
    width: 20px;
    height: 22px
}

. .button-separator {
    float: right;
    width: 30px;
    height: 15px
}

table tr td.button-row,
table tr td.button-row-right,
table tr td.buttons-row,
table tr td.buttons-row-right {
    margin: 0;
    padding-top: 15px
}

.buttons-auto-separator .button,
.buttons-auto-separator a.simple-button,
.buttons-auto-separator button.simple-button {
    margin-right: 20px
}

a.popup-link {
    text-decoration: none
}

a.popup-link img {
    vertical-align: bottom;
    width: 20px;
    height: 18px;
    background: url(/skin/common_files/images/question_button.gif) left top no-repeat;
    margin-bottom: 1px
}

.shipping-method a {
    font-weight: 700;
    font-size: 11px;
    text-decoration: underline
}

.shipping-method a:hover {
    text-decoration: none
}

.shipping-method label {
    display: block;
    vertical-align: middle
}

.shipping-warning {
    color: #3c6992;
    text-decoration: none;
    font-size: 9px;
    font-family: arial, verdana, helvetica, sans-serif
}

a.simple-delete-button:hover {
    color: transparent!important
}

.estimator-container {
    width: 100%
}

.giftwrapping-cart {
    text-align: left;
    padding: 10px 0
}

.giftwrap-option {
    padding: 5px 0 5px 5px
}

.giftwrap-message-label {
    padding: 5px 0
}

.giftwrap-message-text textarea {
    width: 300px;
    height: 80px
}

.giftwrap-cart-note {
    margin-left: 15px;
    color: #b51800
}

.cart-total-row .total-name a,
.invoice-total-name span {
    font-weight: 400
}

.invoice-giftwrap-notes {
    padding-top: 30px
}

.invoice-giftwrap-notes p {
    font-size: 14px;
    font-weight: 700;
    text-align: center
}

.invoice-giftwrap-notes div {
    border: 1px solid #cecfce;
    height: 50px;
    overflow: hidden;
    padding: 5px
}

.images-preview-bg {
    background: url(/skin/common_files/images/grey.png) left top;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3000
}

.images-preview {
    position: absolute;
    top: 100px;
    right: 220px;
    bottom: 100px;
    left: 220px;
    background: #fff;
    border: 5px solid #e3e3e3;
    overflow: hidden;
    min-width: 700px;
    min-height: 500px;
    z-index: 4000
}

.images-preview .wait {
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 30px;
    left: 0;
    background: url(/skin/common_files/images/loading.gif) center center no-repeat #fff;
    z-index: 1500
}

.images-preview a.close {
    position: absolute;
    top: 9px;
    right: 11px;
    background: url(/skin/common_files/images/close_images_preview.gif) left center no-repeat;
    padding-left: 12px;
    padding-bottom: 2px;
    font-size: 11px;
    color: #4e4e4e;
    text-decoration: none;
    outline-style: none;
    text-transform: lowercase
}

.images-preview .list-box {
    margin: 50px 50px 0;
    padding: 0;
    text-align: center;
    position: relative;
    border: 1px solid #fff
}

.images-preview a.arrow {
    position: absolute;
    display: block;
    width: 13px;
    height: 13px;
    outline-style: none;
    cursor: pointer
}

.images-preview a.hidden {
    display: none
}

.images-preview a.left {
    left: 0;
    background: url(/skin/common_files/images/arrow_left.gif) left center no-repeat
}

.images-preview a.right {
    right: 0;
    background: url(/skin/common_files/images/arrow_right.gif) right center no-repeat
}

.images-preview a.left-disabled {
    background: url(/skin/common_files/images/arrow_left_disabled.gif) left center no-repeat;
    cursor: auto
}

.images-preview a.right-disabled {
    background: url(/skin/common_files/images/arrow_right_disabled.gif) 6px center no-repeat;
    cursor: auto
}

.images-preview div.list-subbox {
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    text-align: center
}

.images-preview ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    position: absolute
}

.images-preview ul li {
    display: block;
    padding: 0;
    margin: 0 12px;
    border: 1px solid #fff;
    background: 0 0;
    text-align: center;
    vertical-align: middle;
    float: left;
    cursor: pointer
}

.images-preview ul li.over,
.images-preview ul li:hover {
    border: 1px solid #ccc
}

.images-preview ul li.selected {
    border: 1px solid #215485
}

.images-preview ul li img {
    display: inline;
    text-align: center;
    vertical-align: middle
}

.images-preview ul li.loading {
    background-image: url(/skin/common_files/images/loading.gif);
    background-repeat: no-repeat;
    background-position: center center
}

.images-preview ul li.loading img {
    display: none
}

.images-preview .box {
    position: relative;
    margin: 50px;
    vertical-align: middle;
    text-align: center;
    background: 0 0
}

.images-preview .box.loading {
    background-image: url(/skin/common_files/images/loading.gif);
    background-repeat: no-repeat;
    background-position: center center
}

.images-preview .box img {
    cursor: pointer;
    vertical-align: middle;
    text-align: center
}

.data-table td {
    padding: 4px 1px;
    line-height: 21px;
    vertical-align: top
}

.data-table.light-table td {
    line-height: 16px;
    padding: 3px
}

.data-table td.data-name {
    vertical-align: top;
    color: #112536;
    padding-right: 5px
}

.data-table td.data-required,
td.data-required {
    color: #800
}

.data-table td.data-required {
    padding-right: 4px;
    text-align: center;
    width: 5px
}

.data-table .error-message {
    color: #800;
    vertical-align: middle
}

.data-table div.error-message {
    margin: 0
}

.data-table tr.head-row th {
    padding-left: 5px;
    padding-right: 5px
}

.data-table tr th.data-checkbox-column {
    width: 10px
}

.data-table tr .data-right-column {
    text-align: right
}

.data-table tr .data-width-100 {
    width: 100%
}

.data-table tr td.data-name label {
    line-height: 21px;
    vertical-align: top
}

span.star {
    padding-left: 5px;
    color: #800
}

.search-sort-bar {
    vertical-align: middle;
    line-height: 16px;
    height: 16px;
    padding-right: 20px;
    white-space: nowrap;
    margin: 15px 0 0;
    text-align: right
}

.search-sort-cell,
.search-sort-title {
    padding-right: 20px
}

a.search-sort-link {
    text-decoration: underline
}

.search-sort-bar img,
.search-sort-bar-float img {
    width: 9px;
    height: 9px;
    margin-right: 5px
}

.search-sort-bar a.up-direction {
    font-weight: 700;
    padding-left: 14px;
    background: url(/skin/common_files/images/uarrow.gif) left 3px no-repeat
}

.search-sort-bar a.down-direction {
    font-weight: 700;
    padding-left: 14px;
    background: url(/skin/common_files/images/darrow.gif) left 3px no-repeat
}

.expand-section {
    height: 16px;
    margin: 20px 0;
    vertical-align: middle;
    line-height: 16px;
    font-family: 'source_sans_probold';
    font-size: 15px
}

.expand-section img {
    width: 11px;
    height: 11px;
    vertical-align: middle;
    margin: 2px 5px 3px 0
}

.expand-section img.plus {
    background: url(/skin/common_files/images/plus.gif) left top no-repeat
}

.expand-section img.minus {
    background: url(/skin/common_files/images/minus.gif) left top no-repeat
}

.expand-section a {
    font-weight: 700;
    text-decoration: underline
}

.nav-pages {
    white-space: nowrap;
    vertical-align: bottom;
    padding: 0;
    margin: 0
}

.nav-pages-title {
    padding-right: 10px
}

.nav-pages img {
    vertical-align: bottom;
    width: 15px;
    height: 15px
}

.nav-pages a {
    text-align: center;
    text-decoration: underline
}

.nav-pages .left-arrow img {
    background: url(/skin/common_files/images/navigation_arrow_left.gif) left top no-repeat
}

.nav-pages .right-arrow img {
    background: url(/skin/common_files/images/navigation_arrow_right.gif) left top no-repeat
}

.nav-pages .current-page {
    text-align: center;
    font-weight: 700
}

.nav-pages .right-delimiter {
    padding-right: 12px
}

h3 {
    margin: 0 0 10px;
    color: #b51a00;
    font-weight: 700;
    font-size: 12px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #9d1500
}

h3.grey {
    color: #666;
    font-size: 11px;
    border-bottom: 1px solid #ccc
}

h3.black {
    color: #010101;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #000
}

h3.red {
    border-bottom: 1px solid #acb7c7
}

h3.separator {
    margin-top: 30px
}

.img-down-direction {
    width: 7px;
    height: 6px;
    vertical-align: middle;
    background: url(/skin/common_files/images/r_bottom.gif) left top no-repeat;
    margin-right: 3px
}

.img-up-direction {
    width: 7px;
    height: 6px;
    vertical-align: middle;
    background: url(/skin/common_files/images/r_top.gif) left top no-repeat;
    margin-right: 3px
}

.noscript-warning {
    position: absolute;
    top: 10px;
    padding: 10px;
    left: 25%;
    right: 25%;
    margin: 0;
    overflow: hidden;
    border: 5px solid #ddd;
    background: #fff
}

.noscript-warning .content {
    background: url(/skin/common_files/images/icon_warning.gif) left top no-repeat;
    font-weight: 700;
    padding-left: 37px;
    min-height: 32px;
    line-height: 16px
}

.lbl {
    display: inline!important;
    color: #6d9327!important;
    font-weight: 700!important;
    width: auto!important;
    margin: 0!important;
    padding: 0!important
}

.section {
    margin: 0!important;
    padding: 0!important;
    width: auto!important
}

.blockMsg {
    padding: 0;
    margin: 0;
    min-width: 200px;
    top: 40%;
    text-align: center;
    color: #000;
    border: 3px solid #aaa;
    background-color: #fff;
    cursor: wait
}

.blockUI span.waiting {
    background: url(/skin/common_files/images/loading.gif) no-repeat #fbfbfb;
    color: #617683;
    display: inline-block;
    font-size: 18px;
    margin: 8px 5px;
    padding: 5px 0 5px 45px
}

.ui-dialog .blockOverlay {
    background: #fff!important;
    opacity: 1!important;
    filter: Alpha(Opacity=100)
}

.ui-dialog .blockMsg {
    border: 0!important
}

.menu-categories-list img.icon {
    background: url(/skin/common_files/images/dingbats_categorie.gif) left top no-repeat
}

.menu-categories-list ul li {
    padding: 4px 0 5px 20px;
    background: url(/skin/common_files/images/category_bullet.gif) 8px 5px no-repeat
}

.menu-categories-list ul li a {
    font-size: 12px
}

.menu-toner img.icon {
    background: url(/skin/common_files/images/spriteme1.png) -10px -10px no-repeat;
    height: 20px;
    width: 20px
}

.menu-ink img.icon {
    background: url(/skin/common_files/images/spriteme1.png) -10px -50px no-repeat;
    height: 17px;
    width: 30px
}

.menu-cddvd img.icon {
    background: url(/skin/common_files/images/spriteme1.png) -10px -87px no-repeat;
    height: 20px;
    width: 20px
}

.menu-tape img.icon {
    background: url(/skin/common_files/images/spriteme1.png) -10px -127px no-repeat;
    height: 20px;
    width: 20px
}

.menu-ribbon img.icon {
    background: url(/skin/common_files/images/ribbon_sm.gif) no-repeat;
    height: 20px;
    width: 20px
}

.menu-special img.icon {
    background: url(/skin/common_files/images/dingbats_categorie.gif) no-repeat;
    height: 17px;
    width: 17px
}

.arrow_list img.icon {
    background: url(/skin/common_files/images/spriteme1.png) -10px -380px no-repeat;
    height: 11px;
    width: 7px
}

.menu-help img.icon {
    background: url(/skin/common_files/images/spriteme1.png) -10px -198px no-repeat;
    height: 17px;
    width: 17px
}

.pirate-wheel img.icon {
    background-image: url(/skin/common_files/images/dingbats_wheel.gif);
    height: 20px;
    width: 20px
}

.menu-minicart .title-bar h2 {
    color: #2c3e49
}

.menu-minicart img.icon {
    height: 27px;
    width: 32px
}

.order_filter .new-button {
    background: #f7f7f7!important;
    border: 1px solid #aeaeae;
    color: #2e2e2e;
    padding: 3.5px 8px;
    height: auto;
    width: auto;
    margin-right: 15px;
    border-radius: 4px;
    font-family: arial;
    font-weight: 600;
    text-decoration: none
}

.full-mini-cart .title-bar img.icon {
    background: url(/skin/common_files/images/cart_full.gif) left top no-repeat;
    width: 18px;
    height: 13px
}

div.minicart {
    color: #112536;
    font-size: 10px
}

div.minicart img {
    width: 19px;
    height: 16px
}

div.minicart .empty b {
    line-height: 18px
}

div.minicart table {
    margin: 0 0 0 1px
}

div.minicart table tr td {
    color: #112536;
    font-size: 10px;
    padding: 1px
}

hr.minicart {
    clear: both;
    margin: 5px 0;
    padding: 0;
    height: 0
}

.ajax-minicart .title-bar {
    position: relative;
    overflow: visible
}

#content-container .ajax-minicart img.minicart-button {
    background: url(/skin/common_files/images/cart_button.gif) left top no-repeat;
    width: 38px;
    height: 21px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 4px;
    z-index: 100
}

#content-container .ajax-minicart img.minicart-button-show {
    background-position: left -21px
}

.minicart-box {
    display: none;
    position: absolute;
    left: auto;
    right: 0;
    top: 93%;
    width: 250px;
    padding: 10px 5px 10px 5px;
    border: 1px solid #99a4ad;
    background: #fff;
    white-space: normal;
    z-index: 2500;
    font-weight: 400
}

.minicart-box .progress {
    background: url(/skin/common_files/images/progress.gif) left top repeat-x;
    height: 11px
}

.minicart-box hr {
    margin-left: 5px
}

.minicart-box ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.minicart-box ul li {
    position: relative;
    margin: 0;
    padding: 6px 10px 34px 5px;
    overflow: hidden;
    white-space: normal;
    line-height: normal
}

.minicart-box ul li a.delete {
    padding-left: 10px
}

.minicart-box ul li a.delete img {
    background: url(/skin/common_files/images/delete_cross.gif) left top no-repeat;
    width: 9px;
    height: 9px
}

.minicart-box ul li a {
    text-decoration: underline;
    white-space: normal!important
}

.minicart-box .price-row {
    margin-top: 4px
}

.minicart-box input.quantity {
    width: 35px;
    text-align: center;
}
/* Beat #header input[type=text]{line-height:0} (higher specificity via the #header id), which
   otherwise collapses the line box and top-aligns the digit in the mini-cart qty field. */
#header .minicart-box input.quantity {
    line-height: normal;
}

.minicart-box .buttons-row {
    margin-top: 5px;
    margin-left: 5px;
    height: 30px
}

.minicart-box .buttons-row .light-button .button-left,
.minicart-box .buttons-row .light-button a,
.minicart-box .buttons-row .light-button div {
    font-size: 10px;
    font-weight: 400
}

.minicart-box ul.menu li.checkout-link a,
.minicart-box ul.menu li.view-cart-link a {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff
}

.minicart-box li.checkout-popup-link {
    overflow: visible;
    padding-left: 0;
    padding-top: 2px;
    padding-bottom: 2px
}

.minicart-box .checkout-popup-link a.link:active,
.minicart-box .checkout-popup-link a.link:hover,
.minicart-box .checkout-popup-link a.link:link,
.minicart-box .checkout-popup-link a.link:visited {
    text-decoration: none
}

.minicart-box .checkout-popup-link a.link {
    border: 1px solid #fff;
    z-index: 1000;
    background-color: #fff;
    padding: 4px 0 4px 5px;
    position: relative;
    outline-style: none
}

.minicart-box .checkout-popup-link a.show {
    border-top: 1px solid #99a4ad;
    border-left: 1px solid #99a4ad;
    border-right: 1px solid #99a4ad;
    border-bottom: 1px solid #fff;
    padding-right: 5px
}

.minicart-box .checkout-popup-link .link span {
    border-bottom: 1px dashed #043fa0;
    cursor: pointer
}

.minicart-box .checkout-popup-link a.link img {
    background: url(/skin/common_files/images/checkout_arrow.gif) right top no-repeat;
    width: 9px;
    height: 7px;
    cursor: pointer
}

.minicart-box .checkout-popup-link div.buttons-box {
    position: absolute;
    border: 1px solid #99a4ad;
    background: #fff;
    left: 0;
    top: 19px;
    display: none;
    padding: 10px
}

.minicart-box .minicart-checkout-button {
    background: url(/skin/common_files/images/but_flc_arrow_right.png) right top no-repeat;
    padding-right: 31px
}

.minicart-box .minicart-checkout-button a:active,
.minicart-box .minicart-checkout-button a:hover,
.minicart-box .minicart-checkout-button a:link,
.minicart-box .minicart-checkout-button a:visited {
    background: url(/skin/common_files/images/but_flc_main_left.png) no-repeat;
    line-height: 29px;
    color: #510000;
    font-weight: 700;
    font-size: 11px;
    text-decoration: none;
    float: left
}

.minicart-box .gcheckout-cart-buttons a img {
    width: inherit;
    height: inherit;
    background: 0 0
}

.minicart-box .gcheckout-cart-buttons,
.minicart-box .gcheckout-cart-buttons p,
.minicart-box .paypal-cart-button,
.minicart-box .paypal-cart-button p {
    text-align: left
}

.minicart-box .gcheckout-cart-buttons div,
.minicart-box .paypal-cart-button div {
    text-align: left;
    margin: 0
}

iframe.minicart-bg {
    position: absolute;
    display: none;
    width: 250px;
    border: 0;
    background: #fff
}

iframe.minicart-checkout-bg {
    position: absolute;
    display: none;
    border: 0;
    background: #fff
}

.help-link {
    border-bottom: 1px dashed #000;
    cursor: help;
    text-decoration: none!important
}

#tooltip {
    position: absolute;
    border: 1px solid #000;
    padding: 5px;
    background: #fff;
    top: 0;
    left: 0;
    text-align: left;
    max-width: 300px;
    z-index: 10000
}

#tooltip div,
#tooltip h3 {
    margin: 0
}

.menu-auth img.icon {
    background: url(/skin/common_files/images/spriteme1.png) -10px -272px no-repeat;
    height: 17px;
    width: 17px
}

.menu-auth input {
    width: 120px
}

.login-buttons {
    margin: 3px 0 5px
}

.login-buttons .button {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px
}

.menu-dialog .recovery {
    clear: both;
    margin-bottom: 2px
}

.menu-dialog .recovery a {
    text-decoration: underline;
    font-size: 10px
}

.menu-dialog .left {
    text-align: left
}

.menu-dialog .login-text {
    vertical-align: top
}

.small-link,
.small-note {
    color: #3c6992;
    text-decoration: none;
    font-size: 9px;
    font-family: arial, verdana, helvetica, sans-serif
}

.small {
    font-weight: 400;
    font-size: 10px
}

.small-link:hover {
    text-decoration: underline
}

.menu-news img.icon {
    background: url(/skin/common_files/images/spriteme1.png) -10px -309px no-repeat;
    height: 17px;
    width: 17px
}

.menu-dialog .subscribe {
    margin-right: 23px
}

.menu-dialog a.prev-news {
    text-decoration: underline
}

.menu-interneka img.icon {
    background: url(/skin/common_files/images/dingbats_affiliates.gif) no-repeat
}

div.popup-dialog {
    text-align: left;
    min-width: 300px
}

ul.subcategories {
    list-style: none;
    margin: 0;
    padding: 0 0 15px
}

ul.subcategories li {
    margin: 0 0 10px;
    text-align: left
}

ul.subcategories a {
    text-decoration: underline;
    font-weight: 700
}

span.subcategories {
    display: inline-block;
    vertical-align: top;
    margin: 0 8px;
    text-align: left;
    padding-bottom: 0;
    overflow: hidden
}

span.sub_categories {
    display: inline-block;
    vertical-align: top;
    margin: 3px 8px;
    text-align: left;
    padding-bottom: 0;
    overflow: hidden
}

.subcategory-image {
    float: left;
    margin: 0 10px 10px 0
}

.subcategory-descr {
    width: auto;
    padding: 0;
    margin-bottom: 20px;
    font-family: Arial;
    font-size: 16px
}

/* Category description parts — the inline <font>/<span style> tags were stripped from the DB and
   replaced with these classes, so the styling is controlled here. compat-label = the "Compatible
   Printers:" heading; compat-list = the printer/copier list. */
.compat-label { font-weight: bold; color: #0058B0; font-size: 16px; }
.compat-list  { font-size: 14px; color: #333; }

/* -- tp-readmore ------------------------------------------------------------
   Styling for the reusable character-capped expander (js/tp-readmore.js).
   Add class="tp-readmore" (optional data-chars="N", default 300) to any long block and it gets
   truncated with a clickable "....more....". Used by the footer Reviews widget; reusable on
   product descriptions.
   The toggle is red + italic + NOT bold.
   !important is deliberate here. Container link rules out-rank any sane selector this component
   could use: in the footer, `.menu-dialog .content a:link` (0,3,1) beat `a.tp-readmore-toggle:link`
   (0,2,1) and forced the text black + underlined. Since the whole point of this class is to be
   dropped into ARBITRARY containers (product descriptions next), it can't chase each one's
   ancestor selectors — it has to win outright wherever it lands. Repeat every link state so the
   global `a:link/:visited/:hover/:active` rule can't slip through either. */
a.tp-readmore-toggle,
a.tp-readmore-toggle:link,
a.tp-readmore-toggle:visited,
a.tp-readmore-toggle:active,
a.tp-readmore-toggle:hover {
    color: #cc0000 !important;
    font-style: italic !important;
    font-weight: normal !important;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
}
/* later + equal specificity, so this wins the hover underline back */
a.tp-readmore-toggle:hover { text-decoration: underline !important; }
.tp-readmore-text { display: inline; }

/* Category-page part-finder (customer/main/partfinder.tpl layout=inline): Part#-only browser, three
   dropdowns side by side in coloured boxes matching live's product_browser_toner.php —
   brand=orange (#ef7203), reman=blue (#2c5787), oem=green (#5c7d22). Scoped to .sub_category so
   none of it leaks to the front-page finder (whose own styles are all under .banner-black).
   Labels are WHITE here (on the coloured boxes), like live and like the front page. */
/* "Browse Products" heading above the finder (live had "Please Browse Products", class
   .browse_products, arial bold 18px). Matches the .browser_cat "Browse Categories" heading below. */
.sub_category .browse_products {
    font-family: arial;
    font-weight: 700;
    font-size: 18px;
    color: #000;
    margin-bottom: 10px;
}
.sub_category .pf-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* centre the group, and centre the box that wraps below */
    align-items: stretch;      /* equal-height coloured panels */
    gap: 12px;
    margin: 4px 0 20px;
}
/* Fixed 300px panels rather than stretch-to-fill: the three keep one identical width at every
   page width, so `justify-content: center` actually has room to centre them (stretching boxes
   always ate the whole row and looked left-aligned on wide screens).
   flex-grow 0 + 300px basis also sets the wrap point: 3*300 + 2*12 = 924px, so once the content
   column drops under that (~970px browser width) the OEM box moves to its own centred line
   instead of running off the right edge. It has to be a basis, not a media query — the theme
   floors the layout at ~780px, so the column itself never gets narrow enough to wrap on its own. */
.sub_category .pf-inline .pf-field {
    flex: 0 1 300px;
    min-width: 260px;
    max-width: 320px;
    padding: 8px 12px 16px;
    box-sizing: border-box;
}
.sub_category .pf-inline .pf-brand { background: #ef7203; }   /* orange */
.sub_category .pf-inline .pf-reman { background: #2c5787; }   /* blue   */
.sub_category .pf-inline .pf-oem   { background: #5c7d22; }   /* green  */
.sub_category .pf-inline .NavigationPath {
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    font-family: arial;
    margin: 2px 0 6px;
    min-height: 17px;   /* keep the three select boxes aligned even when a label wraps */
}
.sub_category .pf-inline .styled-select {
    position: relative;
    width: 100%;
}
.sub_category .pf-inline .styled-select select {
    width: 100%;
    padding: 0 6px;
    font-size: 14px;
    line-height: 1;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: #000;
    font-family: 'roboto_condensedregular', Arial, sans-serif;
}
/* Gray out a dropdown with no real choices. The finder JS already sets disabled=true whenever a
   list comes back empty (e.g. Lexmark inkjet has no OEM parts -> 2b), but a disabled <select>
   otherwise keeps its white fill and just looks active; this makes the empty state read as off. */
.sub_category .pf-inline .styled-select select:disabled {
    background: #d7d7d7;
    color: #777;
    cursor: not-allowed;
    opacity: 1;   /* override the browser's faded-but-still-white default */
}
/* leave room at the right for the "?" help icon on 2a / 2b */
.sub_category .pf-inline .pf-has-help select { width: 90%; }
/* front-page "?" help icon + hover tooltip, reused on the coloured category boxes */
.sub_category .pf-inline .pf-help {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
    line-height: 0;
    text-decoration: none;
}
.sub_category .pf-inline .pf-help svg { display: block; }
.sub_category .pf-inline .pf-help,
.sub_category .pf-inline .pf-help:link,
.sub_category .pf-inline .pf-help:visited,
.sub_category .pf-inline .pf-help:hover { color: #fff !important; text-decoration: none; }
.sub_category .pf-inline .pf-help .pf-tip {
    display: none;
    position: absolute;
    left: 16px;
    top: -2px;
    width: 120px;
    background: #a5d618;
    border: 2px solid #000;
    padding: 3px 5px;
    color: #000;
    font-size: 11px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    z-index: 100;
}
.sub_category .pf-inline .pf-help:hover .pf-tip { display: block; }

.product-details {
    position: relative;
    margin-bottom: 25px
}

.product-details .image {
    text-align: center;
    vertical-align: top;
    padding: 0;
    float: left;
    /* stock X-Cart (common_files/css/main.css) sets margin:5px 20px 5px 10px here;
       override the right margin 20px -> 10px (top/bottom/left unchanged). */
    margin: 5px 10px 5px 10px
}

.product-details .image .image-box {
    margin: 0 auto;
    padding: 0
}

.product-details .details {
    padding-left: 30px;
    /* stock right padding is 15px; reduce to 5px */
    padding-right: 5px
}

/* "Enlarge Image": use the 19x19 preview.png magnifier at live's size/padding. Stock 4.7.10
   (common_files/modules/Detailed_Product_Images/main.css) uses a tiny 13x13 inline-GIF
   magnifier with 17px padding, which looked too small next to the text. */
.dpimages-popup-link a {
    background: url(../images/preview.png) no-repeat 0 1px !important;
    padding: 5px 0 5px 25px !important;
}

/* Keep "N reviews | Write a Review" on its own line BELOW the star rating at every width.
   The star table and .reviews_order are both float:left, so without clearing, the reviews
   line pulls up beside the stars once the image column is wide enough. */
.reviews_order {
    clear: both;
}

.product-details .details .descr {
    vertical-align: top;
    padding-right: 20px;
    font-family: Arial
}

.product-details .details .save-percent-container {
    margin-left: 10px;
    width: 57px;
    height: 57px
}

.product-details .details .save {
    float: left;
    width: 57px;
    height: 29px;
    padding-top: 28px;
    padding-left: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    background: url(/skin/common_files/images/save_money.gif) left top no-repeat
}

.product-details .product-subtitle {
    padding: 23px 0 10px
}

.product-details .product-subtitle div {
    color: #b51a00;
    font-weight: 700;
    font-size: 12px;
    border: 0
}


A.collapsible-title {color: #cc230c;}
A.collapsible-title:link  {text-decoration: none; color: #cc230c; font-weight: 600; font-style: italic;}
A.collapsible-title:visited {text-decoration: none; color: #cc230c; font-weight: 600; font-style: italic;}
A.collapsible-title:hover {text-decoration: none; color: #cc230c; font-weight: 400; font-style: italic;}
A.collapsible-title:active {text-decoration: none; color: #cc230c; font-weight: 600; font-style: italic;}

.collapsible-content {
  padding: 5px 18px;
  font-size: 12px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.product-details .message {
    color: #b51a00
}

.product-details .warning-message {
    color: red
}

.product-details .customer-message {
    color: #b51a00;
    font-weight: 700
}

.product-details .quantity-row td {
    padding-top: 15px
}

.product-details .button-row {
    margin-top: 15px
}

#product-tabs-container {
    margin-bottom: 30px
}

.product-details .ask-question {
    margin-top: 16px;
    float: none
}

table.product-properties {
    width: 100%;
    margin: 0
}

table.product-properties tr td {
    padding: 2px;
    vertical-align: top
}

table.product-properties .property-name {
    width: 40%
}

table.product-properties .property-value {
    width: auto
}

table.product-properties .product-price {
    color: #010101;
    font-weight: 700;
    font-size: 12px
}

table.product-properties .product-price-value {
    color: #b51a00;
    font-weight: 700;
    font-size: 12px;
    font-family: verdana;
    white-space: nowrap
}

table.product-properties .product-market-price {
    color: #787878;
    padding-left: 5px;
    font-size: 12px;
    font-family: verdana;
    white-space: nowrap;
    font-weight: 700
}

table.product-properties .product-taxed-price {
    color: #383838;
    white-space: nowrap;
    font-weight: 400;
    vertical-align: bottom
}

table.product-properties .product-input {
    height: 25px;
    padding-right: 10px
}

table.product-properties .product-min-amount,
table.product-properties .product-one-quantity {
    font-size: 14px
}

table.product-properties .separator td {
    height: 18px
}

input.send2friend {
    width: 300px
}

textarea.send2friend {
    width: 400px
}

#send_message_box {
    margin-top: 10px
}

.products {
    margin-bottom: 5px;
    margin-top: 5px
}

.products .image {
    text-align: center;
    vertical-align: top;
    white-space: nowrap
}

.products a.see-details {
    display: block;
    text-align: center;
    text-decoration: underline
}

.product-details .product-title,
.products .product-title {
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline
}

.products .descr {
    padding: 15px 0 0;
    margin: 0
}

.products .sku {
    margin-top: 15px
}

.products .price-row {
    margin: 0;
    padding: 0;
    text-align: center
}

.products .market-price-value {
    background: url(/skin/common_files/images/spacer_black.gif) left 8px repeat-x
}

.products .price {
    font-size: 16px;
    font-family: 'source_sans_prosemibold';
    color: #010101
}

.products .price-value {
    font-weight: 700;
    font-size: 18px;
    color: #b51a00;
    font-family: Arial
}

.products .price-save {
    padding: 0;
    margin: 0;
    color: #b51a00
}

.products .taxes {
    padding: 2px 2px 2px 30px
}

.products .buy-now {
    margin: 10px 0 0
}

.products .buy-now .quantity {
    height: auto;
    white-space: nowrap;
    vertical-align: middle
}

.products .buy-now .quantity-empty {
    height: 45px
}

.products .buy-now .quantity-title {
    width: 75px;
    padding-right: 16px
}

.products .buy-now .quantity select {
    vertical-align: middle
}

.products .buy-now .out-of-stock {
    white-space: nowrap;
    font-weight: 700
}

.products .buy-now .prices {
    height: 15px;
    vertical-align: middle
}

.products .product-details-title {
    color: #b51a00;
    font-weight: 700;
    font-size: 12px
}

.products .product-price-text {
    color: #010101;
    font-weight: 700;
    font-size: 15px;
    font-family: Arial
}

.quantity-text {
    color: #818891;
    padding-left: 3px
}

.products-list .item {
    position: relative;
    margin: 0 0 45px
}

.products-list .image {
    float: left;
    position: relative;
    padding: 3px 20px 3px 10px;
    margin-right: auto;
    min-height: 170px
}

.products-list .details {
    vertical-align: top;
    padding-left: 30px;
    border: 0;
    text-align: center
}

.products-list .details hr {
    margin: 5px 5px 5px 0
}

.products-list .buy-now .center,
.products-list .buy-now .halign-center {
    margin-left: 0;
    text-align: left
}

.products-table .product-cell {
    background: #fff;
    padding: 8px;
    vertical-align: top;
    text-align: center
}

.products-table .first.products-row td.product-cell {
    padding-top: 0;
    text-align: center
}

.products-table td.product-cell-price {
    padding-top: 2px
}

.products-table td.product-cell-buynow {
    padding-top: 3px;
    vertical-align: bottom
}

.products-table td.product-cell-buynow .button-row {
    text-align: center;
    margin: 9px 0 5px
}

.products-table td.product-cell-buynow .quantity-empty {
    height: auto
}

.products-table .image {
    padding: 0;
    margin: 0;
    text-align: center
}

.products-table a.see-details {
    text-align: left;
    display: inline
}

.products-table .sku {
    margin-top: 5px
}

.products-table .product-title {
    font-size: 15px;
    font-family: 'source_sans_proregular';
    padding-bottom: 13px;
    display: inline-block
}

.products-table a.product-title:link,
.products-table a.product-title:visited {
    color: #000;
    text-decoration: none
}

.products-table a.product-title:active,
.products-table a.product-title:hover {
    color: red;
    text-decoration: underline
}

.products-table .button-row,
.products-table .buttons-row {
    margin: 0
}

.products-table .button-row button,
.products-table .buttons-row button {
    float: none
}

.products-table .buy-now {
    margin-top: 5px
}

.products-table .buy-now .quantity-title {
    width: auto;
    padding-right: 5px
}

.products-table tr.separator td {
    padding: 0;
    height: 20px
}

.adv-search table td {
    white-space: nowrap;
    padding: 3px 5px 3px 0
}

.adv-search table .data-name {
    width: 20%;
    vertical-align: top;
    color: #112536;
    font-weight: 700
}

.adv-search table .data-input {
    white-space: nowrap
}

.adv-search table .pattern {
    padding-bottom: 0
}

.adv-search table .pattern input,
.adv-search table .pattern select {
    width: 95%;
    vertical-align: bottom
}

.adv-search table .search-button {
    width: 25%;
    padding: 0
}

#adv_search_box {
    margin-bottom: 15px
}

.search-again {
    position: relative;
    margin-top: -17px;
    text-align: right;
    margin-left: 400px
}

.results-found {
    position: relative;
    width: 400px
}

td.search-extra-fields.input-row {
    white-space: normal
}

.register-note {
    color: #000;
    margin-bottom: 15px;
    line-height: 15px;
    font-family: 'source_sans_proregular'
}

.register-newbie-note {
    text-align: center;
    margin-top: 5px
}

.register-bottom-note {
    margin-top: 30px;
    padding-bottom: 45px
}

.register-ups-box {
    margin-top: 45px;
    margin-bottom: 15px
}

.register-section-title {
    height: 30px;
    vertical-align: middle
}

.register-section-title div {
    vertical-align: middle;
    padding: 2px 0;
    border-bottom: 1px solid #000
}

.register-section-title div * {
    vertical-align: middle
}

.register-sec-minimized div {
    border-bottom: 0 none
}

.register-section-title label {
    color: #262626;
    font-size: 19px;
    font-family: 'source_sans_prosemibold'
}

.register-table .register-exp-section label {
    border-bottom: 1px dashed #2c3e49
}

table.register-table .register-exp-section {
    padding-top: 16px;
    padding-bottom: 16px
}

table.register-table td.data-name {
    text-align: right;
    font-weight: 400;
    width: 30%
}

.cart .item {
    margin: 0;
    display: inline-block;
}

.cart .item .image {
    position: relative;
    padding: 3px 8px 3px 3px;
    height: 100%;
    text-align: left!important
}

.cart .details {
    vertical-align: top
}

.cart .product-title {
    text-decoration: underline
}

.cart .descr {
    padding-bottom: 15px;
    font-family: Arial
}

.cart .poptions-title {
    font-weight: 700
}

.cart .poptions-list {
    margin-bottom: 15px
}

.cart .buttons {
    position: relative;
    vertical-align: top;
    margin-top: 30px;
    height: 23px
}

.cart .buttons .buttons-row {
    margin-top: 0
}

.cart .left-buttons-row {
    vertical-align: top;
    position: absolute;
    top: 0;
    left: 0
}

.cart .right-buttons-row {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%
}

.cart .right-buttons-row .checkout-button {
    float: right
}

.cart-total-line {
    width: 50%;
    margin-left: 50%
}

.cart-total-row {
    text-align: right
}

div.shipping-method {
    color: #112536;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: right
}

th.shipping-method {
    color: #112536;
    font-weight: 700;
    text-align: left
}

.shipping-method select {
    font-weight: 400
}

.shipping-method table {
    margin: 0 0 0 auto;
    text-align: right
}

.shipping-method table td {
    font-weight: 400;
    text-align: left
}

.shipping-method tr.selected {
    background: #eee
}

.totals {
    margin: 0 0 0 auto;
    text-align: right;
    width: 30%
}

.totals td {
    padding: 3px
}

.totals .total-name {
    white-space: nowrap;
    color: #112536;
    font-weight: 700;
    padding-right: 8px;
    text-align: left
}

.totals .total-value {
    white-space: nowrap;
    color: #b51a00;
    font-weight: 700;
    text-align: right
}

.totals .total-alt-value {
    white-space: nowrap;
    text-align: right
}

.totals .total-line {
    height: 1px
}

.totals .total-line img {
    background: #000;
    width: 100%;
    height: 1px
}

.totals .total {
    white-space: nowrap;
    color: #112536;
    font-weight: 700;
    padding-right: 8px;
    text-transform: uppercase;
    text-align: left
}

.totals .total-taxes {
    font-weight: 700;
    text-align: right
}

.totals .total-tax-line {
    background-color: #eee
}

.totals .total-tax-line td {
    text-align: right;
    white-space: nowrap
}

.totals .total-tax-name {
    padding-right: 8px
}

.cart hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border-color: #d7d9e4
}

.cart-content {
    margin-bottom: 15px
}

.cart-content tr td,
.cart-content tr th {
    padding: 1px 3px;
    text-align: left;
    vertical-align: top
}

.cart-content tr td.summary-cell {
    text-align: right
}

.cart-content .cart-column-tax {
    text-align: center
}

.cart-content td.cart-column-price,
.cart-content td.cart-column-total {
    text-align: right
}

.cart-content .cart-content-text {
    color: #b51a00;
    font-weight: 700
}

.cart-content .cart-column-product {
    width: 100%
}

.cart-content input.cart-quantity {
    width: 30px
}

.cmpi-vbv-icon {
    width: 49%;
    float: left;
    text-align: center
}

.cmpi-vbv-icon img {
    width: 71px;
    height: 57px;
    background: url(/skin/common_files/images/vbv_logo.gif) left top no-repeat
}

.cmpi-mcsc-icon {
    width: 49%;
    text-align: center
}

.cmpi-mcsc-icon img {
    width: 74px;
    height: 40px;
    background: url(/skin/common_files/images/mcsc_logo.gif) left top no-repeat
}

.checkout-payments tr td {
    padding: 2px;
    text-align: left
}

.checkout-payments tr td.checkout-payment-name {
    width: 20%;
    white-space: nowrap
}

.checkout-payments tr td.checkout-payment-name label {
    font-weight: 700
}

.checkout-payments tr td.checkout-payment-descr {
    width: 80%
}

.checkout-payments tr td.checkout-payment-paypal {
    width: 100%
}

.checkout-payments tr td.checkout-payment-paypal img {
    border: 0
}

/* Checkout (One_Page_Checkout): keep the payment-methods block inside the middle column so it does
   not spill into the Order-summary column on narrower (<~1150px) screens.
   Root cause: stock puts the radio in a wide (~80%) cell and crams the method name + card-brand text
   ("Visa, MasterCard, American Express and Discover Cards") into the narrow (20%) name cell with
   white-space:nowrap, forcing it onto one ~360px line that (a) makes the auto-layout table wider
   than its column and (b) overflows the next column.
   Fix: cap the table to the column, give the name/text cell the row width (radio cell shrinks to
   fit) and let the text wrap normally (at spaces, no mid-word breaks). */
.checkout-payments {
    width: 100%;
    max-width: 100%;
}
.checkout-payments tr td.checkout-payment-name {
    width: 100%;
    white-space: normal;
}
.checkout-payments tr td.checkout-payment-name .checkout-payment-descr,
.checkout-payments tr td.checkout-payment-descr {
    white-space: normal;
}
.checkout-payments input[type="text"],
.checkout-payments input[type="password"],
.bcse-dpm-form input[type="text"],
.bcse-dpm-form input[type="password"] {
    max-width: 100%;
    box-sizing: border-box;
}

.checkout-update-button {
    float: left;
    margin: 0
}

/* ---- One_Page_Checkout "welcome" box (tonerpirate opc_main.tpl override).
   Ported 1:1 from live tonerpirate.com (alteredCart Checkout_One checkout_one.css) so the test
   matches live exactly: full-width grey rounded container spanning the three checkout columns,
   live checkout_one_lock.png padlock floated left, "Welcome..." heading, New/Returning <ul> on the
   left, and the login box (#checkout_login) on the right using the site's standard main-button. ---- */
#checkoutTopContainer { margin: 0 auto 5px; max-width: 1050px; }
.contentGroupContainer {
    margin-top: 10px;
    border: 2px solid #999;
    background-color: #F5F5F5;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 8px 5px;
    font-family: Arial;
    /* live inherits its 14px/20px Arial base from <body>; set it explicitly here so the box text
       (heading via font-size:larger, bullets, login labels) sizes identically to live. */
    font-size: 14px;
    line-height: 20px;
    color: #000;
}
#checkoutLockImage {
    margin: 6px 20px;
    float: left;
}
.checkoutWelcome {
    font-size: larger;   /* = ~larger than the 14px base, exactly as on live */
    font-weight: 700;
}
#checkoutTopContainer ul {
    margin: 8px 0 4px;
    padding-left: 20px;
    /* no font-size/color override — inherit the 14px Arial base like live */
}
#checkoutTopContainer ul li { margin-bottom: 4px; }
#checkoutLoginBox { font-family: Arial; }
#checkout_login td { padding: 1px 4px; vertical-align: middle; }
/* forgot-password link sits inline, to the right of the Sign in button.
   12px, up from 10px (2026-08-08) - 10px was small enough to be hard to hit and
   hard to read next to a 14px form. */
.opc-forgot-link {
    font-size: 12px;
    margin-left: 12px;
    white-space: nowrap;
    vertical-align: middle;
}
/* username/password fields sized to match live exactly: 222x27, 14px, 2px pad, 1px #bbb, square.
   Two IDs (#checkoutTopContainer #checkout_login) to out-specify the theme's
   `div.checkout-container #center input[type=text]` rule that otherwise forces 12px/18px. */
#checkoutTopContainer #checkout_login input[type="text"],
#checkoutTopContainer #checkout_login input[type="password"] {
    width: 222px;
    max-width: 100%;
    height: 27px;
    padding: 2px;
    border: 1px solid #bbb;
    border-radius: 0;
    font-size: 14px;
    line-height: normal;
    font-family: Arial;
    box-sizing: border-box;
}
#checkout_login a { color: #527c00; }
/* ---- logged-in greeting (shown in place of the login box once signed in) ---- */
#checkoutTopContainer .opc-signedin-note {
    margin: 8px 0 4px;
    font-size: 14px;
    line-height: 20px;
    color: #000;
}
/* right column: guest login form floats next to the left text (like live); the logged-in greeting
   floats to the far RIGHT of the box so it isn't crowding the left copy. */
.opc-authcol { float: left; }
.opc-authcol-right { float: right; margin-right: 25px; text-align: left; }
.opc-greeting { font-family: Arial; padding-top: 2px; }
.opc-greeting-hello {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #333;
}
.opc-greeting-name { color: #4c6923; }
.opc-greeting-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.opc-greeting-links li { margin: 0 0 8px; }
.opc-greeting-links a {
    display: inline-block;
    font-size: 15px;
    color: #4c6923;
    text-decoration: none;
}
.opc-greeting-links a::before {
    content: "\203A";
    margin-right: 8px;
    font-weight: 700;
    color: #4c6923;
}
.opc-greeting-links a:hover { text-decoration: underline; }
/* The two links line up under the greeting, arrows flush with its first letter.
   Both of the rules above lose to something further down the merged bundle, which is why this
   block repeats them at a weight that wins rather than editing them in place:

     #checkoutTopContainer ul { padding-left: 20px }        (1,0,1) beats .opc-greeting-links (0,1,0)
     @media (min-width:761px) { #checkoutTopContainer .opc-authcol { text-align: center } }

   The centering is the one that actually looked broken. text-align centres each link inside its
   own full-width <li>, so "View profile" and "Sign out" started at DIFFERENT x positions - 11px
   apart, purely because the labels are different lengths - and their > arrows stepped in and out.
   Measured before: 1060.8 and 1071.9; after: both 998.9, level with the "G" of "Greetings".

   text-align has to be re-stated on these two elements rather than on an ancestor: the centering
   is inherited from .opc-authcol, and inheritance only applies where no rule targets the element
   itself. The ul's margin is deliberately left alone - it comes from the same
   `#checkoutTopContainer ul` rule and controls the vertical gap, which was not the problem. */
#checkoutTopContainer .opc-greeting,
#checkoutTopContainer .opc-greeting-links {
    text-align: left;
}

#checkoutTopContainer .opc-greeting-links {
    padding-left: 0;
}

/* "Name and address" column: style B typography (14px bold brand green) + tighter, artifact-like
   spacing so the form isn't so long. The required "*" (.star) carried a 31px line-height that
   inflated every label row to 31px (~13px dead gap above each field); normalizing it + a small
   label margin + compact field gaps hugs each title to its field. #opc_profile (1 id) out-specifies
   the theme's `div.opc-container label` (12px) default. */
#opc_profile label {
    font-family: Arial, Helvetica, sans-serif;   /* artifact B label: Arial 14px bold */
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    color: #4c6923;
    margin: 0;
    padding: 0;
    border: 0;
}
/* The edit-mode address bar (shown after clicking the edit pencil) carries two checkbox labels,
   "Save as a new address" / "Update existing address". They're <label>s inside #opc_profile, so the
   big 14px-bold-green rule above caught them - two oversized lines overflowed the compact bar and
   clipped/overlapped. Keep these small + normal-weight so they fit. */
#opc_profile .address-book-link label.save-new,
#opc_profile .address-book-link label.update-existing {
    font-size: 12px;
    font-weight: 400;
    color: #2c3e49;
    line-height: 1.5;
}
/* Edit-mode "Save as new / Update existing" + Address-book bar: a white box (like the summary bar),
   holding the two checkboxes and the green Address-book pill. Height auto (theme clips it otherwise). */
#opc_profile #personal_details .address-book-link {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid #e3e3e0;
    border-radius: 4px;
    margin-bottom: 10px;
}
#opc_profile .data-name {
    line-height: normal;
    margin-bottom: -3px;   /* pulls each field up tight under its label */
}
#opc_profile .data-name .star {
    line-height: 1;
    font-size: 14px;
    vertical-align: middle;
}
/* First field-list in the address-book column: theme puts 15px top padding on
   `fieldset.registerform ul.first`; trim it to 5px here (scoped to checkout, other pages unchanged). */
#opc_profile fieldset.registerform ul.first {
    padding-top: 5px;
}
/* Customer-notes character counter (opc_summary.tpl override): shows N/500, turns red near the cap. */
.checkout-customer-notes .notes-counter {
    margin-top: 2px;
    font-size: 11px;
    color: #8a8a8a;
    text-align: right;
}
.checkout-customer-notes .notes-counter.near-limit {
    color: #c0392b;
    font-weight: bold;
}
/* Order-verification notice shown when "Ship to a different address" is ticked (address_info.tpl
   override): amber warning, with a small notice icon in front of the text. */
.ship-diff-notice {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 10px;
    padding: 8px 10px;
    background: #fff8e1;
    border: 1px solid #f0d98c;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #7a5b12;
}
.ship-diff-notice .ship-diff-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;   /* nudge to sit level with the first line of text */
}
/* field-row spacing lives on the <li> (single-field / fields-group): drop its 10px bottom padding
   and use a 4px bottom margin instead. field-container margin zeroed so the gap is exactly 4px. */
#opc_profile .field-container { margin-bottom: 0; }
#opc_profile li.single-field,
#opc_profile li.fields-group {
    padding-bottom: 0;
    margin-bottom: 8px;
}
/* Centre the three columns as a group. They're floated (left-aligned) inside #center-main, so while
   the welcome box above centres, the columns hugged the left with a gap on the right. Flexbox with
   justify-content:center centres them; flex-wrap makes them drop one at a time as the window narrows.
   min-width:0 clears the theme's `ul#opc-sections{min-width:1000px}` floor, which otherwise kept the
   flex container 1000px wide even on a 600px screen - so the 2nd column never wrapped (it overflowed
   instead). Now the container follows the available width and columns wrap 3rd-then-2nd. */
ul#opc-sections {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    min-width: 0;
}
/* "Name and address" column: hold it between 350px and 390px instead of letting it scale freely
   with the viewport (the three opc-section columns are percentage-width floats). */
#opc-sections > li.opc-section:first-child {
    min-width: 350px;
    max-width: 390px;
    margin-right: 15px;   /* column gap: was 25px */
}
/* order-summary line quantity rendered as a multiplication sign ("&times; 2"): muted operator look */
#opc_summary .cart-content .cart-qty-x {
    color: #8a8a8a;
    font-weight: 400;
    padding-right: 1px;
}
/* order-summary cart lines: 11px text (was 10px), and tighter rows - 5px top/bottom (was 10px).
   #opc_summary out-specifies the theme's `table.cart-content tr td` rule. */
#opc_summary table.cart-content tr td {
    font-size: 11px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#opc_summary .cart-content a {
    font-size: 11px;
}
/* order-summary itemised total lines (Subtotal, Shipping cost, Tax): +1pt, 12px -> 13px, on both the
   left label (.total-name) and the right dollar value (.total-value). tr:not(.total) excludes the
   grand Total line (22px), which is left as-is. */
#opc_summary .cart-totals table.totals tr:not(.total) td.total-name,
#opc_summary .cart-totals table.totals tr:not(.total) td.total-value {
    font-size: 13px !important;
}
/* Checkout policies scroll box (opc_summary.tpl override): a compact, scrollable window that shows the
   full Return Policy (first) and Terms & Conditions above the Submit-order button, so the customer
   actually sees them - needed to defend disputes. Content is the live help-page langvars, whose HTML
   carries page-sized inline fonts (16px blue headings etc.); cap those so the policy fits the column. */
.checkout-policies { margin: 12px 0; }
.checkout-policies .checkout-policies-intro { margin: 0 0 5px; font-size: 12px; color: #555; }
.checkout-policies .policy-scroll {
    height: 165px;
    overflow-y: auto;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: #fff;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: #333;
}
.checkout-policies .policy-heading {
    margin: 12px 0 4px;
    font-size: 12px;
    font-weight: bold;
    color: #4c6923;
}
.checkout-policies .policy-scroll > .policy-heading:first-child { margin-top: 0; }
.checkout-policies .policy-body,
.checkout-policies .policy-body * {
    font-size: 11px !important;
    line-height: 1.5 !important;
}
.checkout-policies .policy-body p { margin: 0 0 6px; }
/* Submit-order button locked until the policy checkbox is ticked. Only VISUALLY disabled (greyed,
   not-allowed) - it still receives clicks so clicking it can prompt the shopper to tick the box (a
   real disabled button swallows the click and gives no feedback). JS in opc_summary.tpl toggles it. */
#btn_box button.btn-locked,
.place-order-button button.btn-locked {
    opacity: 0.5;
    filter: grayscale(45%);
    cursor: not-allowed;
}
/* Centre the acceptance line and the hint under it. */
#checkout_form .terms_n_conditions { text-align: center; }
/* Hint under the checkbox. Hidden by default - it only appears when the shopper clicks the locked
   Submit button without ticking the box (the .terms-flash state set by the JS), then clears once the
   box is ticked. */
.terms-hint { display: none; margin: 5px 0 0; font-size: 12px; color: #c0392b; font-weight: bold; }
.terms_n_conditions.terms-flash .terms-hint { display: block; }
/* Emphasis on the checkbox row when the shopper clicks the locked button without ticking the box. */
.terms_n_conditions.terms-flash {
    background: #fff8e1;
    outline: 2px solid #e0a800;
    outline-offset: 3px;
    border-radius: 4px;
}
@keyframes tp-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.terms_n_conditions.shake { animation: tp-shake 0.4s ease-in-out; }

/* middle column (Shipping method + Payment method) held between 300px and 325px */
#opc-sections > li#opc_shipping_payment {
    min-width: 300px;
    max-width: 325px;
    margin-right: 15px;   /* column gap: was 25px */
}
/* right column (Order summary) held between 350px and 370px */
#opc-sections > li#opc_summary_li {
    min-width: 350px;
    max-width: 370px;
}
/* shipping-methods and payment-methods boxes: same light green as the address card (rows are
   transparent -> all methods sit on the green). The grey came from these container divs. */
#opc_shipping .opc-shipping-options,
#opc_payment .opc-payment-options {
    background: #f6f9f2;
    border-color: #e7eede;
}
/* The expanded card-form sits in a table cell (tr.payment-details > td) that stock leaves white with
   10px padding, drawing a white frame around the green card-field box. Colour the cell the same light
   green so the whole payment area is one solid colour - only the input fields stay white. */
#opc_payment tr.payment-details > td {
    background: #f6f9f2;
}
/* Bump the shipping-method and payment-method text (and the card-form input fields) up 1 point:
   12px -> 13px. !important is needed because the theme's `ul#opc-sections li.opc-section div`
   (specificity 1,1,3) otherwise pins every description / field-wrapper div to 12px. Left untouched:
   the serif section headings (h2, outside these containers), the red required-* (span.star, 22px),
   the small "Expiration" note (<small>) and the radio inputs - none are the "text" being enlarged. */
#opc_shipping .opc-section-container,
#opc_shipping .opc-section-container div,
#opc_shipping .opc-section-container p,
#opc_shipping .opc-section-container td,
#opc_shipping .opc-section-container label,
#opc_payment .opc-payment-options,
#opc_payment .opc-payment-options div,
#opc_payment .opc-payment-options p,
#opc_payment .opc-payment-options td,
#opc_payment .opc-payment-options label,
#opc_payment td.checkout-payment-name label,
#opc_payment .checkout-payment-descr {
    font-size: 13px !important;
}
/* Card-form fields: the DPM inputs carry no type="text" attribute, so target inputs generically and
   just exclude the non-text controls (radios keep their 11px, which is invisible anyway). */
#opc_shipping .opc-section-container input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#opc_shipping .opc-section-container select {
    font-size: 13px !important;
}
/* Credit-card information fields: larger text so typed card details read clearly. These are the only
   text inputs/selects in the payment box (the DPM card form). */
#opc_payment .opc-payment-options input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#opc_payment .opc-payment-options select,
#opc_payment .opc-payment-options textarea {
    font-size: 16px !important;
}
/* The 16px Expiration selects sat low: the DPM module CSS (.bcse-dpm-form select {padding:.5rem;
   height:2.5rem !important}, ~5px padding / 25px tall, specificity 1,2,2) left the content box
   shorter than the 16px value, so it overflowed toward the bottom. Two IDs (#opc_payment
   #bcse-dpm-form) out-specify that rule; trim the vertical padding so the value centres in the field. */
#opc_payment #bcse-dpm-form select {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/* Card fields: show the placeholder prompts (Cardholder's name / Card number / CVV2) in clear grey so
   they read as "to be filled in", not as already-entered data. Separate rules per vendor prefix so one
   unknown pseudo-element can't drop the whole group. */
#bcse-dpm-form input::placeholder { color: #8a8a8a; opacity: 1; }
#bcse-dpm-form input::-webkit-input-placeholder { color: #8a8a8a; }
#bcse-dpm-form input::-moz-placeholder { color: #8a8a8a; opacity: 1; }
#bcse-dpm-form input:-ms-input-placeholder { color: #8a8a8a; }
/* Expiration selects: grey the text while the "Month"/"Year" placeholder option is still selected
   (JS toggles .is-placeholder), and flash a red border if the shopper tries to submit without a date.
   Grey applies to the CLOSED select only - the real digit options stay black when the list is open
   (the placeholder option itself stays grey). Both option rules cover the two browser models for
   which colour the closed display uses (the select's, or the selected option's). */
#opc_payment #bcse-dpm-form select.is-placeholder { color: #8a8a8a; }
#opc_payment #bcse-dpm-form select.is-placeholder option { color: #000; }
#opc_payment #bcse-dpm-form select.is-placeholder option[value=""] { color: #8a8a8a; }
#bcse-dpm-form select.tp-cc-flash {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25);
}
/* Required-field asterisk (span.star) in the payment fields: match the address-book fields in the
   first column (#opc_profile .data-name .star = 14px). */
#opc_payment .opc-payment-options .star {
    font-size: 14px !important;
}
/* Purchase Order (and any data-name/value payment fields): tighten the gap between each field label
   and its input. The gap came from the label's 5px bottom margin AND the 18px required-* inflating the
   label's line box; give the label row a fixed 16px line height (the * keeps its 18px glyph but no
   longer stretches the row) and drop the label margin. */
#opc_payment .opc-payment-options .data-name {
    line-height: 16px;
    margin-bottom: 0;
}
#opc_payment .opc-payment-options .data-name label {
    margin-bottom: 0;
    line-height: 16px;
}
#opc_payment .opc-payment-options .data-name .star {
    font-size: 14px;
    line-height: 1;          /* same asterisk treatment as the first-column address fields */
    vertical-align: middle;
}
/* Shipping method names are 11px in stock; the +1pt bump above over-shot them to 13px. Reset the
   shipping names to 12px (higher specificity than the blanket .opc-section-container rule above). */
#opc_shipping table.checkout-shippings td.shipping-name,
#opc_shipping table.checkout-shippings td.shipping-name label {
    font-size: 12px !important;
}
/* Indent every shipping-method row 5px from the left edge of the green box (first cell = the
   radio, or the name cell when radios are hidden). */
#opc_shipping table.checkout-shippings td:first-child {
    padding-left: 5px;
}
/* Same 5px left padding on the left cell of each payment-method row (stock .checkout-payments
   td padding is 2px; the radio sits in the first cell). */
#opc_payment table.checkout-payments td:first-child {
    padding-left: 5px;
}
/* Two paired rows (see the address_fields.tpl override), sharing one column grid:
       [ City ............ ][ State   ]
       [ Zip ............. ][ Country ]
   Right column is a fixed 20 characters; the left column takes whatever is left. */
#opc_profile li.opc-city-field,
#opc_profile li.opc-zip-field {
    width: calc(100% - 20ch - 12px);
    margin-right: 10px;
}
#opc_profile li.opc-state-field,
#opc_profile li.opc-country-field {
    width: 20ch;
    margin-right: 0;
}
/* ---- Logged-in checkout profile: the saved-address summary (profile_details_html.tpl).
   Stock renders it at 12px with a plain blue "Address book" text link. Enlarged and restyled:
   bigger address text, emphasised name line, and the Address-book link as a brand-green pill. ---- */
/* NOTE the #opc_profile prefix throughout: the theme's `ul#opc-sections li.opc-section div` rule
   carries an ID (specificity 1,1,3) and forces 12px on these lines, so a class-only selector loses.
   #opc_profile (the wrapping id) gives our rules the ID they need to win. */
/* ============================================================================
   CHECKOUT TYPOGRAPHY - "Option D" (Editorial): serif section headings over a Helvetica
   body, all web-safe system fonts (no Google Fonts / no downloads).
   ============================================================================ */
/* body text: Helvetica-first (falls back to Arial on systems without Helvetica) */
#opc-sections,
#opc-sections li.opc-section {
    font-family: Helvetica, Arial, sans-serif;
}
/* the four column headings: Name and address / Shipping method / Payment method / Order summary */
#opc-sections h2 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    letter-spacing: .1px;
}
/* welcome-box title stays Arial (the box is a 1:1 port of live tonerpirate.com, which uses Arial) */
#checkoutTopContainer .checkoutWelcome {
    font-family: Arial, Helvetica, sans-serif;
}

#opc_profile .opc-checkout-profile {
    font-size: 14px;
    color: #2c3e49;
    line-height: 1.5;
}
/* Option D card, tinted: a very light shade of the menu-bar green (#4c6923) as the address bg.
   Shade "C" - lighter than the first pass. */
#opc_profile .opc-checkout-profile .opc-section-container {
    background: #f6f9f2;
    border: 1px solid #e7eede;    /* a slightly deeper tint for the edge */
    border-radius: 5px;
    padding: 12px 14px;
}
#opc_profile .opc-checkout-profile .address-line { font-size: 14px; margin: 3px 0; }
/* first address line = the customer's name: serif, for hierarchy (Option D) */
#opc_profile .opc-checkout-profile .opc-section-container .address-line:first-child {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: #2c3e49;
    margin-bottom: 7px;
}
#opc_profile .opc-checkout-profile h3 {
    font-size: 14px;
    font-weight: 700;
    color: #24404f;
    margin: 12px 0 4px;
}
/* the "Address book" header bar - Option D: white, not the old blue-grey */
#opc_profile .opc-checkout-profile .address-book-link {
    background: #ffffff;
    border: 1px solid #e3e3e0;
    border-radius: 4px;
    padding: 3px 5px;
    margin-bottom: 10px;
    overflow: hidden;   /* contain the floated edit-pencil */
}
/* "Address book" rendered as a pill button (was a plain blue underlined text link) */
#opc_profile .address-book-link .popup-link a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #4c6923;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 5px 13px 5px 11px;
    border-radius: 4px;
    line-height: 1;
    transition: background .15s ease;
}
#opc_profile .address-book-link .popup-link a:hover {
    background: #3c5320;
    color: #fff;
    text-decoration: none;
}
/* book icon from a real SVG file (an inline data: URI got mangled by X-Cart's CSS merger) */
#opc_profile .address-book-link .popup-link a::before {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background: url(../images/icon-addressbook.svg) center/contain no-repeat;
}

/* Card-brand icons shown under "Credit or Debit Card" in place of the text
   "Visa, MasterCard, American Express and Discover Cards".
   The markup is a bare <span class="cc-brand-icons"> stored in
   xcart_payment_methods.payment_details (rendered raw by payment_methods.tpl), so the image path
   lives here in CSS rather than being hardcoded into database content.
   cards_line.png is 197x23 and holds VISA | MasterCard | Amex | Discover | BANK. The store takes no
   bank/e-check payments, so the width is clipped to 158px - the blank gutter measured at x=157-159 -
   which drops the BANK logo cleanly without needing a second image file. */
.cc-brand-icons {
    display: inline-block;
    width: 158px;
    height: 23px;
    background: url(../images/cards_line.png) no-repeat 0 0;
    vertical-align: middle;
    margin-top: -3px;   /* nudge the card strip up to sit level with the method label */
}
/* Put the card-brand icons on the same line as the "Credit or Debit Card" label instead of the line
   below it. The icons live in a block-level .checkout-payment-descr wrapper, which forces the break;
   make that wrapper inline-block so it flows after the label. Scoped with :has() to the card-icon
   row so other payment methods' description text keeps its own line. */
#opc_payment td.checkout-payment-name .checkout-payment-descr:has(.cc-brand-icons) {
    display: inline-block;
    width: auto;            /* theme sets .checkout-payment-descr to 80% - shrink-wrap to the icons */
    vertical-align: middle;
    margin-left: 2px;       /* small gap; the label is now 13px, so keep this tight or the icons wrap */
}
/* Payment and shipping radios are pulled up 3px by a global form rule; reset to 0 so each lines up
   with its method label. */
#opc_payment table.checkout-payments input[type="radio"],
#opc_shipping table.checkout-shippings input[type="radio"] {
    margin-top: 0;
}
/* Plain-text payment descriptions (e.g. Purchase Order's "Authorized Accounts Only") go on the same
   line as the method name, wrapped in parentheses. The card-brand icons keep their own rule above and
   are excluded here (:not(:has(*)) = descr with no child elements = text-only). */
#opc_payment td.checkout-payment-name .checkout-payment-descr:not(:has(*)) {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin-left: 6px;
    margin-top: -3px;   /* sit level with the method label, like the card strip */
    white-space: nowrap;
}
/* Negative margins pull the parens tight against the text: the template indents the descr value, so
   the whitespace that a block would trim collapses to one space once "(" / ")" sit beside it. The
   -0.3em (~one space) closes that gap so it reads "(Authorized Accounts Only)". */
#opc_payment td.checkout-payment-name .checkout-payment-descr:not(:has(*))::before { content: "("; margin-right: -0.3em; }
#opc_payment td.checkout-payment-name .checkout-payment-descr:not(:has(*))::after  { content: ")"; margin-left: -0.3em; }

/* The personal-details box (grey fieldset) had padding-bottom:0, so the Submit button's bottom edge
   landed exactly on the box's bottom edge - the button appeared to sit on the border rather than
   inside it. Give the box some floor so the button clears it. */
/* Edit form (after clicking the pencil): the whole field box takes the same light green as the
   summary address card, so "name/address" fields sit on green while the checkboxes bar above stays
   clear. padding-bottom keeps the Save button off the border. */
#opc_profile #personal_details {
    background: #f6f9f2;
    border: 1px solid #e7eede;
    border-radius: 5px;
    padding: 24px 12px 14px;   /* just enough top room for the cancel-X to clear the white bar */
    position: relative;        /* positioning context for the cancel-X in the corner */
}
/* cancel-X (close): pulled OUT of the white bar and pushed snug into the green box's top-right
   corner (offsets are relative to the white bar, tuned to land at the fieldset corner). */
#opc_profile #personal_details .address-book-link .buttons-box {
    position: absolute;
    top: -18px;                /* up into the thin green header strip, clear of the white bar */
    right: -8px;               /* out to the fieldset's right padding -> the corner */
    margin: 0;
}
/* Address-book pill: vertically centred in the white bar (checkboxes stack on the left).
   Position the pill <a> itself (not the .popup-link wrapper, whose line-box added a ~10px offset). */
#opc_profile #personal_details .address-book-link .popup-link a {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
/* the field-list <ul>s (billing address, account/email, promotional-news) carry their own grey
   #f5f5f5 background from the theme, which covered the green in patches - clear them so everything
   sits directly on the green card. */
#opc_profile #personal_details ul,
#opc_profile #personal_details .address-book-content {
    background: transparent;
}

/* Promotional News: a full-width call-out box matching the "Ship to a different address" box
   (same width, padding, slate styling). The register-newslist <ul> carried a 15px side inset that
   made the row narrower than ship2diff; removed so it spans the full column. */
#opc_profile ul.register-newslist {
    padding: 0;
    margin: 12px 0;
    list-style: none;
}
#opc_profile li.news-register-item {
    padding: 0;
    margin: 0;
}
#opc_profile li.news-register-item > label {
    display: block;
    position: relative;
    padding: 3px 10px 3px 29px;   /* left padding reserves the checkbox column (as ship2diff) */
    text-indent: 0;
    background: #e9eff4;
    border: 1px solid #9db4c6;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #24404f;
    cursor: pointer;
}
#opc_profile li.news-register-item > label:hover {
    background: #dce6ee;
    border-color: #5b7f99;
}
#opc_profile li.news-register-item input[type="checkbox"] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 13px;
    height: 13px;
    accent-color: #24404f;
    cursor: pointer;
}
/* News-list description sits inline in parentheses after the list name (inside the <label>),
   so it must shed the label's bold styling. */
#opc_profile .news-register-item-descr {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    color: #56646d;
}

/* "Ship to a different address" — pulled out as a tinted, bordered call-out so it reads as a
   decision rather than just another label. The <label> wraps the checkbox + text, so it becomes
   the box itself; the wrapper's 15px indent is removed so it lines up with the fields. */
#opc_profile .optional-label {
    padding: 0;
    margin: 12px 0;
}
#opc_profile label[for="ship2diff"] {
    display: block;
    position: relative;
    padding: 3px 4px 3px 29px;    /* left padding reserves the checkbox column */
    text-indent: 0;               /* theme sets -15px here (hanging indent) -> text ran under the box */
    background: #e9eff4;          /* slate-blue: deliberately off-palette from the green labels */
    border: 1px solid #9db4c6;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #24404f;
    cursor: pointer;
}
#opc_profile label[for="ship2diff"]:hover {
    background: #dce6ee;
    border-color: #5b7f99;
}
/* Pinned absolutely rather than laid out inline: the theme forces position:relative + top:-2px on
   this input, and in normal/flex flow the control rendered wider than its own layout box and ran
   over the text. Absolute positioning inside the label's reserved left padding is deterministic. */
#opc_profile label[for="ship2diff"] input[type="checkbox"] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);   /* exact vertical centring at any box height */
    margin: 0;
    width: 13px;
    height: 13px;
    accent-color: #24404f;
    cursor: pointer;
}

/* Password + Confirm password share one row, 50/50 (both field-containers live in a single <li>). */
#opc_profile li.opc-password-pair {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
#opc_profile li.opc-password-pair > .field-container {
    flex: 1 1 0;
    min-width: 0;
}
#opc_profile li.opc-password-pair input[type="password"] { width: 100%; }
/* The confirm field trails a 15px validation mark that otherwise wraps below the input and adds
   ~15px of dead height. Pin it in the gutter so it never affects layout. */
#opc_profile li.opc-password-pair input#passwd2 { width: calc(100% - 20px); }
#opc_profile li.opc-password-pair .data-value { position: relative; }
#opc_profile li.opc-password-pair .validate-mark {
    position: absolute;
    right: 0;
    top: 8px;
    line-height: 0;
}

#opc_profile li.opc-city-field input[type="text"],
#opc_profile li.opc-zip-field input.zipcode,
#opc_profile li.opc-state-field select,
#opc_profile li.opc-state-field input[type="text"],
#opc_profile li.opc-country-field select {
    width: 100%;
    box-sizing: border-box;
}
/* text fields: match artifact B exactly — Arial 12px, 26px tall (selects 28px), 2px 6px padding,
   1px #bbb square border, white, #2c3e49 text. Two IDs (#opc-sections #opc_profile) to out-specify
   the theme's `div.checkout-container #center input` rule (spec 1,2,2) that forces height:18px. */
#opc-sections #opc_profile .data-value input[type="text"],
#opc-sections #opc_profile .data-value input[type="password"],
#opc-sections #opc_profile .data-value input[type="tel"],
#opc-sections #opc_profile .data-value input[type="email"] {
    height: 21px;
    margin: 4px 0 0;
    padding: 0 0 0 5px;
    font: 400 13px/normal Arial, Helvetica, sans-serif;
    color: #2c3e49;
    border: 1px solid #bbb;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}
#opc-sections #opc_profile .data-value select {
    height: 21px;   /* same as the text inputs */
    margin: 4px 0 0;
    padding: 0 0 0 5px;
    font: 400 13px/normal Arial, Helvetica, sans-serif;
    color: #2c3e49;
    border: 1px solid #bbb;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}

/* stack the right column (login box / greeting) under the left text on narrow viewports */
@media (max-width: 760px) {
    #checkoutTopContainer .contentGroupContainer > div[style*="float"],
    #checkoutTopContainer .opc-authcol {
        float: none !important;
        margin-right: 0 !important;
    }
}

.order-placed-msg {
    margin: 20px 0 10px;
    padding: 0;
    font-size: 13px;
    text-align: center
}

body.payment-wait {
    text-align: center
}

body.payment-wait .payment-details-title,
body.payment-wait .payment-wait-title {
    border-top: 30px solid #d0ddeb
}

body.payment-wait h1 {
    display: block;
    padding: 40px 0 0;
    border-top: 1px solid #d0ddeb;
    margin-top: 1px;
    color: #2c3e49
}

body.payment-wait img.payment-wait-image {
    background: url(/skin/common_files/images/progress.gif) repeat-x;
    width: 350px;
    height: 11px;
    margin-top: 10px
}

.help-index {
    list-style: none;
    padding: 0;
    margin: 0
}

.help-index li {
    margin: 0;
    padding: 10px 0 0
}

.help-index li.first-item {
    padding-top: 0
}

.help-usps-test-dir {
    text-decoration: underline;
    margin-bottom: 15px
}

.images-viewer {
    text-align: center;
    margin: 10px 0
}

.images-viewer-list {
    position: relative;
    white-space: nowrap
}

.images-viewer-list .side-arrow {
    position: absolute;
    top: 0;
    display: block;
    width: 10px;
    height: 54px;
    text-decoration: none;
    outline-style: none
}

.images-viewer-list .left-arrow {
    text-align: left;
    left: 0
}

.images-viewer-list .right-arrow {
    padding-left: 3px;
    text-align: right;
    right: 0
}

.images-viewer-list .side-arrow img {
    width: 7px;
    height: 100%
}

.images-viewer-list .left-arrow .enabled {
    display: block;
    background: url(/skin/common_files/images/arrow_left.gif) left center no-repeat
}

.images-viewer-list .left-arrow .disabled {
    display: block;
    background: url(/skin/common_files/images/arrow_left_disabled.gif) left center no-repeat
}

.images-viewer-list .hidden {
    display: none
}

.images-viewer-list .right-arrow .enabled {
    display: block;
    background: url(/skin/common_files/images/arrow_right.gif) left center no-repeat
}

.images-viewer-list .right-arrow .disabled {
    display: block;
    background: url(/skin/common_files/images/arrow_right_disabled.gif) left center no-repeat
}

.images-viewer-icons {
    text-align: left;
    padding: 0;
    margin: 0 10px;
    overflow: hidden
}

.images-viewer-icons a {
    display: block;
    border: 1px solid #fff;
    padding: 0;
    margin: 0 10px;
    float: left;
    outline-style: none;
    background: #eee;
    text-align: center;
    vertical-align: middle
}

.images-viewer-icons a.selected {
    border: 1px solid #215485
}

.images-viewer-icons a:hover {
    border: 1px solid #ccc
}

.images-viewer-icons img {
    margin: 1px;
    vertical-align: middle;
    border: 0
}

.order-invoice {
    background: #fff
}

.invoice-company-icon {
    text-align: right;
    vertical-align: top;
    padding-top: 30px
}

.invoice-data-box {
    width: 100%;
    padding-left: 30px
}

.invoice-data-box table {
    width: 100%
}

.invoice-data-box table tr td {
    padding: 2px;
    vertical-align: top
}

.invoice-title {
    font-weight: 700;
    font-size: 28px;
    text-transform: uppercase
}

.invoice-data-box table tr td.invoice-right-info {
    text-align: right;
    vertical-align: bottom
}

hr.invoice-line {
    margin: 2px 0 17px;
    border-bottom: 2px solid #58595b
}

.invoice-personal-info {
    width: 45%;
    margin-bottom: 15px
}

.invoice-personal-info tr td {
    padding: 0
}

.invoice-personal-info tr td strong {
    white-space: nowrap
}

.invoice-address-box {
    width: 100%;
    margin-bottom: 30px
}

.invoice-address-title {
    width: 45%;
    height: 25px
}

td.invoice-line {
    vertical-align: top;
    padding: 0;
    height: 4px
}

td.invoice-line img {
    height: 2px;
    width: 100%;
    background: #58595b
}

.invoice-address-box table {
    width: 100%
}

.invoice-address-box table tr td {
    padding: 0
}

.invoice-address-box table tr td strong {
    white-space: nowrap
}

.invoice-customer-notes {
    padding-top: 30px
}

.invoice-customer-notes p {
    font-size: 14px;
    font-weight: 700;
    text-align: center
}

.invoice-customer-notes div {
    border: 1px solid #cecfce;
    height: 50px;
    overflow: hidden;
    padding: 5px
}

.invoice-bottom-note {
    text-align: center;
    padding-top: 30px;
    font-size: 12px
}

p.invoice-products-title {
    font-size: 14px;
    font-weight: 700;
    text-align: center
}

.invoice-products {
    width: 100%;
    background: #000
}

.invoice-products tr td,
.invoice-products tr th {
    background: #fff
}

.invoice-products tr th {
    padding: 3px;
    background: #ccc;
    white-space: nowrap
}

.invoice-products tr th.invoice-quantity-column,
.invoice-products tr th.invoice-sku-column,
.invoice-products tr th.invoice-total-column {
    width: 60px
}

.invoice-products tr th.invoice-tax-column {
    width: 100px
}

.invoice-products tr th.invoice-price-column {
    width: 100px;
    text-align: center
}

.invoice-products tr td {
    padding: 3px
}

.invoice-products tr td.invoice-price-column,
.invoice-products tr td.invoice-quantity-column,
.invoice-products tr td.invoice-tax-column {
    text-align: center
}

.invoice-products tr td.invoice-product-column span {
    font-size: 11px
}

.invoice-products tr td.invoice-product-column table tr td {
    vertical-align: top;
    padding: 0 3px 3px 0
}

.invoice-products tr td.invoice-product-column p {
    white-space: nowrap
}

.invoice-products tr td.invoice-product-column div {
    padding-left: 10px;
    white-space: nowrap
}

.invoice-products tr td.invoice-price-column {
    text-align: right;
    white-space: nowrap
}

.invoice-products tr td.invoice-total-column {
    text-align: right;
    white-space: nowrap;
    padding-right: 5px
}

.invoice-totals {
    width: 100%
}

.invoice-totals tr td {
    padding: 0
}

.invoice-totals tr .invoice-total-title {
    text-align: right;
    width: 100%;
    height: 20px
}

.invoice-totals tr .invoice-total-name {
    text-align: right;
    width: 100%;
    height: 20px;
    padding-right: 3px
}

.invoice-totals tr .invoice-total-value {
    text-align: right;
    height: 20px;
    padding-right: 5px;
    white-space: nowrap
}

.invoice-totals tr .invoice-total-name-fin {
    text-align: right;
    width: 100%;
    height: 25px;
    padding-right: 3px;
    background: #ccc
}

.invoice-totals tr .invoice-total-value-fin {
    text-align: right;
    height: 25px;
    padding-right: 5px;
    background: #ccc;
    white-space: nowrap
}

.invoice-totals tr td.invoice-line {
    height: 2px
}

.invoice-giftcerts {
    width: 100%
}

.invoice-giftcerts tr td {
    padding: 0
}

.invoice-giftcerts tr th {
    background: #ccc
}

.invoice-giftcerts tr th.invoice-giftcert-id {
    width: 60px
}

.invoice-giftcerts tr td.invoice-giftcert-id {
    text-align: center
}

.invoice-giftcerts tr .invoice-giftcert-cost {
    text-align: right;
    white-space: nowrap;
    padding-right: 5px
}

.error-page #header {
    height: 87px
}

.error-page #header .line2 {
    height: 20px
}

.error-page #header .logo {
    margin-left: 167px
}

.error-page #content-container {
    margin-top: 87px
}

.error-page #center-main {
    text-align: center;
    margin: 0 10px
}

.error-page #header .line1 .phones,
.error-page #header .line1 .tabs,
.error-page #header .line2 .languages,
.error-page #header .line2 .search,
.error-page #left-bar,
.error-page #location,
.error-page #right-bar {
    display: none
}

.error-page .subcontainer {
    text-align: left;
    width: 700px;
    margin: 32px auto 0;
    position: relative;
    clear: both
}

.error-page .code-number {
    font: 400 74px arial, sans-serif;
    color: #d8d8d8;
    width: 186px;
    float: left;
    text-align: center
}

.error-page .description {
    font-family: verdana;
    width: 514px;
    float: right
}

.error-page .description h1 {
    font-weight: 400;
    color: #000
}

.error-page .description a {
    text-decoration: underline
}

.error-page .description ul {
    margin: 0;
    padding: 5px 0;
    list-style-position: inside
}

.error-page .reason {
    font-weight: 700;
    color: #a10000
}

.error-page .description hr {
    margin: 10px 0 15px
}

.error-page ul.links {
    margin: 0;
    padding: 5px 0;
    list-style: none
}

.paypal-cart-button {
    text-align: right;
    height: 65px
}

.paypal-cart-button div {
    width: 200px;
    height: 65px;
    margin-left: auto;
    margin-right: 0;
    overflow: visible;
    text-align: right
}

.paypal-cart-button p {
    width: 100%;
    text-align: right;
    margin: 10px 0
}

.paypal-cart-icon {
    float: left;
    padding-right: 10px
}

div.note-box {
    position: absolute;
    border: 1px solid #000;
    background-color: #f6f5eb;
    margin: 0 0 0 30px;
    padding: 3px;
    width: 150px;
    line-height: 15px;
    white-space: normal;
    overflow: hidden
}

.printable #content-container {
    position: static;
    padding: 0;
    margin-top: 82px
}

.printable #content-container2 {
    float: none;
    position: static;
    left: 0;
    right: 0;
    width: 100%
}

.printable #center {
    float: none;
    position: static;
    width: 100%;
    left: 0
}

.printable #header {
    position: static;
    height: 82px
}

.printable #header .line2,
.printable #header .printable,
.printable #header .tabs {
    display: none
}

.printable #center-main {
    margin: 0 10px!important;
    position: static
}

.printable #footer {
    position: static!important
}

.printable #footer .subbox {
    background: 0 0
}

.printable a.simple-button,
.printable button.button,
.printable div.button {
    display: none
}

.printable .dialog .title {
    background: 0 0
}

.title h2 {
    margin: 0
}

.printable .product-details .dropout-wrapper {
    height: 150px
}

.printable .no-print {
    display: none
}

.printable #center-main,
.printable #content-container {
    overflow: visible!important
}

.uo-container #content-container {
    padding-bottom: 74px
}

.uo-container #footer {
    height: 74px
}

.normal {
    font-weight: 400
}

.admin-preview #footer,
.admin-preview #header,
.admin-preview #left-bar,
.admin-preview #location,
.admin-preview #right-bar,
.admin-preview .creviews-dialog,
.admin-preview .offers-short-list,
.admin-preview .send2friend-dialog {
    display: none
}

.admin-preview #content-container {
    margin: 0;
    padding: 0
}

.admin-preview #center-main {
    margin: 5px
}

.need-help-link {
    text-decoration: none!important;
    cursor: help;
    border: none;
    border-bottom: 1px dashed #3c6992!important;
    white-space: nowrap;
    color: #3c6992!important
}

div.need-help-box,
div.need-help-box div {
    position: relative;
    width: 200px;
    margin: 0;
    padding: 0
}

div.need-help-box div {
    position: absolute;
    top: 0;
    left: 14px;
    border: 1px solid #888;
    background: #FFF;
    padding: 6px;
    white-space: normal;
    font-weight: 400;
    overflow: hidden
}

select.adv-search-select {
    width: 400px
}

div.evaluation-notice {
    border: 5px solid #c3c3c3;
    background: #f8f8f8;
    padding: 2px 18px 8px;
    color: #2c3e49;
    margin-bottom: 25px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    font-size: 14px
}

div.evaluation-notice p.license-warning {
    color: #970e0e;
    font-weight: 700;
    font-size: 15px
}

div.evaluation-notice p.evaluation-notice-title {
    font-weight: 700;
    font-size: 16px
}

div.evaluation-notice div.evaluation-notice-button {
    width: 100%;
    text-align: center
}

div.evaluation-notice div.evaluation-notice-button div.button {
    display: inline-block;
    float: center
}

.language-code img.language-code-out,
a.language-code img {
    padding: 2px;
    border: 0
}

.language-code-over,
strong.language-code img {
    padding: 1px!important;
    border: 1px solid #fff!important
}

div.market-price {
    margin-top: 4px
}

div.man-url {
    margin-bottom: 6px
}

ul.address-container {
    text-align: left;
    padding: 0;
    margin: 0
}

div.address-bg {
    background: url(/skin/common_files/images/bg_post.png) top left;
    margin: 2px;
    padding: 8px;
    width: 230px
}

li.address-box {
    display: inline-block;
    margin: 0 25px 25px 0;
    padding: 0;
    border: 1px solid #ddd;
    width: 250px;
    min-height: 220px;
    overflow: hidden;
    text-decoration: none;
    vertical-align: top;
    text-align: left;
    list-style: none
}

.address-main {
    padding: 5px 10px;
    background: #fff;
    min-height: 190px
}

.address-main a.new-address {
    font-size: 22px;
    line-height: 36px
}

.address-main .new-address-label {
    padding-top: 40px;
    text-align: center
}

.address-default {
    font-weight: 700;
    vertical-align: top
}

.address-default img {
    margin-right: 5px
}

.address-line {
    margin: 5px 0
}

.popup-address {
    min-width: 780px;
    text-align: left
}

.popup-address .address-box {
    margin: 0 25px 25px 0;
    padding: 0;
    border: 1px solid #ddd;
    width: 230px;
    float: left;
    min-height: 230px;
    overflow: hidden
}

.popup-address .address-current {
    border: 1px solid #1a478f
}

.popup-address .address-main {
    min-height: 200px
}

.popup-address .address-bg {
    width: 210px
}

.popup-address .address-main hr {
    margin: 15px 0 30px
}

.popup-address .address-main .new-address-label {
    padding-top: 28px
}

.popup-address .address-main a.new-address {
    line-height: 32px
}

.per-page-selector,
.popup-address .address-default {
    float: right
}

.transactions {
    border-top: 1px solid #666;
    margin-top: 10px;
    padding-top: 15px
}

.delete-icon {
    width: 8px;
    height: 8px;
    background: url(/skin/common_files/images/delete_record.gif) left top no-repeat
}

.checkout-sns-button {
    position: absolute;
    top: 0;
    left: 30px;
    height: 100%
}

.checkout-sns-button img {
    width: 9px;
    height: 9px
}

.checkout-top-login {
    position: absolute;
    top: 0;
    right: 10px;
    height: 20px;
    line-height: 21px;
    text-align: right;
    width: 50%;
    vertical-align: middle
}

#header .checkout-top-login .simple-button {
    margin-bottom: 7px
}

.checkout-top-login-text {
    white-space: nowrap;
    padding: 0 10px 0 0
}

.checkout-container #header .line2 {
    height: 20px
}

.checkout-container #content-container {
    margin-top: 138px
}

.checkout-container #header {
    height: 102px
}

.checkout-container #center {
    text-align: center
}

.checkout-container #center-main {
    text-align: left
}

.checkout-buttons .checkout-1-button {
    float: right;
    padding: 1px 13px 1px 0;
    border-radius: 3px
}

.checkout-buttons .checkout-2-button,
.checkout-buttons .checkout-3-button {
    margin-left: 20px;
    float: right
}

div.checkout-2-button a:active,
div.checkout-2-button a:hover,
div.checkout-2-button a:link,
div.checkout-2-button a:visited,
div.checkout-2-button div {
    line-height: 29px;
    color: #510000;
    font-weight: 700;
    font-size: 11px
}

div.checkout-1-button {
    background: #f1f1f1;
    border: 1px solid #aeaeae
}

div.checkout-1-button a:active,
div.checkout-1-button a:hover,
div.checkout-1-button a:link,
div.checkout-1-button a:visited {
    line-height: 29px;
    color: #111d4d;
    font-weight: 700;
    font-size: 12px
}

div.checkout-buttons div.checkout-3-button {
    padding: 2px 16px 1px 9px;
    background: #db4f03;
    background: -moz-linear-gradient(bottom, #db4f03 0%, #fb9a00 55%);
    background: -webkit-gradient(linear, bottom left, bottom right, color-stop(0%, #db4f03), color-stop(55%, #fb9a00));
    background: -webkit-linear-gradient(bottom, #db4f03 0%, #fb9a00 55%);
    background: -o-linear-gradient(bottom, #db4f03 0%, #fb9a00 55%);
    background: -ms-linear-gradient(bottom, #db4f03 0%, #fb9a00 55%);
    background: linear-gradient(to top, #db4f03 0%, #fb9a00 55%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#db4f03', endColorstr='#fb9a00', GradientType=1);
    border-radius: 3px
}

.product_details-button .quantity >select {
    padding: 5px
}

div.checkout-3-button a:active,
div.checkout-3-button a:hover,
div.checkout-3-button a:link,
div.checkout-3-button a:visited,
div.checkout-3-button div {
    line-height: 29px;
    color: #fff;
    font-weight: 700;
    font-size: 14px
}

ul.simple-list,
ul.simple-list-left {
    list-style: none;
    padding: 0;
    margin: 0
}

.simple-list-left {
    padding-bottom: 14px
}

.item-left {
    float: left
}

.item-right {
    float: right
}

.ui-tabs {
    padding: 0;
    border: 0
}

.ui-tabs .ui-tabs-panel {
    border-width: 1px
}

.ui-tabs .ui-widget-header {
    background: 0 0;
    border: 0
}

.ui-tabs .ui-tabs-nav {
    padding-left: 0
}

#top-links .ui-widget-content {
    height: 1px;
    padding: 0;
    border-width: 1px 0 0
}

img.separator {
    width: 100%;
    height: 1px;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #5F94C0
}

.cart .buttons .left-buttons-row.buttons-row button.button {
    margin-top: -1px
}

.simple-products-table tr.separator td {
    height: 30px;
    padding: 0
}

.simple-products-table .product-cell {
    padding-right: 10px
}

.simple-products-table td.last {
    padding-right: 0
}

.color_red {
    color: #ea5300
}

::-webkit-input-placeholder {
    color: #000
}

:-moz-placeholder {
    color: #000;
    opacity: 1
}

::-moz-placeholder {
    color: #000;
    opacity: 1
}

:-ms-input-placeholder {
    color: #000
}

:placeholder-shown {
    color: #000
}

ul.login-signin #href_Sign_in {
    background: url(../images/Sprite_images.jpg) -87px -78px no-repeat;
    padding-left: 14px
}

ul.login-signin li {
    list-style: none;
    float: left;
    margin: 0 14px 0 3px;
    text-transform: uppercase;
    margin-top: 8px
}

ul.login-signin li.modify-profile-link {
    float: right;
    margin-right: 0
}

.login-signin
/*** nav ***/

.dropdown-menu > li.kopie > a {
    padding-left: 5px
}

.cart-items a {
    font-size: 15px
}

.checkout_menu .menu-minicart .valign-middle.empty {
    color: #fff!important;
    font-size: 20px;
    padding-left: 6px
}

.checkout_menu .valign-middle.full {
    color: #fff!important;
    font-size: 17px;
    font-family: 'source_sans_prosemibold'
}

.dropdown-submenu {
    position: relative
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px
}

.dropdown-submenu > a:after {
    border-color: transparent transparent transparent #333;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
    display: block;
    float: right;
    height: 0;
    margin-right: -10px;
    margin-top: 5px;
    width: 0
}

.dropdown-submenu:hover>a:after {
    border-left-color: #555
}

.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a:hover {
    text-decoration: underline
}

@media (max-width: 767px) {
    .navbar-nav {
        display: inline
    }
    .navbar-default .navbar-brand {
        display: inline
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff
    }
    .navbar-default .navbar-nav .dropdown-menu > li > a {
        color: red;
        background-color: #ccc;
        border-radius: 4px;
        margin-top: 2px
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #333
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        background-color: #ccc
    }
    .navbar-nav .open .dropdown-menu {
        border-bottom: 1px solid #fff;
        border-radius: 0
    }
    .dropdown-menu {
        padding-left: 10px
    }
    .dropdown-menu .dropdown-menu {
        padding-left: 20px
    }
    .dropdown-menu .dropdown-menu .dropdown-menu {
        padding-left: 30px
    }
    li.dropdown.open {
        border: 0 solid red
    }
}

@media (min-width: 768px) {
    ul.nav li:hover > ul.dropdown-menu {
        display: block
    }
    #navbar {
        text-align: center
    }
}

.margin-bottom {
    margin-bottom: 5px
}

.nbs-flexisel-container {
    position: relative;
    max-width: 100%
}

.nbs-flexisel-ul {
    position: relative;
    width: 99999px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center
}

.nbs-flexisel-inner {
    overflow: hidden;
    float: left;
    width: 100%
}

.nbs-flexisel-item {
    float: left;
    margin: 24px 0 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    line-height: 0;
    min-height: 342px
}

.nbs-flexisel-item img {
    width: 100%;
    cursor: pointer;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 220px;
    min-height: 150px;
    height: auto!important
}

.sub_category .menu-dialog.menu-cddvd {
    border: none
}

.sub_category .menu-cddvd h2 {
    display: none
}

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
    width: 22px;
    height: 22px;
    position: absolute;
    cursor: pointer;
    z-index: 100
}

.nbs-flexisel-nav-left {
    margin-left: -14px;
    background: url(../images/Sprite_images.jpg) -8px -123px no-repeat;
    width: 22px;
    height: 43px
}

.nbs-flexisel-nav-right {
    z-index: 0;
    right: 0;
    background: url(../images/Sprite_images.jpg) -208px -123px no-repeat;
    width: 22px;
    height: 43px
}

.f_product_name {
    width: 100%;
    display: inline-block;
    padding-top: 18px;
    line-height: 20px;
    padding-left: 5px;
    padding-right: 5px
}

.menu-container {
    width: 100%;
    margin: 0 auto;
    background: #6d9327
}

.menu-mobile {
    display: none;
    padding: 11px
}

.menu-mobile:after {
    background: url(../images/menu_mob.png) 0 0 no-repeat;
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%)
}

.menu-dropdown-icon:before {
    background: url(../images/menu_mob.png) 0 0 no-repeat;
    display: none;
    cursor: pointer;
    float: right;
    color: #333
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    box-sizing: border-box
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table
}

.menu > ul:after {
    clear: both
}

.menu > ul > li {
    border-left: 1px solid #fff;
    float: left;
    background: #6d9327;
    padding: 9px 14px;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-family: 'source_sans_prosemibold'
}

.menu > ul > li a {
    text-decoration: none;
    padding: 1.5em 3em;
    display: block
}

.menu > ul > li:hover {
    background: #6d9327;
    cursor: pointer
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #fff;
    color: #000;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 8px 0 0;
    list-style: none;
    box-sizing: border-box;
    border: 2px solid #577620
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table
}

.menu > ul > li > ul:after {
    clear: both
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 100%;
    background: none;
    float: left
}

.menu > ul > li > ul > li a {
    color: #000!important;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin:0px;
    list-style: none;
    box-sizing: border-box
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table
}

.menu > ul > li > ul > li > ul:after {
    clear: both
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 25%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em
}

.menu > ul > li > ul > li > ul > li a {
    border: 0
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
    opacity: 99999!important
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 8px 0
}

@media only screen and (max-width: 959px) {
    .menu-container {
        width: 100%
    }
    .menu-mobile {
        display: block;
        background: url(../images/menu_mob.png) 94% center no-repeat
    }
    .menu-dropdown-icon:before {
        display: block
    }
    .menu > ul {
        display: none
    }
    .menu > ul > li {
        width: 100%;
        display: block
    }
    .menu > ul > li a {
        padding: 1.5em;
        width: 100%;
        display: block
    }
    .menu > ul > li > ul {
        position: relative
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%!important
    }
    .menu > ul > li > ul > li {
      /*  float: none; */
        width: 100%!important;
        margin-top: 3px
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0
    }
    .menu > ul > li > ul > li > ul {
        position: relative
    }
    .menu > ul > li > ul > li > ul > li {
        float: none
    }
    .menu .show-on-mobile {
        display: block;
        z-index: 13
    }
}

#flexiselDemo3 .product-title {
    line-height: 20px;
    text-decoration: none;
    font-size: 15px;
    width: 100%;
    display: inline-block;
    text-align: left;
    color: #000;
    font-family: 'source_sans_prosemibold';
    min-height: 70px
}

#flexiselDemo3 .products .buy-now .quantity {
    text-align: left!important;
    margin-left: 5px
}

#flexiselDemo3 .quantity {
    float: left;
    width: 23%;
    padding: 0
}

#flexiselDemo3 .quantity select {
    height: 33px;
    background: #ebebeb
}

#flexiselDemo3 .button-row {
    padding: 0;
    float: right;
    height: auto;
    margin: 0
}

#flexiselDemo3 .price-value {
    color: #cc230c;
    font-size: 19px;
    font-family: 'source_sans_prosemibold';
    margin-left: 6px
}

#flexiselDemo3 .product-title:hover {
    text-decoration: underline
}

.login-signin a {
    color: #000;
    text-decoration: none
}

.head_text {
    margin-top: 6px;
    font-weight: 700;
    font-size: 13px;
    font-family: Arial
}

.modify-profile-link ul {
    display: none;
    height: auto;
    padding: 38px 24px;
    margin: 0;
    border: 0;
    position: absolute;
    width: 183px;
    z-index: 200;
    right: 0;
    background: url(../images/myaccount.png) no-repeat
}



.hello-name {
    text-align: right;
    font-size: 15px;
    text-transform: uppercase;
    font-family: 'source_sans_proregular'
}

.hello-name ~ ul.login-signin li {
    margin-top: 0
}

ul.menu_checkout_cart > li {
    list-style: none;
    float: left;
    padding: 6px 15px;
    color: #fff;
    background: #252525;
    width: 50%
}

.menu-container .menu {
    width: 80%;
    float: left
}

.menu-container .menu_checkout_cart {
    width: 20%;
    float: right;
    margin-bottom: 0;
    padding-left: 0
}

.minicart-box .cart-items li a,
.minicart-box .cart-items span,
.minicart-box .cart-items .price-row {
    color: #000!important
}

.ui-tabs {
    margin-top: 50px;
    font-family: 'source_sans_prosemibold'
}

#top-links ~ h1 {
    padding-top: 10px;
    font-family: 'source_sans_prosemibold'
}

.register-table .button-row a {
    background: #f7f7f7!important;
    border: 1px solid #aeaeae;
    color: #2e2e2e;
    padding: 4px 9px;
    border-radius: 4px;
    font-family: arial;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none
}

.details_tab {
    display: inline-block;
    margin-top: 14px;
    margin-bottom: 16px;
    width: 52%;
    background: #ececec;
    padding: 11px 9px;
    font-family: Arial
}

.register-table {
    font-family: 'source_sans_prosemibold';
    margin-bottom: 15px
}

.reg_del {
    margin-top: 3px
}

.products.cart.wishlist ~ .button a {
    background: #f7f7f7!important;
    border: 1px solid #aeaeae;
    color: #2e2e2e;
    padding: 4px 14px;
    border-radius: 4px;
    font-family: arial;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none
}

#tabs-container {
    width: 348px;
    margin: 38px auto;
    min-height: 294px
}

#tabs-container-one {
    width: 348px;
    margin: 33px auto;
    min-height: 303px
}

#tabs-container h2,
#tabs-container-one h2 {
    color: #fff;
    font-size: 25px;
    font-family: 'source_sans_probold'
}

.tabs-menu-one,
.tabs-menu {
    font-family: 'arialbold';
    float: left;
    clear: both;
    width: 100%;
    margin: 0;
    padding-left: 0
}

.tabs-menu-one li,
.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    width: 50%;
    background-color: #858585;
    border-bottom: 1px solid #858585;
    list-style: none;
    font-size: 12px;
    text-align: left;
    padding-left: 24px
}

#toner_p_browser,
#toner_c_browser,
#ink_p_browser,
#ink_c_browser {
    width: 100%
}

iframe#toner_p_browser {
    height: 180px;
    padding: 4px 0
}

iframe#ink_p_browser {
    height: 173px
}

.tabs-menu-one li.current,
.tabs-menu li.current {
    position: relative;
    border: none;
    background-color: rgba(74, 100, 1, 0.0);
    z-index: 5
}

.tabs-menu-one li a,
.tabs-menu li a {
    width: 100%;
    display: inline-block;
    font-size: 15px;
    color: #fff;
    text-decoration: none
}

.tabs-menu-one .current a,
.tabs-menu .current a {
    color: #fff
}

.tab {
    border: 1px solid #4a641d;
    background-color: rgba(74, 100, 1, 0.7);
    margin-bottom: 20px;
    width: auto
}

.tab-content-one .menu-dialog .content,
.tab-content .menu-dialog .content {
    background-color: rgba(74, 100, 1, 0.0)
}

#toner_p_browser td.VertMenuBox {
    background-color: #4a641d!important
}

.tab-content {
    padding: 23px;
    display: none;
    min-height: 190px
}

.tab-content-one {
    padding: 6px 20px;
    display: none;
    min-height: 190px
}

#tab-1 {
    display: block;
    padding: 0 20px
}

#tab-3 {
    display: block
}

#tab-4 {
    padding: 23px 23px 0;
    height: 232px
}

.banner_two {
    background: url(../images/banner_one.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.banner_one {
    background: url(../images/banner_two.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.banner-black {
    background: #000;
    margin-bottom: 32px;
    display: inline-block;
    margin-top: 32px;
    width: 100%
}

.second-row {
    margin-bottom: 33px
}

.second-row h2 {
    font-size: 23px;
    margin-bottom: 17px;
    color: #527c00;
    font-family: 'source_sans_proregular';
    padding-left: 26px
}

.horizondal-line {
    border-right: 1px solid #d9d9d9;
    min-height: 260px;
    font-family: 'source_sans_proregular'
}

.top_line {
    border-top: 5px solid #7ba134;
    width: 100%;
    margin-left: -15px
}

.margin-top-10 {
    margin-top: 10px
}

.menu-tape h2,
.menu-cddvd h2 {
    margin-top: 0;
    background: #4c6923;
    color: #fff;
    font-size: 15px;
    padding: 6px;
    font-family: Arial
}

.soc-footer-links li {
    list-style: none;
    float: left;
    margin-left: 5px
}

.soc-footer-links {
    margin-bottom: 20px;
    display: inline-block;
    margin-top: 12px;
    padding-left: 0
}

.phone {
    margin-bottom: 23px;
    margin-top: 10px;
    padding-left: 9px
}

#footer h2 {
    color: #000;
    font-size: 17px;
    font-weight: 600;
    font-family: Arial
}

.mews_msg span,
.mews_msg a {
    text-decoration: none!important
}

.float-right {
    float: right
}

.menu-help a {
    text-decoration: none!important;
    font-family: Arial
}

.left-border {
    border-left: 1px solid #d2d2d2;
    min-height: 295pxmargin-bottom: 14px
}

.reward_text {
    text-align: center;
    color: #c20000;
    font-size: 17px;
    font-family: 'source_sans_prosemibold';
    width: 100%;
    margin: 0 auto
}

.emt {
    padding: 9px
}

#flexiselDemo3 button.main-button .button-left {
    background: url(../images/Sprite_images.jpg) -10px -70px no-repeat!important;
    width: 39px;
    height: 32px;
    margin: 0
}

#flexiselDemo3 button.main-button .button-right {
    background: none;
    padding: 0
}

/* Wishlist button, carousel: icon only, 39x32 as the old wishlist_button.png was.
   Style comes from the site-wide base rule at the end of this file; these two only pin the legacy
   footprint. Scoped to the add2wl button rather than every button.button in here, which is what
   the old rule did - the cart button was only saved from wearing the wishlist artwork by an
   !important elsewhere. */
#flexiselDemo3 button[onclick*="add2wl"] .button-left {
    background-position: center;
    width: 39px;
    height: 32px;
    padding: 0;
    color: transparent;
    overflow: hidden;
}

/* Wishlist button, product page: 81x22, the exact footprint of the old details_wishlist.png, so
   nothing around it shifts. Type and heart are scaled down to fit that box. */
.product-details button[onclick*="add2wl"] .button-left {
    width: 81px;
    height: 22px;
    line-height: 20px;
    font-size: 11px;
    padding: 0 21px 0 6px;
    background-size: 13px 13px;
    background-position: right 4px center;
}

button.button .button-right {
    background: none
}

.itemdiv-flex {
    width: 201px;
    margin: 0 auto
}

#flexiselDemo3 .buy-now {
    width: 100%;
    margin: 0 auto
}

#flexiselDemo3 .product-cell-price {
    display: inline-block;
    margin: 15px 0 -12px
}

#location0 {
    padding: 4px 0;   /* was 9px — halved to slim the breadcrumb bar */
    background: #ebebeb;
    color: #262626;
    font-family: Arial;
    position: relative;
    top: 3px;   /* nudge the breadcrumb text down 3px from centre */
}

#flexiselDemo3 button.button .button-left {
    width: 39px!important
}

.green {
    color: #527c00;
    font-weight: 500!important
}

.simple-list button.button .button-left {
    background: #547020!important;
    background-image: none!important;
    color: #fff!important;
    width: 159px!important;
    padding: 6px 11px;
    border-radius: 3px;
    height: 38px!important
}

.mobile-view {
    display: none
}

.estimator-container.cart-border .button-row {
    margin-top: 0
}

.estimator-container {
    background: #f6f6f6;
    border: 1px solid #aeaeae;
    border-top: none;
    padding: 12px 10px
}

.update_cart_button button.button .button-left {
    font-family: Arial;
    height: 32px;
    color: #000;
    background: #f5f5f5;
    width: auto;
    padding: 5px 24px;
    border: 1px solid #aeaeae;
    margin-left: 5px;
    border-radius: 3px;
    font-size: 15px
}

.update_cart_button a.simple-delete-button {
    font-family: Arial;
    font-size: 15px;
    color: #000;
    background: url(../images/delete_cross.png) right 50% no-repeat;
    padding: 4px 20px;
    border: 1px solid #aeaeae;
    background: #f5f5f5;
    border-radius: 3px;
    font-weight: 700;
    text-decoration: none
}

.update_cart_button a.simple-delete-button:hover {
    color: #000!important
}

.submit-coupon button.button .button-left {
    background: #f5f5f5;
    border: 1px solid #aeaeae;
    color: #000;
    width: auto;
    padding: 3px 18px;
    border-radius: 3px;
    height: 29px
}

.submit-coupon .button-row {
    margin-top: 0
}

#checkout_login button.main-button .button-left {
    background: #4c6923!important;
    color: #fff!important;
    padding: 3px 26px;
    width: auto;
    height: auto;
    border-radius: 4px;
    margin-left: 3px
}

#checkout_login button.button {
    height: 26px;
    margin-bottom: 0;
    vertical-align: middle
}

.featuerd_prod {
    margin-top: 0!important;
    font-size: 19px!important;
    background: #4c6923;
    color: #fff!important;
    padding: 7px 5px;
    text-transform: uppercase
}

.image_list {
    list-style: none;
    background: url(../images/list-style-img.png) no-repeat 43px 8px;
    margin-left: -30px;
    width: 100%
}

.product_details-button .buttons-row {
    margin: 0
}

.product_details-button button.main-button .button-left {
    background: url(../images/cart_button.png) no-repeat!important;
    width: 39px;
    height: 32px;
    padding: 0;
    color: transparent
}

/* Wishlist button, category/list tiles: icon only, 39x32 as the old wishlist_button.png was.
   See the site-wide base rule at the end of this file. */
.product_details-button button[onclick*="add2wl"] .button-left {
    background-position: center;
    width: 39px;
    height: 32px;
    padding: 0;
    color: transparent;
    overflow: hidden;
}

.product_details-button button.button .button-right {
    padding-right: 4px
}

#tabs-container_product .tabs-menu {
    float: left;
    clear: both
}

#tabs-container_product .tabs-menu li {
    height: 41px;
    line-height: 30px;
    float: left;
    margin-right: 3px;
    background-color: #ccc;
    border-top: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
    width: auto
}

#tabs-container_product .tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5
}

#tabs-container_product .tabs-menu li a {
    padding: 5px 17px 9px;
    text-transform: uppercase;
    color: #000;
    font-size: 14px;
    text-decoration: none;
    font-family: arial;
    font-weight: 700
}

#tabs-container_product .tabs-menu .current a {
    color: #547020;
    font-family: arial;
    font-weight: 700
}

#tabs-container_product .tab {
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: 100%
}

#tabs-container_product .tabs-container_product {
    width: 660px;
    padding: 20px;
    display: none
}

#tabs-container_product #tab-11 {
    display: block
}

#tabs-container_product #tab-3 {
    display: none
}

.product-details .acr-general-product-rating table {
    float: left
}

.price_qty .price_value {
    color: #cc230c;
    font-size: 28px;
    font-family: 'source_sans_proregular'
}

/* Quantity dropdown, styled to match the same control in the featured-products blocks -
   `.feat-buy .quantity select` further up this file. Copied from there: 15px type (was
   11px), 33px box (was 28px), and the centred number, which is what text-align-last does
   for the closed <select>. Font family, weight, colour, background and border were
   already identical between the two, so they are not repeated here. */
.price_qty #product_avail {
    background: #ebebeb;
    font-size: 15px;
    height: 33px;
    padding: 2px;
    margin-left: 39px;
    text-align: center;
    text-align-last: center;
    vertical-align: middle;
    width: auto!important
}

.product_shipping_cost {
    background: #ececec;
    padding: 17px 23px;
    font-family: Arial
}

.price_qty .simple-list button.button .button-left {
    font-size: 14pt
}

.title_multi_qty {
    color: #527c00;
    font-size: 14pt;
    font-family: arial
}

button.button .price_qty button.button .button-right {
    height: auto!important
}

.price_qty {
    display: inline-block;
    width: 100%;
    /* min-height + margin/padding match live tonerpirate.com (live is 121px; margin 0 0 13, no
       padding). min-height (not height) so option-heavy products can grow instead of clipping. */
    min-height: 120px;
    margin-bottom: 13px
}

.valign-middle.empty strong {
    font-weight: 500;
    font-size: 16px
}

.item_bestseller {
    margin-bottom: 30px
}

.item_bestseller .image-wrapper {
    text-align: center
}

.item_bestseller .buttons-row .button {
    float: none
}

.item_bestseller .price-value {
    color: #cc230c;
    font-size: 13pt;
    font-family: arial;
    font-weight: 600
}

.item_bestseller .product-title {
    line-height: 20px;
    text-decoration: none;
    font-size: 15px;
    width: 100%;
    display: inline-block;
    text-align: left;
    color: #000;
    font-family: 'source_sans_prosemibold';
    min-height: 70px
}

.minicart-box .menu {
    width: 100%
}

.minicart-box .view-cart-link a,
.minicart-box .checkout-link a {
    border: none!important;
    color: #fff!important;
    text-decoration: none
}

.minicart-box .view-cart-link,
.minicart-box .checkout-link {
    float: left;
    margin-left: 21px;
    background: #547020!important;
    color: #fff!important;
    padding: 5px 10px;
    border-radius: 3px
}

#footer {
    color: #000;
    display: inline-block;
    border-top: 1px solid #adadad;
    font-family: Arial
}

.reviews_order div.button a {
    padding-left: 0!important;
    color: #cc230c;
    font-family: arial;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px
}

.ask-question a.simple-button {
    font-size: 15px
}

.reviews_order ul {
    width: 100%;
    padding: 0
}

.reviews_order ul li {
    list-style: none;
    float: left;
    margin-left: 2px
}

.live_support {
    position: fixed;
    top: 20%;
    right: -214px;
    z-index: 16
}

.left_live {
    width: auto;
    float: left;
    margin-top: 10%
}

.live_close {
    width: 20px;
    width: 20px;
    position: absolute;
    top: -9px;
    left: -3px
}

.hr_to_help {
    font-family: arial;
    font-weight: 600;
    font-size: 16px;
    margin: 12px 0
}

.online_q {
    margin-bottom: 18px
}

.live_msg {
    margin-bottom: 11px
}

.checkout-top-login {
    display: none
}

.banner-black .menu-dialog.menu-toner {
    display: inline-block
}

.banner-black .menu-dialog.menu-ink {
    display: inline-block
}

.sub_category #toner_p_browser {
    width: 83%;
    height: 123px
}

#tabs-container_product .tabs-menu li {
    padding-left: 0!important
}

.item_bestseller {
    min-height: 250px!important
}

.login-signin {
    display: inline-block;
    padding-left: 0
}

#tab-2 {
    height: 190px
}

#tabs-container #toner_c_browser {
    height: 205px!important
}

#tabs-container #tab-1 .content {
    height: 190px
}

#tabs-container-one #ink_c_browser {
    height: 244px!important
}

#tabs-container-one #tab-3 .content {
    height: 187px
}

.wishlist_but {
    margin-top: 12px;
    float: right
}

.checkout-container #header input.text {
    max-width: 100%!important
}

.browser_cat {
    font-family: arial;
    font-weight: 700;
    font-size: 18px;
    color: #000
}

.quantity.but-left {
    float: left
}

.buttons-row.but_right {
    float: right;
    margin-top: -4px
}

.price-row {
    text-align: center;
    margin-bottom: -23px
}

#Add_to_cart_popup_window .upselling.details img {
    width: 200px!important;
    height: 150px!important
}

.products-list .item .itemdiv .acr-general-product-rating {
    display: none!important
}

.products.products-table.simple-products-table .product_details-button.details {
    margin-top: -32px
}

.minicart-box .cart-items a {
    color: #000
}

.minicart-box .cart-items a:hover {
    color: #000!important
}

#Add_to_cart_popup_window .title {
    text-align: center
}

#Add_to_cart_popup_window .price {
    text-align: center
}

#Add_to_cart_popup_window .buy.product-input {
    text-align: center
}

#Add_to_cart_popup_window .buy.product-input .main-button .button-left {
    background: url(../images/cart_button.png) no-repeat!important;
    border: none;
    width: 39px;
    height: 32px;
    color: transparent;
    padding: 0!important
}

#Add_to_cart_popup_window .details .title {
    text-align: left
}

#Add_to_cart_popup_window .details .price {
    text-align: left
}

.item_b {
    min-height: 270px!important
}

.send2friend-dialog .data-table label {
    font-weight: 400!important;
    font-family: 'source_sans_proregular'
}

.acr-dialog .button a {
    font-family: 'source_sans_prosemibold';
    font-size: 14px
}

.menu-news,
.menu-news .news {
    font-family: Arial
}

.menu-news .mews_msg {
    font-family: Arial
}

.menu-reviews-section .acr-item {
    font-family: Arial
}

.price_qty .property-value {
    font-family: Arial
}

.products.products-table.simple-products-table .item_products {
    min-height: 260px
}

.item_products .image-wrapper img {
    width: 200px
}

.best_sell_div .image-wrapper img {
    width: 200px;
    height: auto
}

.item_b .image-wrapper {
    min-height: 166px
}

#tab-31 .acr-general-product-rating {
    width: 100%
}

#tab-31 .acr-general-product-rating table {
    width: 130px;
    float: left
}

#tab-31 .reviews_order {
    width: 100%
}

.prodetails_left .acr-general-product-rating {
    display: inline-table
}

.products .item .itemdiv .image img {
    width: 200px!important;
    height: auto!important
}

.dialog-featured-list .title h2 {
    background: #e0e0db;
    color: #000!important;
    padding: 8px 16px;
    font-size: 20px
}

.checkout-container .search div.checkout-container input[type=text] {
    padding: 11px 5px!important
}

.estimator-container-width {
    width: 45%;
    margin-left: 55%
}

.float-left {
    font-weight: 600
}

.line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
    position: relative
}

.prodetails_left {
    width: 70%;
    float: left
}

.product_details-button button.button .button-left {
    width: 39px!important
}

.live_msg a {
    text-decoration: none
}

.live_msg a:hover {
    text-decoration: none
}

.text-font-pop {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    padding-left: 7px
}

.product-ask-form .input-style,
input[type=password],
input[type=text],
select,
textarea {
    margin-bottom: 3px
}

.products.cart .right-box.cart-border {
    display: inline-block;
}

@media screen and (max-width:360px) {
    .acr-general-product-rating table {
        width: 100% !important
    }
    .acr-product-info .acr-image {
        width: 100%;
    }
    . acr-product-info .acr-details {
        width: 100% !important;
        margin-left: 0px !important;
        padding-left: 0px !important;
    }
    #content-container {
        margin-top: 169px
    }
    #header input.text2 {
        width: 100%
    }
    input.image-button {
        right: 4px
    }
    .menu-container .menu_checkout_cart {
        width: 59%
    }
    .logo img {
        width: 109px!important;
        height: 28px!important
    }
    .register_login {
        position: absolute!important;
        right: 0;
        font-size: 11px;
        padding-right: 0!important;
        top: 2px;
        z-index: 1
    }
    .login-signin {
        padding: 3px;
        margin-left: 2px
    }
    .desktop_view {
        display: none
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    ul.menu_checkout_cart > li {
        padding: 0 15px
    }
    ul.menu_checkout_cart > li:nth-child(1) {
        padding: 0 18px 0 8px
    }
    .mobile-view a {
        color: #fff;
        text-decoration: none
    }
    ul.login-signin li {
        margin: 0 0 0 3px
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.product-added.ui-draggable {
        width: 96%!important;
        left: 4px!important
    }
    .checkout-container #content-container {
        margin-top: 184px
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .products {
        margin-top: 50px;
        display: inline-block
    }
    .checkout-buttons {
        top: 1%!important;
        right: 0!important
    }
    .cart .right-buttons-row {
        position: relative;
        top: 42px;
        width: auto;
        right: 8px;
        display: none
    }
    .dialog {
        margin: 0;
        margin-bottom: 38px
    }
    .login-signin {
        font-size: 12px
    }
    .menu_chkout a {
        font-size: 14px!important
    }
    .menu-minicart img.icon {
        height: 13px;
        width: 16px
    }
    .ui-tabs .ui-tabs-nav li {
        width: 100%
    }
    #tabs-container_product .tabs-menu li {
        width: 100%;
        text-align: left
    }
    input.send2friend {
        width: auto
    }
    .login-signin {
        margin-top: 0;
        float: right!important
    }
    .hello-name {
        font-size: 10px;
        text-align: right;
        margin-right: 0px;
    }
    .modify-profile-link ul {
        width: 200%;
        text-align: left
    }
    .menu-container .menu {
        width: 100%
    }
    .menu > ul > li > ul.normal-sub > li {
        width: 100%!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 0
    }
    ul.address-container {
        text-align: center
    }
    .buttons-row .button-separator {
        margin-bottom: 14px
    }
    .emt {
        display: none
    }
    .hello-name ~ .login-signin {
        margin-top: -17px
    }
    .left-border {
        min-height: 185px!important;
        border: none
    }
    .details_tab {
        width: 100%
    }
    .checkout_menu .menu-minicart .valign-middle.empty {
        font-size: 17px
    }
    #tabs-container,
    #tabs-container-one {
        width: 240px
    }
    .live_support {
        top: 43%
    }
    .sub_category iframe#toner_p_browser {
        height: 300px
    }
    .product-details .details {
        padding-left: 9px;
        margin-top: 20px
    }
    .dialog-category-products-list .item .product_details-button .buttons-row {
        width: 18%!important
    }
    h1.green {
        padding: 0
    }
    .checkout_menu .valign-middle.full {
        font-size: 12px;
        font-family: arial;
        width: auto;
        display: inline-block;
        padding-top: 1px;color:#000 !important
    }
    .input-style,
    input[type=password],
    input[type=text],
    select,
    textarea {
        width: 100%
    }
    #adv_search_box input[type=text] {
        width: auto !important;
    }
    .checkoutAddressBook {
        display: none
    }
    .register_login {
        width: 100%!important;
        height: 20px
    }
    .logo a {
        z-index: 12
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all {
        width: 98%!important;
        left: 1px!important
    }
    .qa-form input[type='text'],
    .qa-form input[type='email'],
    .qa-form select,
    .qa-form textarea {
        width: 100%!important
    }
    .help_menu_last {
        left: 0!important;
        right: 0!important
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    .products-list .item .itemdiv .image img {
        width: 200px!important;
        height: 150px!important
    }
    .menu-container .menu {
        width: 100%
    }
    .product-price-text input[type=text] {
        width: auto!important
    }
    div.checkout-container h1 {
        padding: 53px 5px 11px!important
    }
    .modify-profile-link ul li {
        float: none;
        padding: 4px 0;
        text-align: left
    }
    .products-list .image {
        padding: 0
    }
    .buttons-auto-separator .button,
    .buttons-auto-separator a.simple-button,
    .buttons-auto-separator button.simple-button {
        margin-right: 0!important
    }
    input.image-button {
        top: 5%!important
    }
    .menu-reviews-section .acr-link {
        text-align: center!important
    }
    .menu-reviews-section .acr-link a {
        width: 100%
    }
    .checkoutImageBox img {
        width: 227px!important
    }
    div#checkoutModalPasswordRecovery {
        width: 100%!important
    }
    .help_menu_ {
        padding-left: 5px!important
    }
    .print-id {
        display: none
    }
    .valign-middle.empty strong {
        font-size: 13px
    }
    .menu-line-height {
        line-height: 19px!important
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding: 0 0 0 16px !important
    }
    .submit-coupon {
        width: 100%!important
    }
    .shippingFieldsContainer {
        width: 100%!important
    }
    .totalsDisplayContainer {
        width: 100%!important;
        margin-top: 10px
    }
    .emt {
        display: none
    }
    .register-table .button-row a {
        padding: 4px 7px!important
    }
    .estimator-container-width {
        width: 100%;
        margin-left: 0
    }
    .submit-coupon {
        width: 100%!important
    }
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
    .AJAXSearch {
        top: 13%!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
    #colorbox {
        width: 100%!important;
        height: 100%!important;
        top: 20%!important;
        position: fixed!important
    }
    #cboxWrapper {
        width: 98%!important;
        height: auto!important
    }
    #cboxWrapper #cboxMiddleLeft {
        height: 100%!important
    }
    #cboxWrapper #cboxContent {
        width: 100%!important;
        height: 100%!important
    }
    #cboxWrapper #cboxLoadedContent {
        width: 100%!important;
        height: 96%!important
    }
    #cboxWrapper #cboxLoadedContent .cboxPhoto {
        width: 100%!important;
        height: 96%!important;
        margin: 0 auto!important
    }
    #cboxMiddleRight,
    #cboxTopLeft,
    #cboxTopRight,
    #cboxBottomLeft,
    #cboxBottomRight,
    #cboxBottomCenter,
    #cboxBottomRight,
    #cboxTopCenter {
        display: none!important
    }
}

@media screen and (min-width:361px) and (max-width:509px) {
    .tabs-menu-one li,
    .tabs-menu li {
        padding-left: 9px !important;
    }
    .acr-product-info .acr-image {
        width: 100%;
    }
    .acr-general-product-rating table {
        width: 100% !important
    }
    .acr-product-info .acr-details {
        width: 100% !important;
        margin-left: 0px !important;
        padding-left: 0px !important;
    }
    .submit-coupon {
        width: 100%!important
    }
    .totalsDisplayContainer {
        width: 100%!important;
        margin-top: 10px
    }
    .modify-profile-link ul li {
        float: none;
        padding: 5px 27px 0px 13px;
        text-align: left
    }
    #content-container {
        margin-top: 170px
    }
    ul.login-signin li {
        margin: 5px;
        margin-top: -1px
    }
    #header input.text2 {
        width: 100%
    }
    input.image-button {
        right: 18px
    }
    .menu-container .menu_checkout_cart {
        width: 59%
    }
    .logo img {
        width: 133px!important;
        height: 33px!important
    }
    .register_login {
        position: absolute!important;
        right: 0;
        font-size: 11px;
        padding-right: 0!important;
        top: 2px
    }
    .login-signin {
        padding: 3px;
        width: 100%;
        margin-left: 20%
    }
    .desktop_view {
        display: none
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    ul.menu_checkout_cart > li {
        padding: 0 20px
    }
    ul.login-signin li {
        margin: 0 0 0 3px
    }
    .mobile-view a {
        color: #fff;
        text-decoration: none
    }
    .checkout-container #content-container {
        margin-top: 173px
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .checkout-buttons {
        top: 2%!important;
        right: 0!important
    }
    .cart .right-buttons-row {
        position: relative;
        top: 7px;
        width: auto
    }
    .cart .left-buttons-row {
        position: relative
    }
    .login-signin {
        font-size: 12px
    }
    .menu_chkout a {
        font-size: 14px!important
    }
    .menu-minicart img.icon {
        height: 15px;
        width: 18px
    }
    .ui-tabs .ui-tabs-nav li {
        width: 100%
    }
    #tabs-container_product .tabs-menu li {
        width: 100%;
        text-align: left
    }
    input.send2friend {
        width: auto
    }
    .login-signin {
        float: right!important
    }
    .hello-name {
        font-size: 11px;
        text-align: right; margin-right: 87px;
    }
    .modify-profile-link ul {
        width: auto
    }
    .menu-container .menu {
        width: 100%
    }
    .menu > ul > li > ul.normal-sub > li {
        width: 100%!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 0
    }
    ul.address-container {
        text-align: center
    }
    .buttons-row .button-separator {
        margin-bottom: 14px
    }
    .emt {
        display: none
    }
    .hello-name ~ .login-signin {
        margin-top: -18px
    }
    .left-border {
        min-height: 185px!important;
        border: none
    }
    .details_tab {
        width: 100%
    }
    .checkout_menu .menu-minicart .valign-middle.empty {
        font-size: 14px
    }
    #tabs-container,
    #tabs-container-one {
        width: 240px
    }
    .live_support {
        top: 23%
    }
    .sub_category iframe#toner_p_browser {
        height: 300px
    }
    .dialog-category-products-list .item .product_details-button .buttons-row {
        width: 15%!important
    }
    .checkout_menu .valign-middle.full {
        font-size: 10px;
        font-family: arial;
        width: auto;
        display: inline-block
    }
    .input-style,
    input[type=password],
    input[type=text],
    select,
    textarea {
        width: 100%
    }
    #adv_search_box input[type=text] {
        width: auto !important;
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all {
        width: 98%!important;
        left: 1px!important
    }
    .qa-form input[type='text'],
    .qa-form input[type='email'],
    .qa-form select,
    .qa-form textarea {
        width: 100%!important
    }
    .help_menu_last {
        left: 0!important;
        right: 0!important
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    .menu-container .menu {
        width: 100%
    }
    .product-price-text input[type=text] {
        width: auto!important
    }
    div.checkout-container h1 {
        padding: 53px 5px 11px!important
    }
    .print-id {
        display: none
    }
    .submit-coupon {
        width: 100%!important
    }
    .shippingFieldsContainer {
        width: 100%!important
    }
    .emt {
        display: none
    }
    .estimator-container-width {
        width: 100%;
        margin-left: 0
    }
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
    #colorbox {
        width: 100%!important;
        height: 100%!important;
        top: 20%!important;
        position: fixed!important
    }
    #cboxWrapper {
        width: 98%!important;
        height: auto!important
    }
    #cboxWrapper #cboxMiddleLeft {
        height: 100%!important
    }
    #cboxWrapper #cboxContent {
        width: 100%!important;
        height: 100%!important
    }
    #cboxWrapper #cboxLoadedContent {
        width: 100%!important;
        height: 96%!important
    }
    #cboxWrapper #cboxLoadedContent .cboxPhoto {
        width: 100%!important;
        height: 96%!important;
        margin: 0 auto!important
    }
    #cboxMiddleRight,
    #cboxTopLeft,
    #cboxTopRight,
    #cboxBottomLeft,
    #cboxBottomRight,
    #cboxBottomCenter,
    #cboxBottomRight,
    #cboxTopCenter {
        display: none!important
    }
}

@media screen and (min-width:510px) and (max-width:640px) {
    .submit-coupon {
        width: 100%!important
    }
    .shippingFieldsContainer {
        width: 100%!important
    }
    .print-id {
        display: none
    }
    .billingFieldsContainer {
        border: none!important
    }
    .checkout-buttons {
        top: 0!important
    }
    div.checkout-container h1 {
        padding: 41px 5px 16px!important
    }
    #content-container {
        margin-top: 173px
    }
    .checkout-container #content-container {
        margin-top: 193px
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    .desktop_view {
        display: none
    }
    .menu_checkout_cart .menu_chkout a {
        color: #fff
    }
    ul.menu_checkout_cart > li {
        padding: 6px 25px
    }
    .register_login {
        padding-left: 0;
        height: 20px
    }
    .modify-profile-link ul {
        top: 17px;
        padding: 38px 0 38px 24px !important
    }
    .login-signin {
        display: inline
    }
    #header input.text2 {
        width: 99%
    }
    input.image-button {
        right: 4px
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    #tabs-container_product .tabs-menu li {
        width: 49%
    }
    .product-details {
        margin-bottom: 0
    }
    iframe#toner_p_browser {
        height: 286px
    }
    .menu-container .menu {
        width: 100%
    }
    .product-properties div img {
        width: 32%
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.product-added.ui-draggable {
        width: 96%!important;
        left: 4px!important
    }
    ul.login-signin li {
        margin: 0 9px 0 3px
    }
    .banner-black {
        margin-top: 0
    }
    .sub_category iframe#toner_p_browser {
        height: 300px
    }
    .left-border {
        min-height: 185px!important;
        border: none
    }
    #adv_search_box input[type=text] {
        width: auto !important;
    }
    .input-style,
    input[type=password],
    input[type=text],
    select,
    textarea {
        width: 100%
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all {
        width: 98%!important;
        left: 1px!important
    }
    .qa-form input[type='text'],
    .qa-form input[type='email'],
    .qa-form select,
    .qa-form textarea {
        width: 100%!important
    }
    .help_menu_last {
        left: 0!important;
        right: 0!important
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    .menu-container .menu {
        width: 100%
    }
    .register_login {
        top: 0;
        position: absolute!important;
        right: 0
    }
    .register_login .hello-name {
        width: auto;
        float: left
    }
    .hello-name ~ .login-signin {
        width: 53%;
        float: left
    }
    .register_login .login-signin {
        display: inline-block
    }
    .products.products-table.simple-products-table .item_products {
        width: 50%!important;
        float: left
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding: 0 0 0 16px !important
    }
    .emt {
        display: none
    }
    .estimator-container-width {
        width: 100%;
        margin-left: 0
    }
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
}

@media screen and (min-width:641px) and (max-width:959px) {
    .modify-profile-link ul {
        padding: 13px 24px 0px 24px !important;
        width: 195px !important;
        line-height: 17px !important;
        height: 195px !important;
    }
    .checkout-container #content-container {
        margin-top: 200px
    }
    #content-container {
        margin-top: 193px
    }
    .register_login {
        width: 43%!important;
        position: absolute!important;
        right: 0;
        top: 0;
        padding-right: 0!important
    }
    ul.login-signin li {
        margin-top: 9px!important
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    .desktop_view {
        display: none
    }
    .menu_checkout_cart .menu_chkout a {
        color: #fff
    }
    ul.menu_checkout_cart > li {
        padding: 6px 37px 6px 19px
    }
    .register_login {
        padding-left: 0
    }
    #header input.text2 {
        width: 99%
    }
    input.image-button {
        right: 18px
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    #tabs-container_product .tabs-menu li {
        width: 49%
    }
    .product-details {
        margin-bottom: 0
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .menu-container .menu {
        width: 100%
    }
    .emt {
        display: none
    }
    .row.second-row .col-md-3.col-lg-3.col-sm-3.col-xs-12 {
        width: 50%!important
    }
    .sub_category #toner_p_browser {
        width: 100%
    }
    div.printable-bar {
        display: none
    }
    .best_sell_ul.row .item_b {
        width: 50%!important
    }
    .hello-name {
        width: 50%;
        float: left;
        margin-top: 10px
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding-right: 0!important
    }
    input.image-button {
        right: 4px!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
}

@media screen and (min-width:960px) and (max-width:1100px) {
    .products .item .itemdiv .image img {
        width: 200px!important;
        height: auto!important
    }
    #content-container {
        margin-top: 118px
    }
    ul.login-signin li {
        margin: 0 3px
    }
    input.image-button {
        right: 18px
    }
    div.printable-bar {
        padding: 11px 0
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .menu-container .menu_checkout_cart {
        width: 22%;
        float: none;
        margin-bottom: 0;
        padding-left: 0;
        position: absolute;
        top: 21px;
        right: 0
    }
    .register_login {
        position: absolute!important;
        right: 0;
        top: 0;
        width: 28%!important
    }
    .emt {
        display: none
    }
    .hello-name {
        width: 50%;
        float: left
    }
    div.checkout-container h1 {
        padding: 4px 5px 16px!important
    }
    .row.second-row .col-md-3.col-lg-3.col-sm-3.col-xs-12 {
        width: 50%!important
    }
    .products .item .itemdiv .image img {
        width: 200px!important
    }
    .product-details .image .image-box #product_thumbnail {
        width: 220px!important;
        height: auto!important
    }
    .register-table .button-row a {
        padding: 4px 9px!important
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding-right: 0!important
    }
    input.image-button {
        right: 4px!important
    }
    .bread_one {
        width: 80%!important;
        float: left
    }
    .bread_two {
        width: 20%!important;
        float: left
    }
}

@media screen and (min-width:1101px) and (max-width:1280px) {
    #content-container {
        margin-top: 118px
    }
    ul.login-signin li {
        margin: 0 3px
    }
    .login-signin {
        display: inline-block;
        padding-top: 10px
    }
    input.image-button {
        right: 18px
    }
    .dialog-category-products-list .item .product_details-button .buttons-row {
        width: auto!important
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .banner-black {
        margin-top: 23px!important
    }
    .hello-name ~ .login-signin {
        padding-top: 0
    }
    .mac-width {
        width: 90%!important
    }
    .row.second-row .image_list .menu-dialog img {
        margin-left: -15px
    }
}

@media screen and (min-width:1281px) and (max-width:1400px) {
    .products .item .itemdiv .image img {
        width: 200px!important;
        height: auto!important
    }
    div.printable-bar {
        padding: 11px 14px
    }
    div.opc-container #center-main {
        width: 100%!important
    }
}

@media screen and (min-width:1401px) and (max-width:1600px) {
    div.opc-container #center-main {
        width: 100%!important
    }
}

@media screen and (min-width:992px) and (max-width:1199px) {
    .row.second-row > div {
        width: 50%!important
    }
    .wishlist_but {
        margin-top: -56px
    }
    .prodetails_left {
        width: 100%
    }
}

@media screen and (min-width:960px) and (max-width:991px) {
    .best_sell_div .best_sell_ul.row .item_b {
        width: 50%!important
    }
    .sub_category #toner_p_browser {
        width: 100%!important
    }
    ul.menu_checkout_cart > li {
        padding: 6px 10px
    }
    #content-container {
        margin-top: 190px
    }
    .checkout-container #content-container {
        margin-top: 196px
    }
}

@media screen and (min-width:992px) and (max-width:1300px) {
    .horizondal-line {
        min-height: 155px;
        text-align: left
    }
    .dialog-category-products-list .products-list .item {
        width: 32%!important
    }
    .item_bestseller .image-wrapper img {
        width: 200px!important;
        height: 150px!important
    }
    .sub_category #toner_p_browser {
        width: 100%!important
    }
}

@media screen and (min-width:1200px) and (max-width:1300px) {
    .row.second-row .image_list .menu-dialog img {
        margin-left: -14px
    }
    .prodetails_left {
        width: 80%
    }
    .prodetails_right {
        width: 20%
    }
}

@media screen and (min-width:1301px) and (max-width:1400px) {
    .row.second-row .image_list .menu-dialog img {
        margin-left: -10px
    }
    .dialog-category-products-list .products-list .item {
        width: 32%!important
    }
    #cboxMiddleRight,
    #cboxTopLeft,
    #cboxTopRight,
    #cboxBottomLeft,
    #cboxBottomRight,
    #cboxBottomCenter,
    #cboxBottomRight,
    #cboxTopCenter {
        display: none!important
    }
}

@media screen and (min-width:361px) and (max-width:509px) {
    .tabs-menu-one li,
    .tabs-menu li {
        padding-left: 9px !important;
    }
    .acr-product-info .acr-image {
        width: 100%;
    }
    .acr-general-product-rating table {
        width: 100% !important
    }
    .acr-product-info .acr-details {
        width: 100% !important;
        margin-left: 0px !important;
        padding-left: 0px !important;
    }
    .submit-coupon {
        width: 100%!important
    }
    .totalsDisplayContainer {
        width: 100%!important;
        margin-top: 10px
    }
    .modify-profile-link ul li {
        float: none;
        padding: 5px 27px 0px 13px;
        text-align: left
    }
    #content-container {
        margin-top: 170px
    }
    ul.login-signin li {
        margin: 5px;
        margin-top: -1px
    }
    #header input.text2 {
        width: 100%
    }
    input.image-button {
        right: 18px
    }
    .menu-container .menu_checkout_cart {
        width: 59%
    }
    .logo img {
        width: 133px!important;
        height: 33px!important
    }
    .register_login {
        position: absolute!important;
        right: 0;
        font-size: 11px;
        padding-right: 0!important;
        top: 2px
    }
    .login-signin {
        padding: 3px;
        width: 100%;
        margin-left: 20%
    }
    .desktop_view {
        display: none
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    ul.menu_checkout_cart > li {
        padding: 0 20px
    }
    ul.login-signin li {
        margin: 0 0 0 3px
    }
    .mobile-view a {
        color: #fff;
        text-decoration: none
    }
    .checkout-container #content-container {
        margin-top: 173px
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .checkout-buttons {
        top: 2%!important;
        right: 0!important
    }
    .cart .right-buttons-row {
        position: relative;
        top: 7px;
        width: auto
    }
    .cart .left-buttons-row {
        position: relative
    }
    .login-signin {
        font-size: 12px
    }
    .menu_chkout a {
        font-size: 14px!important
    }
    .menu-minicart img.icon {
        height: 15px;
        width: 18px
    }
    .ui-tabs .ui-tabs-nav li {
        width: 100%
    }
    #tabs-container_product .tabs-menu li {
        width: 100%;
        text-align: left
    }
    input.send2friend {
        width: auto
    }
    .login-signin {
        float: right!important
    }
    .hello-name {
        font-size: 11px;
        text-align: left
    }
    .modify-profile-link ul {
        width: auto
    }
    .menu-container .menu {
        width: 100%
    }
    .menu > ul > li > ul.normal-sub > li {
        width: 100%!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 0
    }
    ul.address-container {
        text-align: center
    }
    .buttons-row .button-separator {
        margin-bottom: 14px
    }
    .emt {
        display: none
    }
    .hello-name ~ .login-signin {
        margin-top: -18px
    }
    .left-border {
        min-height: 185px!important;
        border: none
    }
    .details_tab {
        width: 100%
    }
    .checkout_menu .menu-minicart .valign-middle.empty {
        font-size: 14px
    }
    #tabs-container,
    #tabs-container-one {
        width: 240px
    }
    .live_support {
        top: 23%
    }
    .sub_category iframe#toner_p_browser {
        height: 300px
    }
    .dialog-category-products-list .item .product_details-button .buttons-row {
        width: 15%!important
    }
    .checkout_menu .valign-middle.full {
        font-size: 10px;
        font-family: arial;
        width: auto;
        display: inline-block;color:#000 !important;
    }
    .input-style,
    input[type=password],
    input[type=text],
    select,
    textarea {
        width: 100%
    }
    #adv_search_box input[type=text] {
        width: auto !important;
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all {
        width: 98%!important;
        left: 1px!important
    }
    .qa-form input[type='text'],
    .qa-form input[type='email'],
    .qa-form select,
    .qa-form textarea {
        width: 100%!important
    }
    .help_menu_last {
        left: 0!important;
        right: 0!important
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    .menu-container .menu {
        width: 100%
    }
    .product-price-text input[type=text] {
        width: auto!important
    }
    div.checkout-container h1 {
        padding: 53px 5px 11px!important
    }
    .print-id {
        display: none
    }
    .submit-coupon {
        width: 100%!important
    }
    .shippingFieldsContainer {
        width: 100%!important
    }
    .emt {
        display: none
    }
    .estimator-container-width {
        width: 100%;
        margin-left: 0
    }
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
    #colorbox {
        width: 100%!important;
        height: 100%!important;
        top: 20%!important;
        position: fixed!important
    }
    #cboxWrapper {
        width: 98%!important;
        height: auto!important
    }
    #cboxWrapper #cboxMiddleLeft {
        height: 100%!important
    }
    #cboxWrapper #cboxContent {
        width: 100%!important;
        height: 100%!important
    }
    #cboxWrapper #cboxLoadedContent {
        width: 100%!important;
        height: 96%!important
    }
    #cboxWrapper #cboxLoadedContent .cboxPhoto {
        width: 100%!important;
        height: 96%!important;
        margin: 0 auto!important
    }
    #cboxMiddleRight,
    #cboxTopLeft,
    #cboxTopRight,
    #cboxBottomLeft,
    #cboxBottomRight,
    #cboxBottomCenter,
    #cboxBottomRight,
    #cboxTopCenter {
        display: none!important
    }
}

@media screen and (min-width:510px) and (max-width:640px) {
    .submit-coupon {
        width: 100%!important
    }
    .shippingFieldsContainer {
        width: 100%!important
    }
    .print-id {
        display: none
    }
    .billingFieldsContainer {
        border: none!important
    }
    .checkout-buttons {
        top: 0!important
    }
    div.checkout-container h1 {
        padding: 41px 5px 16px!important
    }
    #content-container {
        margin-top: 173px
    }
    .checkout-container #content-container {
        margin-top: 193px
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    .desktop_view {
        display: none
    }
    .menu_checkout_cart .menu_chkout a {
        color: #fff
    }
    ul.menu_checkout_cart > li {
        padding: 6px 25px
    }
    .register_login {
        padding-left: 0;
        height: 20px
    }
    .modify-profile-link ul {
        top: 17px;
        padding: 38px 0 38px 24px !important
    }
    .login-signin {
        display: inline
    }
    #header input.text2 {
        width: 99%
    }
    input.image-button {
        right: 4px
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    #tabs-container_product .tabs-menu li {
        width: 49%
    }
    .product-details {
        margin-bottom: 0
    }
    iframe#toner_p_browser {
        height: 286px
    }
    .menu-container .menu {
        width: 100%
    }
    .product-properties div img {
        width: 32%
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.product-added.ui-draggable {
        width: 96%!important;
        left: 4px!important
    }
    ul.login-signin li {
        margin: 0 9px 0 3px
    }
    .banner-black {
        margin-top: 0
    }
    .sub_category iframe#toner_p_browser {
        height: 300px
    }
    .left-border {
        min-height: 185px!important;
        border: none
    }
    .input-style,
    input[type=password],
    input[type=text],
    select,
    textarea {
        width: 100%
    }
    #adv_search_box input[type=text] {
        width: auto !important;
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all {
        width: 98%!important;
        left: 1px!important
    }
    .qa-form input[type='text'],
    .qa-form input[type='email'],
    .qa-form select,
    .qa-form textarea {
        width: 100%!important
    }
    .help_menu_last {
        left: 0!important;
        right: 0!important
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    .menu-container .menu {
        width: 100%
    }
    .register_login {
        top: 0;
        position: absolute!important;
        right: 0
    }
    .register_login .hello-name {
        width: auto;
        float: left
    }
    .hello-name ~ .login-signin {
        width: 53%;
        float: left
    }
    .register_login .login-signin {
        display: inline-block
    }
    .products.products-table.simple-products-table .item_products {
        width: 50%!important;
        float: left
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding: 0 0 0 16px !important
    }
    .emt {
        display: none
    }
    .estimator-container-width {
        width: 100%;
        margin-left: 0
    }
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
}

@media screen and (min-width:641px) and (max-width:959px) {
    .modify-profile-link ul {
        padding: 13px 24px 0px 24px !important;
        width: 195px !important;
        line-height: 17px !important;
        height: 195px !important;
    }
    .checkout-container #content-container {
        margin-top: 200px
    }
    #content-container {
        margin-top: 193px
    }
    .register_login {
        width: 43%!important;
        position: absolute!important;
        right: 0;
        top: 0;
        padding-right: 0!important
    }
    ul.login-signin li {
        margin-top: 9px!important
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    .desktop_view {
        display: none
    }
    .menu_checkout_cart .menu_chkout a {
        color: #fff
    }
    ul.menu_checkout_cart > li {
        padding: 6px 37px 6px 19px
    }
    .register_login {
        padding-left: 0
    }
    #header input.text2 {
        width: 99%
    }
    input.image-button {
        right: 18px
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    #tabs-container_product .tabs-menu li {
        width: 49%
    }
    .product-details {
        margin-bottom: 0
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .menu-container .menu {
        width: 100%
    }
    .emt {
        display: none
    }
    .row.second-row .col-md-3.col-lg-3.col-sm-3.col-xs-12 {
        width: 50%!important
    }
    .sub_category #toner_p_browser {
        width: 100%
    }
    div.printable-bar {
        display: none
    }
    .best_sell_ul.row .item_b {
        width: 50%!important
    }
    .hello-name {
        width: 50%;
        float: left;
        margin-top: 10px
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding-right: 0!important
    }
    input.image-button {
        right: 4px!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
}

@media screen and (min-width:960px) and (max-width:1100px) {
    .products .item .itemdiv .image img {
        width: 200px!important;
        height: auto!important
    }
    #content-container {
        margin-top: 118px
    }
    ul.login-signin li {
        margin: 0 3px
    }
    input.image-button {
        right: 18px
    }
    div.printable-bar {
        padding: 11px 0
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .menu-container .menu_checkout_cart {
        width: 22%;
        float: none;
        margin-bottom: 0;
        padding-left: 0;
        position: absolute;
        top: 21px;
        right: 0
    }
    .register_login {
        position: absolute!important;
        right: 0;
        top: 0;
        width: 28%!important
    }
    .emt {
        display: none
    }
    .hello-name {
        width: 50%;
        float: left
    }
    div.checkout-container h1 {
        padding: 4px 5px 16px!important
    }
    .row.second-row .col-md-3.col-lg-3.col-sm-3.col-xs-12 {
        width: 50%!important
    }
    .products .item .itemdiv .image img {
        width: 200px!important
    }
    .product-details .image .image-box #product_thumbnail {
        width: 220px!important;
        height: auto!important
    }
    .register-table .button-row a {
        padding: 4px 9px!important
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding-right: 0!important
    }
    input.image-button {
        right: 4px!important
    }
    .bread_one {
        width: 80%!important;
        float: left
    }
    .bread_two {
        width: 20%!important;
        float: left
    }
}

@media screen and (min-width:1101px) and (max-width:1280px) {
    #content-container {
        margin-top: 118px
    }
    ul.login-signin li {
        margin: 0 3px
    }
    .login-signin {
        display: inline-block;
        padding-top: 10px
    }
    input.image-button {
        right: 18px
    }
    .dialog-category-products-list .item .product_details-button .buttons-row {
        width: auto!important
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .banner-black {
        margin-top: 23px!important
    }
    .hello-name ~ .login-signin {
        margin-top: 5px;
    padding: 1px;
    margin-right: -11px;
    }
    .mac-width {
        width: 90%!important
    }
    .row.second-row .image_list .menu-dialog img {
        margin-left: -15px
    }
}

@media screen and (min-width:1281px) and (max-width:1400px) {
    .products .item .itemdiv .image img {
        width: 200px!important;
        height: auto!important
    }
    div.printable-bar {
        padding: 11px 14px
    }
    div.opc-container #center-main {
        width: 100%!important
    }
}

@media screen and (min-width:1401px) and (max-width:1600px) {
    div.opc-container #center-main {
        width: 100%!important
    }
}

@media screen and (min-width:992px) and (max-width:1199px) {
    .row.second-row > div {
        width: 50%!important
    }
    .wishlist_but {
        margin-top: -56px
    }
    .prodetails_left {
        width: 100%
    }
}

@media screen and (min-width:960px) and (max-width:991px) {
    .best_sell_div .best_sell_ul.row .item_b {
        width: 50%!important
    }
    .sub_category #toner_p_browser {
        width: 100%!important
    }
    ul.menu_checkout_cart > li {
        padding: 6px 10px
    }
    #content-container {
        margin-top: 190px
    }
    .checkout-container #content-container {
        margin-top: 196px
    }
}

@media screen and (min-width:992px) and (max-width:1300px) {
    .horizondal-line {
        min-height: 155px;
        text-align: left
    }
    .dialog-category-products-list .products-list .item {
        width: 32%!important
    }
    .item_bestseller .image-wrapper img {
        width: 200px!important;
        height: 150px!important
    }
    .sub_category #toner_p_browser {
        width: 100%!important
    }
}

@media screen and (min-width:1200px) and (max-width:1300px) {
    .row.second-row .image_list .menu-dialog img {
        margin-left: -14px
    }
    .prodetails_left {
        width: 80%
    }
    .prodetails_right {
        width: 20%
    }
}

@media screen and (min-width:1301px) and (max-width:1400px) {
    .row.second-row .image_list .menu-dialog img {
        margin-left: -10px
    }
    .dialog-category-products-list .products-list .item {
        width: 32%!important
    }
    #Add_to_cart_popup_window .upselling.details img {
        width: 200px!important;
        height: 150px
    }
    .item_bestseller {
        min-height: 306px!important
    }
}

@media screen and (min-width:2000px) {
    .mac-width {
        width: 50%!important
    }
    div.printable-bar {
        float: none!important;
        text-align: center;
        margin-left: 27px
    }
}

@media screen and (max-width:959px) {
	#header .line1 .logo a img {
    width: 230px;
    height: 47px;
}#header .line1 > div:nth-child(3) {
   
    width: auto !important;
}.menu-minicart img.icon{width:15px ;height:15px}
	#header .line1 > div{padding: 0 !important}
	.mob_png{display:inline-block !important}
	.desk_png{display:none}.mobile-view{right:20px !important;margin-top: 20px;
/*margin-right: 20px;*/}.register_login{width:auto !important;margin-top: 0px;
margin-right: 10px;}
	.mobile-view .menu_checkout_cart > li:nth-child(1) {display:none}
	.mobile-view  ul.menu_checkout_cart > li{width:auto;  padding: 0px 0px 0px 0px !important;background:none}
    .mobile-view  ul.menu_checkout_cart > li *,.checkout_menu .valign-middle.full{/*color:#000 !important*/}
	.mobile-view  ul.menu_checkout_cart > li >a{color:#fff !important}
	.help_menu_last {
        position: static!important
    }
    .help_menu_ {
        padding: 7px!important
    }
}

@media screen and (min-width:1101px) and (max-width:1495px) {
    #footer .customer_revw .menu-reviews-section div.acr-image {
        width: 100%
    }
    .left-border {
        min-height: 418px
    }
}

@media screen and (min-width:992px) and (max-width:1170px) {
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
}

@media screen and (min-width:1010px) and (max-width:1062px) {
    .dialog-category-products-list .products.products-list .item {
        min-height: 320px!important
    }
}

@media screen and (min-width:409px) and (max-width:509px) {
    .register_login {
        width: 45%!important
    }
}

@media screen and (min-width:768px) and (max-width:875px) {
    .wishlist_but {
        margin-top: -52px;
        margin-right: 8px
    }
    .prodetails_left {
        width: 100%
    }
}

@media screen and (min-width:768px) and (max-width:1000px) {
    .details_tab {
        width: 100%
    }
}

@media screen and (min-width:1037px) and (max-width:1128px) {
    .dialog-category-products-list .products.products-list .item {
        min-height: 320px!important
    }
}

.price_qty button.button .button-right {
    height: auto!important
}

.price_qty {
    display: inline-block;
    width: 100%;
    margin-bottom: 13px
}

.valign-middle.empty strong {
    font-weight: 500;
    font-size: 16px
}

.item_bestseller {
    margin-bottom: 30px
}

.item_bestseller .image-wrapper {
    text-align: center
}

.item_bestseller .buttons-row .button {
    float: none
}

.item_bestseller .price-value {
    color: #cc230c;
    font-size: 13pt;
    font-family: arial;
    font-weight: 600
}

.item_bestseller .product-title {
    line-height: 20px;
    text-decoration: none;
    font-size: 15px;
    width: 100%;
    display: inline-block;
    text-align: left;
    color: #000;
    font-family: 'source_sans_prosemibold';
    min-height: 70px
}

.minicart-box .menu {
    width: 100%
}

.minicart-box .view-cart-link a,
.minicart-box .checkout-link a {
    border: none!important;
    color: #fff!important;
    text-decoration: none
}

.minicart-box .view-cart-link,
.minicart-box .checkout-link {
    float: left;
    margin-left: 21px;
    background: #547020!important;
    color: #fff!important;
    padding: 5px 10px;
    border-radius: 3px
}
.minicart-box .view-cart-link a,
.minicart-box .checkout-link a{
	color: #fff!important;
}

#footer {
    color: #000;
    display: inline-block;
    border-top: 1px solid #adadad;
    font-family: Arial
}

.reviews_order div.button a {
    padding-left: 0!important;
    color: #cc230c;
    font-family: arial;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px
}

.ask-question a.simple-button {
    font-size: 15px
}

.reviews_order ul {
    width: 100%;
    padding: 0
}

.reviews_order ul li {
    list-style: none;
    float: left;
    margin-left: 2px
}

.live_support {
    position: fixed;
    top: 20%;
    right: -212px;
    z-index: 16
}

.left_live {
    width: auto;
    float: left;
    margin-top: 10%
}

.right_live {
    float: right;
    border: 1px solid #595959;
    background: #eee;
    padding-left: 20px;
    position: relative;
    width: 212px
}

.live_close {
    width: 20px;
    width: 20px;
    position: absolute;
    top: -9px;
    left: -3px
}

.hr_to_help {
    font-family: arial;
    font-weight: 600;
    font-size: 16px;
    margin: 12px 0
}

.online_q {
    margin-bottom: 18px
}

.live_msg {
    margin-bottom: 11px
}

.checkout-top-login {
    display: none
}

.banner-black .menu-dialog.menu-toner {
    display: inline-block
}

.banner-black .menu-dialog.menu-ink {
    display: inline-block
}

.sub_category #toner_p_browser {
    width: 83%;
    height: 123px
}

#tabs-container_product .tabs-menu li {
    padding-left: 0!important
}

.item_bestseller {
    min-height: 250px!important
}

.login-signin {
    display: inline-block;
    padding-left: 0
}

#tab-2 {
    height: 190px
}

#tabs-container #toner_c_browser {
    height: 205px!important
}

#tabs-container #tab-1 .content {
    height: 190px
}

#tabs-container-one #ink_c_browser {
    height: 244px!important
}

#tabs-container-one #tab-3 .content {
    height: 187px
}

.wishlist_but {
    margin-top: 12px;
    float: right
}

.checkout-container #header input.text {
    max-width: 100%!important
}

.browser_cat {
    font-family: arial;
    font-weight: 700;
    font-size: 18px;
    color: #000
}

.quantity.but-left {
    float: left
}

.buttons-row.but_right {
    float: right;
    margin-top: -4px
}

.price-row {
    text-align: center;
    margin-bottom: -23px
}

#Add_to_cart_popup_window .upselling.details img {
    width: 200px!important;
    height: 150px!important
}

.products-list .item .itemdiv .acr-general-product-rating {
    display: none!important
}

.products.products-table.simple-products-table .product_details-button.details {
    margin-top: -32px
}

.minicart-box .cart-items a {
    color: #000
}

.minicart-box .cart-items a:hover {
    color: #000!important
}

#Add_to_cart_popup_window .title {
    text-align: center
}

#Add_to_cart_popup_window .price {
    text-align: center
}

#Add_to_cart_popup_window .buy.product-input {
    text-align: center
}

#Add_to_cart_popup_window .buy.product-input .main-button .button-left {
    background: url(../images/cart_button.png) no-repeat!important;
    border: none;
    width: 39px;
    height: 32px;
    color: transparent;
    padding: 0!important
}

#Add_to_cart_popup_window .details .title {
    text-align: left
}

#Add_to_cart_popup_window .details .price {
    text-align: left
}

.item_b {
    min-height: 270px!important
}

.send2friend-dialog .data-table label {
    font-weight: 400!important;
    font-family: 'source_sans_proregular'
}

.acr-dialog .button a {
    font-family: 'source_sans_prosemibold';
    font-size: 14px
}

.menu-news,
.menu-news .news {
    font-family: Arial
}

.menu-news .mews_msg {
    font-family: Arial
}

.menu-reviews-section .acr-item {
    font-family: Arial
}

.price_qty .property-value {
    font-family: Arial
}

.products.products-table.simple-products-table .item_products {
    min-height: 260px
}

.item_products .image-wrapper img {
    width: 200px
}

.best_sell_div .image-wrapper img {
    width: 200px;
    height: auto
}

.item_b .image-wrapper {
    min-height: 166px
}

#tab-31 .acr-general-product-rating {
    width: 100%
}

#tab-31 .acr-general-product-rating table {
    width: 130px;
    float: left
}

#tab-31 .reviews_order {
    width: 100%
}

.prodetails_left .acr-general-product-rating {
    display: inline-table
}

.products .item .itemdiv .image img {
    width: 200px!important;
    height: auto!important
}

.dialog-featured-list .title h2 {
    background: #e0e0db;
    color: #000!important;
    padding: 8px 16px;
    font-size: 20px
}

.checkout-container .search div.checkout-container input[type=text] {
    padding: 11px 5px!important
}

.estimator-container-width {
    width: 45%;
    margin-left: 55%
}

.float-left {
    font-weight: 600
}

.line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
    position: relative
}

.prodetails_left {
    width: 70%;
    float: left
}

.product_details-button button.button .button-left {
    width: 39px!important
}

.live_msg a {
    text-decoration: none
}

.live_msg a:hover {
    text-decoration: none
}

.text-font-pop {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    padding-left: 7px
}

.product-ask-form .input-style,
input[type=password],
input[type=text],
select,
textarea {
    margin-bottom: 3px
}

@media screen and (max-width:360px) {
    #adv_search_box input[type=text] {
        width: auto !important;
    }
   
    .tabs-menu-one li,
    .tabs-menu li {
        padding-left: 9px !important;
    }
    #content-container {
        margin-top: 169px
    }
    #header input.text2 {
        width: 100%
    }
    input.image-button {
        right: 4px
    }
    .menu-container .menu_checkout_cart {
        width: 59%
    }
    .logo img {
        width: 131px!important;
        height: 35px!important
    }
    .register_login {
        position: absolute!important;
        right: 0;
        font-size: 11px;
        padding-right: 0!important;
       
        z-index: 1
    }
    .login-signin {
        padding: 3px;
        margin-left: 2px
    }
    .desktop_view {
        display: none
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top:0
    }
    ul.menu_checkout_cart > li {
        padding: 0 15px
    }
    ul.menu_checkout_cart > li:nth-child(1) {
        padding: 0 18px 0 8px
    }
    .mobile-view a {
        color: #fff;
        text-decoration: none
    }
    ul.login-signin li {
        margin: 0 0 0 3px
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.product-added.ui-draggable {
        width: 96%!important;
        left: 4px!important
    }
    .checkout-container #content-container {
        margin-top: 184px
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .products {
        margin-top: 50px;
        display: inline-block
    }
    .checkout-buttons {
        top: 1%!important;
        right: 0!important
    }
    .cart .right-buttons-row {
        position: relative;
        top: 42px;
        width: auto;
        right: 8px;
        display: none
    }
    .dialog {
        margin: 0;
        margin-bottom: 38px
    }
    .login-signin {
        font-size: 12px
    }
    .menu_chkout a {
        font-size: 14px!important
    }
    .menu-minicart img.icon {
        height: 13px;
        width: 16px
    }
    .ui-tabs .ui-tabs-nav li {
        width: 100%
    }
    #tabs-container_product .tabs-menu li {
        width: 100%;
        text-align: left
    }
    input.send2friend {
        width: auto
    }
    .login-signin {
        margin-top: 0;
        float: right!important
    }
    .hello-name {
        font-size: 12px;
        text-align: right;
        margin-right: 86px;
    }
    .modify-profile-link ul {
        width: 100%;
        text-align: left
    }
    .menu-container .menu {
        width: 100%
    }
    .menu > ul > li > ul.normal-sub > li {
        width: 100%!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 0
    }
    ul.address-container {
        text-align: center
    }
    .buttons-row .button-separator {
        margin-bottom: 14px
    }
    .emt {
        display: none
    }
    .hello-name ~ .login-signin {
        margin-top: -20px
    }
    .left-border {
        min-height: 185px!important;
        border: none
    }
    .details_tab {
        width: 100%
    }
    .checkout_menu .menu-minicart .valign-middle.empty {
        font-size: 17px
    }
    #tabs-container,
    #tabs-container-one {
        width: 240px
    }
    .live_support {
        top: 43%
    }
    .sub_category iframe#toner_p_browser {
        height: 300px
    }
    .product-details .details {
        padding-left: 9px;
        margin-top: 20px
    }
    .dialog-category-products-list .item .product_details-button .buttons-row {
        width: 18%!important
    }
    h1.green {
        padding: 0
    }
    .checkout_menu .valign-middle.full {
        font-size: 12px;
        font-family: arial;
        width: auto;
        display: inline-block;
        padding-top: 1px
    }
    .input-style,
    input[type=password],
    input[type=text],
    select,
    textarea {
        width: 100%
    }
    #adv_search_box input[type=text] {
        width: auto !important;
    }
    .hello-name ~ ul.login-signin li {
        font-size: 12px;
        z-index: 999;
    }
    .checkoutAddressBook {
        display: none
    }
    .register_login {
        width: 100%!important;
        height: 20px
    }
    .logo a {
        z-index: 12
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all {
        width: 98%!important;
        left: 1px!important
    }
    .qa-form input[type='text'],
    .qa-form input[type='email'],
    .qa-form select,
    .qa-form textarea {
        width: 100%!important
    }
    .help_menu_last {
        left: 0!important;
        right: 0!important
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    .products-list .item .itemdiv .image img {
        width: 200px!important;
        height: 150px!important
    }
    .menu-container .menu {
        width: 100%
    }
    .product-price-text input[type=text] {
        width: auto!important
    }
    div.checkout-container h1 {
        padding: 53px 5px 11px!important
    }
    .modify-profile-link ul li {
        float: none;
        padding: 4px 0;
        text-align: left
    }
    .products-list .image {
        padding: 0
    }
    .buttons-auto-separator .button,
    .buttons-auto-separator a.simple-button,
    .buttons-auto-separator button.simple-button {
        margin-right: 0!important
    }
    input.image-button {
        top: 5%!important
    }
    .menu-reviews-section .acr-link {
        text-align: center!important
    }
    .menu-reviews-section .acr-link a {
        width: 100%
    }
    .checkoutImageBox img {
        width: 227px!important
    }
    div#checkoutModalPasswordRecovery {
        width: 100%!important
    }
    .help_menu_ {
        padding-left: 5px!important
    }
    .print-id {
        display: none
    }
    .valign-middle.empty strong {
        font-size: 13px
    }
    .menu-line-height {
        line-height: 19px!important
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding: 0 0 0 16px !important
    }
    .submit-coupon {
        width: 100%!important
    }
    .shippingFieldsContainer {
        width: 100%!important
    }
    .totalsDisplayContainer {
        width: 100%!important;
        margin-top: 10px
    }
    .emt {
        display: none
    }
    .register-table .button-row a {
        padding: 4px 7px!important
    }
    .estimator-container-width {
        width: 100%;
        margin-left: 0
    }
    .submit-coupon {
        width: 100%!important
    }
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
    .AJAXSearch {
        top: 13%!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
    #colorbox {
        width: 100%!important;
        height: 100%!important;
        top: 20%!important;
        position: fixed!important
    }
    #cboxWrapper {
        width: 98%!important;
        height: auto!important
    }
    #cboxWrapper #cboxMiddleLeft {
        height: 100%!important
    }
    #cboxWrapper #cboxContent {
        width: 100%!important;
        height: 100%!important
    }
    #cboxWrapper #cboxLoadedContent {
        width: 100%!important;
        height: 96%!important
    }
    #cboxWrapper #cboxLoadedContent .cboxPhoto {
        width: 100%!important;
        height: 96%!important;
        margin: 0 auto!important
    }
    #cboxMiddleRight,
    #cboxTopLeft,
    #cboxTopRight,
    #cboxBottomLeft,
    #cboxBottomRight,
    #cboxBottomCenter,
    #cboxBottomRight,
    #cboxTopCenter {
        display: none!important
    }
}

@media screen and (min-width:361px) and (max-width:509px) {
    .submit-coupon {
        width: 100%!important
    }
    .totalsDisplayContainer {
        width: 100%!important;
        margin-top: 10px
    }
    .modify-profile-link ul li {
        float: none;
        padding: 5px 27px 0px 13px;
        text-align: left
    }
    #content-container {
        margin-top: 170px
    }
    ul.login-signin li {
        margin: 5px;
        margin-top: -1px
    }
    #header input.text2 {
        width: 100%
    }
    input.image-button {
        right: 18px
    }
    .menu-container .menu_checkout_cart {
        width: 59%
    }
    .logo img {
        width: 133px!important;
        height: 33px!important
    }
    .register_login {
        position: absolute!important;
        right: 0;
        font-size: 11px;
        padding-right: 0!important;
        top: 2px
    }
    .login-signin {
        padding: 3px;
        width: 100%;
        margin-left: 20%
    }
    .desktop_view {
        display: none
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    ul.menu_checkout_cart > li {
        padding: 0 20px
    }
    ul.login-signin li {
        margin: 0 0 0 3px
    }
    .mobile-view a {
        color: #fff;
        text-decoration: none
    }
    .checkout-container #content-container {
        margin-top: 173px
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .checkout-buttons {
        top: 2%!important;
        right: 0!important
    }
    .cart .right-buttons-row {
        position: relative;
        top: 7px;
        width: auto
    }
    .cart .left-buttons-row {
        position: relative
    }
    .login-signin {
        font-size: 12px
    }
    .menu_chkout a {
        font-size: 14px!important
    }
    .menu-minicart img.icon {
        height: 15px;
        width: 18px
    }
    .ui-tabs .ui-tabs-nav li {
        width: 100%
    }
    #tabs-container_product .tabs-menu li {
        width: 100%;
        text-align: left
    }
    input.send2friend {
        width: auto
    }
    .login-signin {
        float: right!important
    }
    .hello-name {
        font-size: 11px;
        text-align: left
    }
    .modify-profile-link ul {
        width: auto
    }
    .menu-container .menu {
        width: 100%
    }
    .menu > ul > li > ul.normal-sub > li {
        width: 100%!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 0
    }
    ul.address-container {
        text-align: center
    }
    .buttons-row .button-separator {
        margin-bottom: 14px
    }
    .emt {
        display: none
    }
    .hello-name ~ .login-signin {
        margin-top: -18px
    }
    .left-border {
        min-height: 185px!important;
        border: none
    }
    .details_tab {
        width: 100%
    }
    .checkout_menu .menu-minicart .valign-middle.empty {
        font-size: 14px
    }
    #tabs-container,
    #tabs-container-one {
        width: 240px
    }
    .live_support {
        top: 23%
    }
    .sub_category iframe#toner_p_browser {
        height: 300px
    }
    .dialog-category-products-list .item .product_details-button .buttons-row {
        width: 15%!important
    }
    .checkout_menu .valign-middle.full {
        font-size: 10px;
        font-family: arial;
        width: auto;
        display: inline-block
    }
    .input-style,
    input[type=password],
    input[type=text],
    select,
    textarea {
        width: 100%
    }
    #adv_search_box input[type=text] {
        width: auto !important;
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all {
        width: 98%!important;
        left: 1px!important
    }
    .qa-form input[type='text'],
    .qa-form input[type='email'],
    .qa-form select,
    .qa-form textarea {
        width: 100%!important
    }
    .help_menu_last {
        left: 0!important;
        right: 0!important
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    .menu-container .menu {
        width: 100%
    }
    .product-price-text input[type=text] {
        width: auto!important
    }
    div.checkout-container h1 {
        padding: 53px 5px 11px!important
    }
    .print-id {
        display: none
    }
    .submit-coupon {
        width: 100%!important
    }
    .shippingFieldsContainer {
        width: 100%!important
    }
    .emt {
        display: none
    }
    .estimator-container-width {
        width: 100%;
        margin-left: 0
    }
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
    #colorbox {
        width: 100%!important;
        height: 100%!important;
        top: 20%!important;
        position: fixed!important
    }
    #cboxWrapper {
        width: 98%!important;
        height: auto!important
    }
    #cboxWrapper #cboxMiddleLeft {
        height: 100%!important
    }
    #cboxWrapper #cboxContent {
        width: 100%!important;
        height: 100%!important
    }
    #cboxWrapper #cboxLoadedContent {
        width: 100%!important;
        height: 96%!important
    }
    #cboxWrapper #cboxLoadedContent .cboxPhoto {
        width: 100%!important;
        height: 96%!important;
        margin: 0 auto!important
    }
    #cboxMiddleRight,
    #cboxTopLeft,
    #cboxTopRight,
    #cboxBottomLeft,
    #cboxBottomRight,
    #cboxBottomCenter,
    #cboxBottomRight,
    #cboxTopCenter {
        display: none!important
    }
}

@media screen and (min-width:510px) and (max-width:640px) {
    .submit-coupon {
        width: 100%!important
    }
    .shippingFieldsContainer {
        width: 100%!important
    }
    .print-id {
        display: none
    }
    .billingFieldsContainer {
        border: none!important
    }
    .checkout-buttons {
        top: 0!important
    }
    div.checkout-container h1 {
        padding: 41px 5px 16px!important
    }
    #content-container {
        margin-top: 173px
    }
    .checkout-container #content-container {
        margin-top: 193px
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    .desktop_view {
        display: none
    }
    .menu_checkout_cart .menu_chkout a {
        color: #fff
    }
    ul.menu_checkout_cart > li {
        padding: 6px 25px
    }
    .register_login {
        padding-left: 0;
        height: 20px
    }
    .modify-profile-link ul {
        top: 17px;
        padding: 38px 0 38px 24px !important
    }
    .login-signin {
        display: inline
    }
    #header input.text2 {
        width: 99%
    }
    input.image-button {
        right: 4px
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    #tabs-container_product .tabs-menu li {
        width: 49%
    }
    .product-details {
        margin-bottom: 0
    }
    iframe#toner_p_browser {
        height: 286px
    }
    .menu-container .menu {
        width: 100%
    }
    .product-properties div img {
        width: 32%
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.product-added.ui-draggable {
        width: 96%!important;
        left: 4px!important
    }
    ul.login-signin li {
        margin: 0 9px 0 3px
    }
    .banner-black {
        margin-top: 0
    }
    .sub_category iframe#toner_p_browser {
        height: 300px
    }
    .left-border {
        min-height: 185px!important;
        border: none
    }
    .input-style,
    input[type=password],
    input[type=text],
    select,
    textarea {
        width: 100%
    }
    #adv_search_box input[type=text] {
        width: auto !important;
    }
    .ui-dialog.ui-widget.ui-widget-content.ui-corner-all {
        width: 98%!important;
        left: 1px!important
    }
    .qa-form input[type='text'],
    .qa-form input[type='email'],
    .qa-form select,
    .qa-form textarea {
        width: 100%!important
    }
    .help_menu_last {
        left: 0!important;
        right: 0!important
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    .menu-container .menu {
        width: 100%
    }
    .register_login {
        top: 0;
        position: absolute!important;
        right: 0
    }
    .register_login .hello-name {
        width: auto;
        float: left;
    }
    .hello-name ~ .login-signin {
        width: 103px;
        float: left
    }
    .register_login .login-signin {
        display: inline-block
    }
    .products.products-table.simple-products-table .item_products {
        width: 50%!important;
        float: left
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding: 0 0 0 16px !important
    }
    .emt {
        display: none
    }
    .estimator-container-width {
        width: 100%;
        margin-left: 0
    }
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
}

@media screen and (min-width:641px) and (max-width:959px) {
    .modify-profile-link ul {
        padding: 13px 24px 0px 24px !important;
        width: 195px !important;
        line-height: 17px !important;
        height: 195px !important;
    }
    .checkout-container #content-container {
        margin-top: 200px
    }
    #content-container {
        margin-top: 193px
    }
    .register_login {
        width: 43%!important;
        position: absolute!important;
        right: 0;
        top: 0;
        padding-right: 0!important
    }
    ul.login-signin li {
        margin-top: 9px!important
    }
    .mobile-view {
        display: block;
        position: absolute;
        right: 0;
        top: 0
    }
    .desktop_view {
        display: none
    }
    .menu_checkout_cart .menu_chkout a {
        color: #fff
    }
    ul.menu_checkout_cart > li {
        padding: 6px 19px 6px 19px
    }
    .register_login {
        padding-left: 0
    }
    #header input.text2 {
        width: 99%
    }
    input.image-button {
        right: 18px
    }
    .product-details .details {
        padding-left: 0;
        margin-top: 22px
    }
    #tabs-container_product .tabs-menu li {
        width: 49%
    }
    .product-details {
        margin-bottom: 0
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .menu-container .menu {
        width: 100%
    }
    .emt {
        display: none
    }
    .row.second-row .col-md-3.col-lg-3.col-sm-3.col-xs-12 {
        width: 50%!important
    }
    .sub_category #toner_p_browser {
        width: 100%
    }
    div.printable-bar {
        display: none
    }
    .best_sell_ul.row .item_b {
        width: 50%!important
    }
    .hello-name {
        width: 50%;
        float: left;
        margin-top: 10px
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding-right: 0!important
    }
    input.image-button {
        right: 4px!important
    }
    .menu > ul > li > ul.normal-sub > li a {
        padding: 2px 0
    }
}

@media screen and (min-width:960px) and (max-width:1100px) {
    .products .item .itemdiv .image img {
        width: 200px!important;
        height: auto!important
    }
    #content-container {
        margin-top: 118px
    }
    ul.login-signin li {
        margin: 0 3px
    }
    input.image-button {
        right: 18px
    }
    div.printable-bar {
        padding: 11px 0
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .menu-container .menu_checkout_cart {
        width: 22%;
        float: none;
        margin-bottom: 0;
        padding-left: 0;
        position: absolute;
        top: 21px;
        right: 0
    }
    .register_login {
        position: absolute!important;
        right: 0;
        top: 0;
        width: 28%!important
    }
    .emt {
        display: none
    }
    .hello-name {
        width: 50%;
        float: left
    }
    div.checkout-container h1 {
        padding: 4px 5px 16px!important
    }
    .row.second-row .col-md-3.col-lg-3.col-sm-3.col-xs-12 {
        width: 50%!important
    }
    .products .item .itemdiv .image img {
        width: 200px!important
    }
    .product-details .image .image-box #product_thumbnail {
        width: 220px!important;
        height: auto!important
    }
    .register-table .button-row a {
        padding: 4px 9px!important
    }
    .line1 .col-md-6.col-xs-12.col-lg-6.text-justify.margin-bottom {
        padding-right: 0!important
    }
    input.image-button {
        right: 4px!important
    }
    .bread_one {
        width: 80%!important;
        float: left
    }
    .bread_two {
        width: 20%!important;
        float: left
    }
}

@media screen and (min-width:1101px) and (max-width:1280px) {
    #content-container {
        margin-top: 118px
    }
    ul.login-signin li {
        margin: 0 3px
    }
    .login-signin {
        display: inline-block;
        padding-top: 10px
    }
    input.image-button {
        right: 18px
    }
    .dialog-category-products-list .item .product_details-button .buttons-row {
        width: auto!important
    }
    .nbs-flexisel-nav-left {
        margin-left: 0
    }
    div.opc-container #center-main {
        width: 100%!important
    }
    .banner-black {
        margin-top: 23px!important
    }
    .hello-name ~ .login-signin {
        padding-top: 0
    }
    .mac-width {
        width: 90%!important
    }
    .row.second-row .image_list .menu-dialog img {
        margin-left: -15px
    }
}

@media screen and (min-width:1281px) and (max-width:1400px) {
    .products .item .itemdiv .image img {
        width: 200px!important;
        height: auto!important
    }
    div.printable-bar {
        padding: 11px 14px
    }
    div.opc-container #center-main {
        width: 100%!important
    }
}

@media screen and (min-width:1401px) and (max-width:1600px) {
    div.opc-container #center-main {
        width: 100%!important
    }
}

@media screen and (min-width:992px) and (max-width:1199px) {
    .row.second-row > div {
        width: 50%!important
    }
    .wishlist_but {
        margin-top: -56px
    }
    .prodetails_left {
        width: 100%
    }
}

@media screen and (min-width:960px) and (max-width:991px) {
    .best_sell_div .best_sell_ul.row .item_b {
        width: 50%!important
    }
    .sub_category #toner_p_browser {
        width: 100%!important
    }
    ul.menu_checkout_cart > li {
        padding: 6px 10px
    }
    #content-container {
        margin-top: 190px
    }
    .checkout-container #content-container {
        margin-top: 196px
    }
}

@media screen and (min-width:992px) and (max-width:1300px) {
    .horizondal-line {
        min-height: 155px;
        text-align: left
    }
    .dialog-category-products-list .products-list .item {
        width: 32%!important
    }
    .item_bestseller .image-wrapper img {
        width: 200px!important;
        height: 150px!important
    }
    .sub_category #toner_p_browser {
        width: 100%!important
    }
}

@media screen and (min-width:1200px) and (max-width:1300px) {
    .row.second-row .image_list .menu-dialog img {
        margin-left: -14px
    }
    .prodetails_left {
        width: 80%
    }
    .prodetails_right {
        width: 20%
    }
}

@media screen and (min-width:1301px) and (max-width:1400px) {
    .row.second-row .image_list .menu-dialog img {
        margin-left: -10px
    }
    .dialog-category-products-list .products-list .item {
        width: 32%!important
    }
    #Add_to_cart_popup_window .upselling.details img {
        width: 200px!important;
        height: 150px
    }
    .item_bestseller {
        min-height: 306px!important
    }
}

@media screen and (min-width:2000px) {
    .mac-width {
        width: 50%!important
    }
    div.printable-bar {
        float: none!important;
        text-align: center;
        margin-left: 27px
    }
}

@media screen and (max-width:959px) {
    .help_menu_last {
        position: static!important
    }
    .help_menu_ {
        padding: 7px!important
    }
}

@media only screen and (max-width: 959px) {
	.checkout_menu .menu-minicart .valign-middle.empty {
		color:#000 !important;
	}
	.checkout_menu .valign-middle.full{color:#000 !important;}
	
	}
	
}

@media screen and (min-width:1101px) and (max-width:1495px) {
    #footer .customer_revw .menu-reviews-section div.acr-image {
        width: 100%
    }
    .left-border {
        min-height: 418px
    }
}

@media screen and (min-width:992px) and (max-width:1170px) {
    #header .line1 .logo a img {
        width: 230px;
        height: 47px
    }
}

@media screen and (min-width:1010px) and (max-width:1062px) {
    .dialog-category-products-list .products.products-list .item {
        min-height: 320px!important
    }
}

@media screen and (min-width:409px) and (max-width:509px) {
    .register_login {
        width: 45%!important
    }
}

@media screen and (min-width:768px) and (max-width:875px) {
    .wishlist_but {
        margin-top: -52px;
        margin-right: 8px
    }
    .prodetails_left {
        width: 100%
    }
}

@media screen and (min-width:768px) and (max-width:1000px) {
    .details_tab {
        width: 100%
    }
}

@media screen and (min-width:1037px) and (max-width:1128px) {
    .dialog-category-products-list .products.products-list .item {
        min-height: 320px!important
    }
}

@media (max-width: 959px) {
ul.login-signin #href_Sign_in{background: transparent none repeat scroll 0% 0%;padding-left: 20px;}
ul.login-signin li{width:auto}
ul.login-signin{min-width: 100%;
left: auto !important;}
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: block;
    float: left;
    min-width: 160px;
    padding: 2px 6px;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 5px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    -moz-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    background-clip: padding-box;
	 transition: all linear 0.5s;
	  -webkit-transition: all linear 0.5s;
	   -moz-transition: all linear 0.5s;
	 
}
.dropdown-menu {
    min-width: 200px;
    padding: 0;
    margin: 0;
    font-size: 14px;
    background-color: #fafafa;
    border: 1px solid #fafafa;
    border-radius: 2px;
    background-clip: border-box;
	  transition: all linear 0.5s;
	  -webkit-transition: all linear 0.5s;
	   -moz-transition: all linear 0.5s;
	   }
	   
	   .mobile_menu_theme .login-signin li{width:100%;margin-top:0px;    font-size: 15px;padding:0px;}
		.mob_rel_menu a, .mob_rel_menu{color:#FFC300 !important}
	  .mobile_menu_theme ul.login-signin #href_Sign_in{padding-left:0px;}
	  #header .line1 .register_login{display:none !important}
	  .mobile_menu_theme .modify-profile-link ul{background:none !important;position:relative !important}
	  .mobile_menu_theme .modify-profile-link ul{padding:0px !important;right:0px !important}
	  .show-on-mobile .mobile_menu_theme .help_menu_last{width:100% !important}
	  .menu > ul > li > ul{width:100% !important}
	  .menu > ul > li a{    padding: 0px !important;}
}

@media (min-width: 959px) {
.mobile_menu_theme{display:none;}
.modify-profile-link:hover ul {
    display: block
}
.menu > ul > li.help_menu_{position:relative;}
.mob_rel_menu{display:none;}
}

.grecaptcha-badge {
    display: none;
}

/* Custom Tagline Styling - Fixed */

/* Desktop: show tagline below search */
.site-tagline {
    font-size: 17px;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    display: block;
    margin: 0 0 -2px;
}

/* Hide green bar tagline on desktop */
@media (min-width: 960px) {
    .line2 .site-tagline {
        display: none;
    }
}

/* The tagline must occupy real space, or the green bar rides up over it.
   ------------------------------------------------------------------------
   The tagline was added underneath the search form, inside .valign-middle, but
   its container

       #header div.search { ... height: 39px ... }     (top of this file)

   is pinned to the height of the search box alone. So .valign-middle grows to
   70px to hold form + tagline while .search stays 39px, and the tagline hangs
   OUTSIDE its container's box: nothing above it counts those 25px, .line1 never
   reserves them, and .menu-container - the green bar, the next block in flow -
   is laid out as if the tagline were not there and paints its green over the top
   of the text.

   That it looks right on a wide screen is luck, not design. Over 1170px the logo
   is at full size, which makes .line1 82px tall, which happens to clear the
   tagline's 80px bottom edge by 2px. At 1170px and below the logo drops to 47px
   (see the .logo a img rule in the 992-1170 band), .line1 collapses to 62px, and
   the bar lands 18px into the text. Between 960 and 991 the header stacks, the
   tagline lands at 127-152 while .line1 ends at 126, and the bar covers it
   completely. Both were the same missing 25px.

   Letting .search size to its content puts the tagline back inside the flow, so
   .line1 measures it and the bar starts below it - at every width, without a
   per-band offset to maintain. min-height keeps the original 39px floor for the
   pages and widths where the tagline is hidden. Measured: the search input and
   the logo do not move at any width; the bar moves down 21px where it was
   overlapping, and 1px where it was not.

   Scoped to 960px and up to match the tagline's own visibility - below that the
   .search copy is hidden and a separate .line2 copy shows inside the green bar. */
@media (min-width: 960px) {
    #header div.search {
        height: auto;
        min-height: 39px;
    }
}

/* Mobile/iPad: hide desktop tagline, show only in green bar */
@media (max-width: 959px) {
    .search .site-tagline {
        display: none;
    }
	.line2 .site-tagline {
        display: block;
        color: #fff;
        font-weight: bold;
        font-size: 17px;
        text-align: center;
        padding: 2px 0;
        margin: -2px 0;
        position: static;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .line2 .site-tagline {
        font-size: 17px;
        padding: 1px 0;
        margin: -2px 0;
    }
}

/* ============================================================
   X-cart 4.7.x additions — responsive/new component styles
   ported from ideal_responsive to maintain 4.7.10 compatibility
   ============================================================ */

/* White corner helpers */
.t-l, .t-r, .b-l, .b-r {
  position: absolute; width: 1px; height: 1px; background-color: #ffffff;
}
.t-l { top: 0; left: 0; }
.t-r { top: 0; right: 0; }
.b-l { bottom: 0; left: 0; }
.b-r { bottom: 0; right: 0; }

/* Responsive product grid */
.products-div {
  margin-right: -14px;
  margin-left: -14px;
}
.products-div .item {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 45px 0;
  width: 33.333%;
}
.products-div .item-box {
  padding: 0 14px;
}
.products-div .image {
  float: none;
  padding: 0;
}
.products-div .details {
  padding: 0;
}
.products-div .prod-notif {
  position: absolute;
  z-index: 2;
}
.products-div .prod-notif-email {
  max-width: 80%;
}
.products-div .buttons-row {
  float: left;
}
.products-div button.add-to-cart-button .button-right {
  padding-right: 2px !important;
}
.products-div button.add-to-cart-button .button-left {
  text-indent: -5000px;
  overflow: hidden;
  padding-left: 2px !important;
  width: 30px !important;
  position: relative;
  font-size: 11px;
  text-align: center;
}
.products-div button.add-to-cart-button .button-left .icon {
  position: absolute;
  left: 6px; top: 6px;
  width: 21px; height: 19px;
  background: url(../images/add_to_cart.gif) 50% 50% no-repeat;
}
.products-div button.add-to-cart-button.added-to-cart-button .button-left .icon {
  background: url(../images/added_to_cart.gif) 50% 50% no-repeat;
}

/* Product page tabs */
.prod-tabs {
  overflow: hidden;
  margin: 34px 0;
  padding: 1px;
  position: relative;
}
.prod-tabs dt {
  float: left;
  height: 33px;
  border-bottom: solid 1px #fff;
  line-height: 32px;
  white-space: nowrap;
  position: relative;
  left: 0;
  margin-right: 1px;
  margin-bottom: 1px;
  cursor: pointer;
  background: #353535;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.prod-tabs dt:hover, .prod-tabs dt.selected {
  height: 34px;
  line-height: 32px;
  background-color: #fff;
  color: #555;
  border: 1px solid #dbdbdb;
  border-bottom: 0 none;
}
.prod-tabs dt.selected {
  z-index: 3;
  cursor: auto;
}
.prod-tabs dt span {
  display: block;
  height: 33px;
  padding: 0 10px;
  border-top: solid 2px #3e3e3e;
}
.prod-tabs dt:hover span, .prod-tabs dt.selected span {
  border: solid 1px #fff;
  border-bottom: 0 none;
  padding: 0 8px;
}
.prod-tabs dd {
  background-color: #fff;
  display: none;
  float: right;
  width: 100%;
  margin: 34px 0 0 -100%;
  position: relative;
  z-index: 2;
}
.prod-tabs dd.selected { display: block; }
.prod-tabs .tab-content {
  border: 1px solid #dbdbdb;
  padding: 20px;
  position: relative;
}
.prod-tabs .tab-content .dialog { border: 0 none; }
.prod-tabs .tab-content .dialog .title { display: none; }
.prod-tabs .tab-content .dialog .content { background: #fff none; border: 0 none; }

/* Responsive cart */
.cart .responsive-item,
.cart .responsive-cart-header,
.cart .cart-border,
.cart .buttons,
.cart .paypal-cart-button,
.simple-dialog .content,
.wl-dialog,
.cart-note {
  width: 95%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.responsive-cart-header {
  background: url(../images/cart_th.png) repeat-x left top;
  margin: 0;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #bdc2c4;
  border-right: 1px solid #e7e7e7;
  padding-right: 1px;
  height: 40px;
}
.responsive-cart-header div {
  color: #005d98;
  font-weight: normal;
  font-size: 18px;
  padding: 8px 2%;
  background: url(../images/cart_th_bg.gif) no-repeat left 1px;
  text-align: center;
  float: left;
}
.responsive-cart-header div.responsive-first {
  border-left: 1px solid #e7e7e7;
  background: none;
  text-align: left;
  width: 56%;
}
.responsive-cart-header div.responsive-price { width: 16%; }
.responsive-cart-header div.responsive-subtotal { width: 14%; }
.cart .responsive-row { position: relative; }
.cart .responsive-item {
  border: 1px solid #b5b6b7;
  border-bottom: 0;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
}
.cart .responsive-item .details {
  padding: 10px 2%;
  margin: 0;
  vertical-align: top;
  width: 56%;
  display: inline-block;
  border-right: 1px solid #b5b6b7;
}
.cart .responsive-item div.price {
  padding: 0 2%;
  width: 15%;
  margin: -43px 0 0 60%;
  text-align: center;
  position: absolute;
  top: 50%;
  height: 86px;
}
.cart .responsive-item .subtotal {
  margin: 0;
  padding: 14px 2% 0 2%;
  width: 14%;
  display: block;
  border-left: 1px solid #b5b6b7;
  position: absolute;
  height: auto;
  bottom: 0; top: 0; left: 0; right: 0;
  margin-left: 80%;
  text-align: center;
}
.cart .responsive-item .subtotal .subtotal-wrapper {
  position: absolute;
  top: 50%;
  margin-top: -28px;
}
.cart .delete {
  display: inline-block;
  width: 4%;
  position: absolute;
  top: 50%;
  height: 44px;
  margin: -22px 0 0 1px;
  padding: 0;
  left: 100%;
}
.cart .responsive-item .details .image {
  display: inline-block;
  width: 35%;
  float: none;
}
.cart .responsive-item .details .product-info {
  display: inline-block;
  width: 58%;
  overflow: hidden;
}
.products.cart .right-box {
  border-top: 1px solid #b5b6b7 !important;
}
.cart .cart-border {
  background: #f3f3f3;
  border: 1px solid #b5b6b7;
  border-top: 0;
  padding: 15px;
}
.acheckout-button-box {
  text-align: right;
  width: 95%;
}
.cart .right-buttons-row.buttons-row {
  margin-right: auto !important;
}

/* Quantity stepper */
.products-table .buy-now .quantity,
.products-list .buy-now .quantity,
.product-input .quantity {
  height: 32px;
  line-height: 33px;
  padding: 0 4px;
  float: left;
  background: #efefef;
  position: relative;
  margin: 1px 8px 6px 0;
}
.qty-wrapper { position: relative; float: left; left: 50%; margin-top: 10px; }
.qty-wrapper1 { position: relative; float: left; right: 50%; }
.qty-arrows { position: absolute; right: 4px; top: 3px; width: 9px; height: 18px; }

/* Thumbnail grid */
.thumbnails { margin: -3em 0 0 -2em; text-align: center; }
.thumbnail {
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  margin: 3em 0 0 2em;
}
.thumbnail .r { float: left; }
.thumbnail .r .image {
  text-align: center;
  display: block;
  border: solid 1px #dbdbdb;
  margin-bottom: 4px;
}
.thumbnail .r .image img.leveler { width: 0; vertical-align: middle; }
.thumbnail .r .products-title { display: block; text-align: left; padding-left: 3px; }

/* Simple products div */
.simple-products-div .item { text-align: center; margin: 0; }
.simple-products-div .item .image-wrapper { position: relative; }
.simple-products-div .item .image-wrapper a { display: block; margin: 0 auto; }
.simple-products-div .item .product-title { margin: 5px 0; }
.simple-products-div .item .product-cell-price { margin: 5px 0 20px; }

/* Admin preview bar */
#product-admin-preview-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #333;
  color: #fff;
  padding: 5px 15px;
  z-index: 9999;
  font-size: 12px;
}

/* XPC iframe */
.xpc-iframe-hidden { height: 0; }
.xpc-iframe-shown { height: 470px !important; }
.checkout-form-xpc-shown { position: relative; margin-top: -20px !important; }
.terms_n_conditions-xpc-shown { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Print overrides for 4.7 */
.printable #content-container2 { float: none; position: static; left: 0; right: 0; width: 100%; }
.printable #center { float: none; position: static; width: 100%; left: 0; }

/* Minicart icon (4.7 style) */
.minicart-box .checkout-popup-link a.link:active {
  border: 1px solid #fff;
  outline-style: none;
  z-index: 1000;
  background-color: #fff;
  padding: 4px 0 4px 5px;
  position: relative;
}

/* header-links block (used in 4.7 head.tpl) */
.header-links {
  position: absolute;
  top: 13px;
  right: 11px;
  overflow: hidden;
}
.header-links .wrapper {
  text-align: right;
  margin-right: -16px;
}
.header-links strong,
.header-links a:link,
.header-links a:active,
.header-links a:visited,
.header-links a:hover {
  color: #661A1A;
  font-weight: bold;
  font-size: 11px;
  text-decoration: none;
  background: transparent url(../images/header_bullet.gif) no-repeat right center;
  padding-right: 16px;
  margin-left: 10px;
}
.header-links a:hover { text-decoration: underline; }
.header-links strong { text-decoration: none; color: #343434; }

/* Responsive media queries (4.7 responsive support) */
@media screen and (min-width: 1280px) {
  /* page width matches live TonerPirate (fluid max-width:95%); 1280px cap removed */
  .products-div .item { width: 25%; }
}

/* Disabled: this cancelled live's only mobile gutter (#page-container max-width:95%,
   which is 371px centred on a 390px phone) and made every page below 960px full-bleed.
   Live has no such override anywhere in its bundle. See the "restore live's page gutter"
   note at the end of this file.
@media screen and (max-width: 959px) {
  #page-container { max-width: 100%; }
}
*/

/* === TP-HEADER-SIGNIN-TOPRIGHT-FIX === pin Sign in / Register to top-right on desktop */
@media screen and (min-width: 960px) {
  #header .line1 .register_login {
    text-align: right;
  }
  #header .line1 .register_login ul.login-signin,
  #header .line1 .register_login ul.login-signin > li {
    float: none !important;
    display: inline-block;
    vertical-align: middle;
  }
}
@media screen and (min-width: 1101px) {
  #header .line1 .register_login {
    position: absolute;
    top: 10px;
    right: 15px;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 5;
  }
}

/* === TP-PARTFINDER-PLACEHOLDER === dropdown styling (was inline in product_browser.php iframe) */
.banner-black .VertMenuBox {
  background: rgba(74, 100, 1, 0.0);
  padding-top: 8px;
}
/* All four tab panes share the same top padding so the first labels ("I know Supply Part#" /
   "I know Machine Model#") line up. (Selector also beats a generic "#tab-1{padding:0 20px}" rule.) */
.banner-black #tab-1,
.banner-black #tab-2,
.banner-black #tab-3,
.banner-black #tab-4 {
  padding-top: 31px;
}
.banner-black .NavigationPath {
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  font-family: arial;
  padding: 1px 0;
  margin: 1px 0 4px;
  display: inline-block;
}
/* match live: part-finder boxes fill the dialog width (live forces iframe width:100%) */
.banner-black .menu-dialog.menu-toner,
.banner-black .menu-dialog.menu-ink {
  display: block;
  width: 100%;
  margin-bottom: 0;
}
.banner-black .styled-select {
  margin-bottom: 1px;
  width: 100%;
  position: relative;
}
/* a little more space between the stacked dropdowns in the Printer model tab */
.banner-black #tab-2 .styled-select,
.banner-black #tab-4 .styled-select {
  margin-bottom: 7px;
}
/* "?" help icon sits in the right gap beside the dropdown (does not shrink the select) */
.banner-black .pf-help {
  position: absolute;
  right: -7px;
  top: 50%;
  margin-top: -9px;
  line-height: 0;
  text-decoration: none;
}
.banner-black .pf-help svg { display: block; }
/* force the "?" white (beats .menu-dialog .content a:link {color:#000}) */
.banner-black .pf-help,
.banner-black .pf-help:link,
.banner-black .pf-help:visited,
.banner-black .pf-help:hover {
  color: #fff !important;
  text-decoration: none;
}
/* live-style hover tooltip: small green box, text wraps to fit */
.banner-black .pf-help .pf-tip {
  display: none;
  position: absolute;
  left: 16px;
  top: -2px;
  width: 120px;
  background: #a5d618;
  border: 2px solid #000;
  padding: 3px 5px;
  color: #000;
  font-size: 11px;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  z-index: 100;
}
.banner-black .pf-help:hover .pf-tip { display: block; }
/* extra breathing room under the last (2b) dropdown */
.banner-black .pf-last { margin-bottom: 18px; }
/* green box hugs its content (drop all height floors) */
/* fixed column height so the keyboard background image does NOT resize when toggling tabs */
.banner-black #tabs-container { min-height: 294px; }
.banner-black #tabs-container-one { min-height: 303px; }
/* green box hugs its content (drop all height floors) */
.banner-black .tab-content,
.banner-black .tab-content-one {
  min-height: 0 !important;
  padding-bottom: 0;
}
.banner-black .menu-dialog.menu-toner,
.banner-black .menu-dialog.menu-ink,
.banner-black .menu-dialog .content,
.banner-black .VertMenuBox {
  min-height: 0 !important;
  height: auto !important;
}
.banner-black .menu-dialog .content { padding-bottom: 0 !important; }
/* Find button straddles the box bottom edge (edge cuts through its middle), like live */
.banner-black .pf-find {
  text-align: center;
  margin-top: 31px;
  margin-bottom: -41px;
  padding-bottom: 0;
  position: relative;
  z-index: 3;
}
.banner-black .pf-find img { border: 0; }
/* remove the leaked common_files/main.css .menu-dialog 1px border (the box around the dropdowns) */
.banner-black .menu-dialog,
.banner-black .menu-dialog .content,
.banner-black .VertMenuBox {
  border: none;
}
/* don't clip the 3rd dropdown: live sized .content to its 180px iframe; ours is taller */
.banner-black #tabs-container #tab-1 .content,
.banner-black #tabs-container-one #tab-3 .content,
.banner-black .menu-dialog .content {
  height: auto;
  overflow: visible;
}
.banner-black .styled-select select {
  background: #ffffff;
  width: 95%;
  padding: 0 0 0 6px;
  font-size: 14px;
  line-height: 1;
  border: 0;
  font-family: 'roboto_condensedregular', Arial, sans-serif;
  height: 28px;
  border-radius: 4px;
}

/* ============================================================================
   Category product listing — REGULAR (screen) view: match the live site by
   hiding the "Quantity" label and the "Add to wish list" button. Live's
   tonermobile buy_now.tpl comments the quantity-title span out and does not
   render the wishlist button; the test site uses the common_files buy_now.tpl,
   which shows both. Scoped to the category products dialog so the quantity
   DROPDOWN itself stays (just its label goes) and other lists are unaffected.
   The wishlist button is a class-less button.button with onclick="...add2wl...";
   targeting the add2wl onclick is language-independent (its title text isn't).
   ============================================================================ */
.dialog-category-products-list .quantity-title { display: none !important; }
.dialog-category-products-list .buttons-row button[onclick*="add2wl"],
.dialog-category-products-list .buttons-row .button-separator { display: none !important; }

/* remove the gray box around the qty dropdown (.product-input .quantity sets background:#efefef)
   and match the front-page part-finder dropdown text: 14px roboto_condensed (was 11px source-sans),
   with the same 4px rounded corners. The 1px border is kept for a visible edge on the white page. */
.dialog-category-products-list .quantity { background: transparent !important; padding: 0 !important; }
.dialog-category-products-list .quantity select {
    font-size: 14px !important;
    font-family: 'roboto_condensedregular', Arial, sans-serif !important;
    border-radius: 4px !important;
    /* centre the number in the box (was hugging the left edge). text-align-last centres the
       SELECTED value shown when the select is closed; text-align centres the open option list. */
    text-align: center !important;
    text-align-last: center !important;
    padding-left: 6px !important;
}

/* ============================================================================
   Category product GRID — uniform layout across ALL category pages.
   The grid items (.item.col-md-3) are floated, so when product titles wrap to
   different line counts the shorter cards let the next item "snag" up beside
   them, leaving big gaps and a different-looking layout on every category
   (worst with many products, e.g. /hp-deskjet-1110/). Switching the row to
   flexbox wrap makes items flow into clean, aligned rows regardless of height,
   and align-items:stretch gives every card in a row the same height.
   Scoped to the category products dialog. (In print each .item is width:100%,
   so flex-wrap simply yields one card per row — consistent with the print row
   layout, no conflict.)
   ============================================================================ */
.dialog-category-products-list .products.products-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    /* drop the col-md-12 float: it let the gray .content box collapse (no gray behind the cards)
       on categories that render no trailing clearing element — i.e. few-product categories with no
       pagination bar, e.g. /canon-pixma-ts3320/. As a normal in-flow flex block, .content contains
       it and the gray shows consistently. */
    float: none !important;
    width: 100%;
}
.dialog-category-products-list .products.products-list .item {
    float: none !important;
}
.dialog-category-products-list .products.products-list .item > .itemdiv {
    height: 100%;   /* white card fills the stretched row height */
}

/* --- Unified breadcrumb + printable bar (>=1101px) --------------------------
   Originally the breadcrumb (.bread_one, col-md-10) and the printable link
   (.bread_two, col-md-2) were two Bootstrap grid columns. The printable column's
   width didn't adapt to its content, and the per-breakpoint overrides had gaps
   (1101-1280px and 1401-1999px had NO rule), so at those widths "Printable
   version" overflowed its gray box and the bar height jumped around.

   Make the whole thing ONE flex bar: the breadcrumb flexes to fill on the left,
   the printable link sits at the right, on a single continuous gray strip at one
   consistent height - no per-breakpoint width juggling. Scoped to >=1101px so the
   existing tablet/mobile (<=1100px, stacked) layout is untouched. The .print-id /
   .bread_two classes are kept, so the rules that HIDE the printable on checkout /
   coupon pages still apply. Supersedes the earlier min-width:1401px padding patch. */
@media screen and (min-width:1101px) {
    .bread-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        background: #ebebeb !important;
        width: 100% !important;
    }
    .bread-row > .bread_one {
        width: auto !important;
        max-width: none !important;
        float: none !important;
        flex: 1 1 auto;
        min-width: 0;                 /* let a long breadcrumb wrap its own text */
        background: transparent !important;
    }
    .bread-row > .bread_two {
        width: auto !important;
        max-width: none !important;
        float: none !important;
        flex: 0 0 auto;
        background: transparent !important;
    }
    .bread-row .printable-bar {
        float: none !important;
        width: auto !important;
        height: auto !important;
        padding: 6px 14px 6px 0 !important;
        background: transparent !important;
        white-space: nowrap;
    }
    #location0 { top: 0 !important; }   /* flex centers it; drop the manual 3px nudge */
}

/* Sit the breadcrumb bar flush against the header's VISIBLE green bar and give the gray
   bar a touch more height. The #header box is 125px but its green menu only paints to
   ~121px (a 4px transparent strip at the box bottom), so aligning to the box bottom left
   a ~4px white gap under the green. margin-top:6px lifts the bar to meet the green edge;
   the bar's top few px overlap the header's transparent bottom strip, which is harmless.
   padding:2px 0 adds ~4px to the bar height. Applies at every width. */
.bread-row { margin-top: 6px; padding: 2px 0; }

/* Above 1600px the OPC module CSS pins the checkout box to a fixed 960px, too narrow for the three
   columns (their max span is ~1160px) - so the 3rd column (Order summary) wrapped below the other
   two. Give #center-main a fixed 1180px and centre it, so the whole checkout (centred welcome box
   + the three columns) reads as one centred block instead of hugging the left in a full-width area.
   Appended last so it wins the cascade over the module's 960px base. */
@media screen and (min-width: 1601px) {
    div.opc-container #center-main {
        width: 1180px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }
}

/* Progressive column wrapping on narrower windows. The three columns are a centred flex row; as the
   window narrows flex-wrap drops the 3rd column (Order summary) below first. The theme pins the whole
   page to a ~780px min-width (min-width on the body), so col1+col2 (~665px) always fit inside it and
   the 2nd column could never wrap on its own - it just overflowed. Below 950px we stack every column
   full-width (capped + centred) so the 2nd column drops below too. Scoped to checkout. */
@media screen and (max-width: 950px) {
    #opc-sections > li.opc-section,
    #opc-sections > li.opc-section:first-child,
    #opc-sections > li#opc_shipping_payment,
    #opc-sections > li#opc_summary_li {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 460px !important;
        margin-right: 0 !important;
        margin-bottom: 18px !important;
    }
}

/* ============================================================================
   Product Q&A (CSI_Product_QA) — cancel Bootstrap's negative .row gutters
   ============================================================================
   The module tags its blocks class="qa-ask row" / "qa-question-block row" /
   "qa-answer-block row" / "qa-votes-date row" purely for its own clearfix — its
   customer/main.css defines .row as nothing but :before/:after. This theme also
   ships bootstrap.css, whose grid gutter `.row{margin-left:-15px;margin-right:-15px}`
   then drags every one of those blocks 15px left of #center-main. #center-main is
   overflow:hidden, so that 15px was simply cut off: the "O" of "Only registered
   customers...", and the left border + padding of the green Q / blue A .qa-letter
   tiles (product_qa.php, and the Q&A list on the product page).
   Scoped to the module's own blocks so real Bootstrap rows elsewhere keep their
   gutters. #qa-block .row covers every row inside the block (present and future);
   the class pairs after it are the module's rows that sit OUTSIDE #qa-block —
   the Q heading on answers.tpl / comments.tpl, navigation.tpl's pager,
   full_list_product.tpl's product strip, and the captcha / ask / answer popups.
   Each of these selectors outranks bare .row (0,1,0) whatever the file order, and
   .form-field-row / .pages-count only ever appear in this module's templates. */
#qa-block .row,
.qa-question-block.row,
.qa-answer-block.row,
.qa-comments-block.row,
.qa-ask.row,
.qa-votes-date.row,
.qa-products-list.row,
.pages-count.row,
.form-field-row.row {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================================================
   Product Q&A — product summary box (full_list_product.tpl, .qa-products-list)
   ============================================================================
   Give the box product.php's typography. Out of the box the module reuses the
   products-LIST styling, so the three controls were three different fonts at
   three different sizes: the price came from `.products .price-value` (18px bold
   Arial #b51a00), the "Quantity" caption had no rule of its own and fell back to
   the theme's small condensed body font, and the dropdown was the browser default.
   `.products-list .details` / `.products .price-row` also centre the title and
   price, while the buy row underneath stays left — so nothing lined up.

   Now the price, the Quantity caption and the qty dropdown share one font
   (source_sans_pro, as on product.php), one size (18px, matching the product-title
   link above them) and one baseline; the price keeps product.php's red (#cc230c)
   and the dropdown its grey field (#ebebeb). Everything in the box is left-aligned
   like the product page. product.php's own price is 28px, but at that size it
   would tower over an 18px summary box — the point here is the three reading as
   one row, so they share the title's size instead.
   All of these sit at the same specificity as the products-list rules they
   replace and win on file order (this is the end of the stylesheet). */
.qa-products-list .details,
.qa-products-list .price-row {
    text-align: left;
}
.qa-products-list .price-cell {
    margin: 12px 0;
}
.qa-products-list .price-value {
    color: #cc230c;
    font-family: 'source_sans_proregular', Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
}
.qa-products-list .buy-now .quantity-title {
    width: auto;
    padding-right: 10px;
    color: #333;
    font-family: 'source_sans_proregular', Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    vertical-align: middle;
}
.qa-products-list .buy-now .quantity select {
    background: #ebebeb;
    border: 1px solid #c9c9c9;
    padding: 2px 4px;
    color: #333;
    font-family: 'source_sans_proregular', Arial, sans-serif;
    font-size: 18px;
    vertical-align: middle;
}

/* --- Q&A summary box: product.php's green "Add to cart" + image Wishlist button ---
   The module's buy row renders the same `button.button.main-button.add-to-cart-button` markup the
   product page uses, but not product.php's `<ul class="simple-list">` wrapper — so it missed
   `.simple-list button.button .button-left` (the green) and fell through to the theme's default
   grey `button.main-button .button-left`, which is `background:#f7f7f7!important` (hence the
   !important here to win it back). Values below are copied from that .simple-list rule.
   The label itself is swapped from "Buy Now" to "Add to cart" in the skin's
   modules/CSI_Product_QA/customer/full_list_product.tpl override.
   Sizing is deliberately NOT the product page's (159x38px, 14pt): both buttons are scaled to the
   Quantity caption beside them - an 18px label in a 32px-tall box, which is exactly the height the
   qty select renders at, so caption, dropdown and both buttons share one row height. */
.qa-products-list .buttons-row button.add-to-cart-button .button-left {
    background: #547020 !important;
    background-image: none !important;
    border: 0;
    border-radius: 3px;
    color: #fff !important;
    width: auto !important;
    height: 32px !important;
    padding: 0 16px;
    font-size: 18px;
    line-height: 32px;
}
/* ============================================================================
   Wishlist button - site-wide
   ============================================================================
   The theme used to draw this button as a picture OF a button: details_wishlist.png (81x22, text
   and heart baked in) on the product page, wishlist_button.png (39x32, heart only) on category
   tiles and the front-page carousel, both painted over a `.button-left` whose real label was
   hidden with color:transparent. Fixed-size bitmaps, so they softened on any high-density screen,
   and neither had a second state for a product already saved.

   Now it's a real button: the label is live text the browser renders at the screen's own
   resolution, and only the heart is a drawing (heart_wishlist.svg - vector, sharp at any size).
   Store green rather than the old grey face, so it pairs with Add to cart.

   This is the base; the three rules further up pin the legacy footprints (81x22 product page,
   39x32 the two icon-only contexts) so nothing shifts on those pages. Each of them out-specifies
   this rule wherever it sits in the file, so their order doesn't matter.

   Matched on the add2wl onclick rather than a title or :not(), so it survives the label being
   translated - same trick as the .dialog-category-products-list rule further up. The short
   "Wishlist" label comes from customer/buttons/add_to_wishlist.tpl.

   line-height is 30px, not 32px: the box is 32px including its two 1px borders. */
button[onclick*="add2wl"] .button-left {
    background: #fff url(../images/heart_wishlist.svg) no-repeat right 10px center;
    background-size: 17px 17px;
    border: 1px solid #547020;
    border-radius: 3px;
    color: #40571a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    width: auto;
    height: 32px;
    line-height: 30px;
    padding: 0 34px 0 11px;
    margin: 0;
    box-sizing: border-box;
    text-align: left;
    white-space: nowrap;
}
/* Saved state - artwork and styling are ready, but nothing switches it on yet: X-Cart 4.7.10 never
   tells the page whether this product is already in the shopper's wishlist (the stock button only
   ever submits add2wl, it never asks the reverse question). Wiring it up means looking the product
   up against the wishlist when the page builds and putting .in-wishlist on the button; until then
   this rule simply never matches and every button shows its unsaved state, exactly as before. */
button[onclick*="add2wl"].in-wishlist .button-left {
    background-color: #f1f5ea;
    background-image: url(../images/heart_wishlist_saved.svg);
}
/* both buttons are 32px boxes now, but keep them centred against the caption and dropdown */
.qa-products-list .buttons-row,
.qa-products-list .buttons-row button.button {
    vertical-align: middle;
}

/* ============================================================================
   Login form fields (customer/main/login_form.tpl) - pin the text size
   ============================================================================
   The email and password boxes inherited 11px from the theme's generic
   `.input-style, input[type=text], input[type=password], select, textarea` rule, against 14px
   labels beside them - the typed value came out smaller than everything around it.

   11px is also below the 16px threshold at which mobile Safari zooms the page on tap and Android
   Chrome's text autosizing kicks in, which is the usual reason a field's text appears to change
   size the moment you click into it. Setting 16px removes that trigger outright.

   The :focus selectors are listed alongside deliberately. Nothing in the stylesheet currently
   restyles these fields on focus (the only such rule, `div.checkout-container #center
   input[type=text]:focus`, needs a .checkout-container ancestor the login page does not have) -
   they're here so that any future focus rule can't quietly shrink the text again.

   #id beats the theme's class/element rules on specificity, so no !important is needed. Scoped to
   these two ids rather than form[name=authform], because the checkout welcome box reuses that form
   name with its own #checkoutUser / #checkoutPass fields and is a deliberate 1:1 port of live.

   The family is respecified only to give source_sans_proregular the fallbacks the theme's rule
   omits: when a webfont has no fallback listed, the first paint of a newly typed value can land in
   a default face and then swap, which reads as the text changing size. */
#username,
#password,
#username:focus,
#password:focus {
    font-size: 16px;
    font-family: 'source_sans_proregular', Arial, Helvetica, sans-serif;
    line-height: normal;
}

/* ============================================================================
   div.button - drop the orphaned sliding-doors right cap
   ============================================================================
   `div.button` is button.tpl's default (non-input, non-link) branch: an outer div wrapping an
   <a>. The stock 4.7.10 styling is a two-image sliding-doors button - the outer div paints the
   RIGHT cap at `right top` and reserves `padding-right:10px` for it, while the inner <a> paints
   the left/middle.

   This skin restyles that inner <a> as a flat button (its own white face, grey border, radius),
   but the outer div kept the cap: a ~10px sliver of the old graphic sticking out past the right
   edge, reading as a second button peeking out from behind. Visible on "Clear wish list"
   (cart.php?mode=wishlist), which is the only div.button currently rendered anywhere with a
   width - the two on the product page are "Add your own review" inside a closed tab.

   The reserved 10px becomes a margin so the button's outer footprint and the spacing between
   adjacent buttons stay exactly as they were; only the ghost image goes.

   `body div.button` rather than `div.button`: the base rule that sets the cap lives in
   common_files and the aggregator merges both into one selector, so matching its specificity
   would leave the winner down to file order. One extra element bumps it and settles it. */
body div.button {
    background-image: none;
    padding-right: 0;
    margin-right: 10px;
}

/* ============================================================================
   Wish list: "Send entire wish list by email" row (cart.php?mode=wishlist)
   ============================================================================
   Two fixes to the same row.

   1. The address field inherited 11px from the theme's generic input rule, the same too-small
      size the login fields had. 16px matches what those now use, and stays above the threshold
      where mobile browsers zoom the page on tap. The family is respecified only to give
      source_sans_proregular the fallbacks the theme's rule omits.

   2. The Send button sat 3px ON TOP of the field. The visible box isn't the <button> - it's the
      inner .button-left span, which the theme pulls back with `margin:0 0 0 -6px` (left-over
      positioning from the old sliding-doors buttons, where that -6px tucked the middle under the
      left cap). The <button> starts at 383px, but its face starts at 378px, and the field ends at
      381px.
      The offset therefore goes on the face, not the button: `button.button` carries
      `margin:0 0 8px 0!important` from the theme, so a margin on the element itself is ignored
      outright (found that the hard way). -6px -> +14px moves the face 20px right, measured from
      where it actually sat rather than from the element's box.

   3. Widened by 12 characters' worth. At 16px in this face, 12 characters measure 95px as digits
      and 103px as a typical email mix (canvas measureText), so 100px is the honest middle - the
      field goes 140px -> 240px. A fixed px rather than `calc(140px + 12ch)`: ch is defined by the
      webfont's "0" glyph, so the field would silently resize if source_sans_proregular ever fails
      to load. The row grows to ~545px inside a ~1330px column, so nothing else has to move. */
.wishlist-sendlist input.input-email {
    font-size: 16px;
    font-family: 'source_sans_proregular', Arial, Helvetica, sans-serif;
    width: 240px;
}
.wishlist-sendlist button.button .button-left {
    margin-left: 14px;
}

/* ============================================================================
   Product Q&A - step the headings down on narrower screens
   ============================================================================
   Both Q&A views put their heading in .qa-h1 at 24px: the page title on
   product_qa.php?section=get_questions ("Questions and Answers for <product>") and the question
   itself on ?section=get_answers. Those strings are long - a full product name, or a shopper's
   whole question - so at 24px they run to three or four lines once the column narrows, and the
   product-title link under them (18px) stops reading as secondary.

   Desktop is deliberately untouched. Two steps down from there, on the theme's own breakpoint
   boundaries (959 / 640) rather than new ones. Line-height is a unitless 1.1 on .qa-h1, so it
   follows the font size without being restated.

   Note this is viewport width, not column width: the theme floors the layout at ~780px, so below
   roughly 820px the page itself scrolls sideways and the column stops narrowing. The heading still
   needs to come down at those sizes - it just isn't the column driving it.

   .qa-h1 needs !important, unusually for a class: .qa-h1 sits on an <h1>, and the theme styles the
   bare element as `h1{font-size:24px!important;font-weight:700!important}`. No class selector can
   outrank that, so this matches it rather than escalating the selector. The product-title link has
   no such rule and needs nothing. */
@media screen and (max-width: 959px) {
    .qa-h1 { font-size: 20px !important; }
    .qa-products-list a.product-title { font-size: 16px; }
}
@media screen and (max-width: 640px) {
    .qa-h1 { font-size: 17px !important; }
    .qa-products-list a.product-title { font-size: 15px; }
}

/* ============================================================================
   Header search box - size up one step and centre the text
   ============================================================================
   The theme sets `#header input[type=text]{font-size:15px;line-height:0}`. That line-height:0 is
   why the keyword sat high in the box rather than in the middle of it - with no line box to sit
   in, the text lands against the top of the content area instead of being centred in it.

   Rather than nudge padding until it looks right, the geometry is made explicit: the field is
   42px tall (`#header .line1 input.text`) with a 4px border all round, so the inner box is
   42 - 8 = 34px. Vertical padding goes to 0 and line-height becomes exactly that 34px, which
   centres the text by construction and stays centred if the font size changes again.

   Only this field's own height feeds the arithmetic, and nothing restyles it responsively (the
   media queries in this file touch input.text2, a different field), so 34px holds at every width.

   Specificity: `#header input[type=text].text` (1,2,1) clears both the theme's
   `#header input[type=text]` (1,1,1) for font-size/line-height and `#header input.text` (1,1,1)
   for the padding. */
#header input[type="text"].text {
    font-size: 16px;
    line-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ============================================================================
   Front page: track-record block (4th column of .second-row)
   ============================================================================
   Replaced the Reward Points graphic. Text rather than artwork, because the figures recount
   themselves monthly - see customer/main/welcome.tpl and the tp_store_stats plugin.

   The numbers carry the block, so they get the weight and the column's own green; the label sits
   under each one in the body size the neighbouring columns use, so the four columns still read as
   one row. tabular-nums keeps the digits aligned in a column as the counts grow. */
.tp-record {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.tp-record li {
    margin: 0 0 10px;
    padding: 0;
    line-height: 1.25;
}
.tp-record strong {
    display: block;
    font-family: 'source_sans_prosemibold', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 26px;
    color: #4c6923;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.tp-record span {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
}
.tp-record-note {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #555;
    margin-top: 12px;
}
/* the headline number set is heavy for a narrow column - ease it down with the rest of the row */
@media screen and (max-width: 959px) {
    .tp-record strong { font-size: 22px; }
    .tp-record span,
    .tp-record-note { font-size: 13px; }
}

/* ============================================================================
   Search results tiles - strip the buy row back to price + cart
   ============================================================================
   search.php renders the same product tiles as the category grid but under a different wrapper
   (.dialog.products-dialog.list-dialog vs .dialog-category-products-list), so it never picked up
   the rules that tidy that grid up.

   Why it overlapped: `.price-row` here carries `margin-bottom:-32px`, deliberately pulling the
   buttons row up onto the price's line so a tile reads as one compact row. That works on category
   tiles, where the row is just a qty select and the cart icon. The search tile also carried a
   "Quantity" caption, a button separator and the wishlist button, so the row outgrew the space and
   landed on top of the price - measured: price spanned 87-353px, with the cart at 249-288 and the
   wishlist at 308-353 sitting inside it.

   Only the "Quantity" CAPTION goes, not the <select> - shoppers still choose an amount on the
   tile. Hiding rather than removing from the template, matching how the category grid does it. */
.dialog.products-dialog.list-dialog .content .quantity-title,
.dialog.products-dialog.list-dialog .content .buttons-row .button-separator,
.dialog.products-dialog.list-dialog .content .buttons-row button[onclick*="add2wl"] {
    display: none !important;
}
/* The grey slab behind the dropdown is the .quantity div's own #efefef fill, sized for the caption
   that used to sit in it - with the caption gone it just reads as a shadow round the select. The
   category grid clears the same fill; this wrapper never did.
   Font size matches the Featured Products tiles (15px) rather than the 11px these inherited from
   the theme's generic input rule, so the two product grids agree. */
.dialog.products-dialog.list-dialog .content .quantity {
    background: transparent !important;
    padding: 0 !important;
}
.dialog.products-dialog.list-dialog .content .quantity select {
    font-size: 15px !important;
}
/* Line the three up on one optical centre. The tile isn't a flex row - the theme floats the qty
   select left and pulls .buttons-row up over the full-width .price-row with margin-bottom:-32px -
   so their vertical positions come from three unrelated boxes: measured centres were select 630,
   cart 624, price 621.
   The dropdown is the tallest (34px) and sets the row's height, so it's the anchor and the other
   two come down to meet it: price +9px, cart +6px.
   Done with position:relative, which paints the elements lower WITHOUT changing layout. Adding
   margin or padding instead would push the following content down too - .buttons-row is positioned
   off the bottom of .price-row, so nudging the price with margin just moves the whole row and the
   three stay exactly as misaligned as before. */
.dialog.products-dialog.list-dialog .content .price-row {
    position: relative;
    top: 9px;
}
/* 2px, not the 6px this started as: the cart button was 23px tall then and is 32px now that the
   row, the button and the icon are all collapsed onto one box (see "Product-tile cart button"
   below), so it needs 4px less to sit on the same centre. Re-measured after that change -
   select 630, price 630, cart 630. */
.dialog.products-dialog.list-dialog .content .buttons-row {
    position: relative;
    top: 2px;
}

/* ============================================================================
   Product-tile cart button - let the button wrap its own icon
   ============================================================================
   On category and search tiles the <button> measured 35x23 while the icon inside it
   (.button-left) is 39x32, so the icon hung 10px below the button and 4px past its sides. The
   bottom third of what looks like a button was not clickable.

   Cause: the theme pins `button.button{height:23px;padding:1px}` - a size meant for the old text
   buttons - and the icon simply overflows it. Live never hits this because its CSS sets no height,
   padding or display on the button at all: the element takes the browser's own defaults for
   <button> (inline-block, padding 1px 6px) and its height comes from the content, giving 32+2=34
   tall and 39+12=51 wide. That is where live's 51x34 comes from - not a rule, the absence of one.

   Rather than just letting the button grow, all three boxes are collapsed onto the icon's own
   39x32 so the wrapper, the control and the artwork occupy exactly the same rectangle - what you
   see is precisely what is clickable, with no dead margin anywhere:

     .buttons-row   was 45x23  (shorter than the button it contained)
     button.button  was 45x34
     .button-left   was 39x32, pulled 6px left by the theme's sliding-doors margin, which cancelled
                    the button's 6px left padding and left 6px of dead space on its right instead

   Everything that created the mismatch is zeroed: the button's padding and its
   `margin:0 0 8px 0!important`, the icon's -6px margin, and the 1px border the icon inherits from
   the generic .button-left rule (with box-sizing:border-box that border was eating 2px of the
   39x32 artwork). The row keeps its float:right, so the button still sits at the tile's edge. */
.product_details-button .buttons-row,
.product_details-button button.button,
.product_details-button button.button .button-left {
    width: 39px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    box-sizing: border-box;
    display: block;
}

/* ============================================================================
   Cart icon button - same collapse for the remaining contexts
   ============================================================================
   Same defect as the product tiles, same fix. Measured before:

     featured strip (.feat-buy)   wrapper 39x23 @573,1158 | button 39x33 @573,1153 | icon 39x32
                                  - the wrapper was 10px shorter than the button and sat 5px below it
     add-to-cart popup            button  35x23 @458,706  | icon 39x32 @453,707
                                  - the icon was BIGGER than its button and hung 16px below it

   The popup's tiles hang off .buy.product-input, not .product_details-button, which is why the
   rule for the tiles never reached them. Its wrapper is the 215px-wide form holding the whole buy
   row, so only the button and the icon collapse there - shrinking that wrapper would wreck the
   popup's layout. The featured strip's .button-row wraps nothing but the button, so it collapses
   with it.

   Not included: #flexiselDemo3. The stylesheet still carries icon rules for that carousel, but the
   element renders on no page on the site - checked home, product, search and category. Dead
   context, left alone. */
.feat-buy .button-row,
.feat-buy button.add-to-cart-button,
.feat-buy button.add-to-cart-button .button-left,
.buy.product-input button.main-button,
.buy.product-input button.main-button .button-left {
    width: 39px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box;
}

/* ============================================================================
   Product page "Add to cart" - button vs its own green face
   ============================================================================
   Found while checking the icon buttons: the same mismatch, on the most important button on the
   site. Measured before: button 155x23 @433,452, face (.button-left) 159x38 @428,453 - so only the
   TOP 23px of the 38px green bar was clickable, and its leftmost 5px sat outside the button
   altogether (the theme's -6px sliding-doors margin again).

   Unlike the icon buttons, the face keeps its `padding:6px 11px` here - that padding is what
   centres the "Add to cart" text inside the bar. Only the button is resized to match the face, and
   the face's negative margin removed so the two line up at the same origin. The row gets height
   auto because it was pinned to the old 23px. */
.price_qty .simple-list .buttons-row {
    height: auto;
}
.price_qty .simple-list button.button {
    width: 159px;
    height: 38px;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}
.price_qty .simple-list button.button .button-left {
    margin-left: 0 !important;
}

/* ============================================================================
   MY ACCOUNT dropdown - hover feedback on the menu items
   ============================================================================
   The items were plain inline links with no hover state at all, so nothing told you which row the
   cursor was on. Each link becomes a block and takes over the row's padding from its <li>, giving
   a full-width band to tint.

   The padding is MOVED, not added: the panel behind this menu is a fixed-size background image on
   the <ul> (the white box with the green border and the notch), so growing the rows would push the
   list past the artwork. Old li padding was `5px 27px 0 13px`; the link now carries 3px top + 2px
   bottom for the same 5px total, so the list occupies exactly the same height as before and the
   highlight sits evenly around the text.

   line-height is pinned for the same reason. These links inherit a tall line-height from the menu,
   which cost nothing while they were inline but sets the box height once they are given a box -
   left alone it made each row 48px and stretched the panel from 205px to 320px, past its artwork.
   17px reproduces the original ~21px row (17 + the 5px of padding).

   inline-block rather than block, with nowrap: the <li>s are floated, so they shrink-wrap their
   content. A block link inside one gets squeezed to ~118px and "Account Details" / "Order History"
   then wrap onto two lines (39px rows against 22px for the short labels). inline-block sizes to the
   text exactly as the original inline links did, so the highlight is a pill around each label and
   the panel keeps its shape.

   Colours come from the store palette - the pale green tint used for the saved wishlist button,
   with the darker green for the label. :focus is included so keyboard users get the same cue. */
.modify-profile-link ul li {
    padding: 0 !important;
}
.modify-profile-link ul li a {
    display: inline-block;
    white-space: nowrap;
    padding: 3px 13px 2px 13px;
    line-height: 17px;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.modify-profile-link ul li a:hover,
.modify-profile-link ul li a:focus {
    background-color: #eef3e4;
    color: #4c6923;
}
@media (prefers-reduced-motion: reduce) {
    .modify-profile-link ul li a { transition: none; }
}

/* Balance the dropdown's side margins. The panel's own padding was 24px a side, but the rows add
   13px of their own on the left only (the highlight pill's padding), so the text sat 40px in from
   the left edge while the longest label - "Account Details" - stopped 28px from the right.

   The balance point isn't "match the old right gap": moving the text left widens the right gap by
   the same amount, so chasing 28px just flips the imbalance (measured: left 28, right 40). With a
   183px panel and a 115px longest label, the two gaps are equal at (183-115)/2 = 34px each, which
   is what 18px of padding here produces once the pill's 13px and the panel's 3px border are added.

   Left only, and without !important: the mobile menu overrides this padding with its own
   !important rules, which must keep winning. */
.modify-profile-link ul {
    padding-left: 18px;
}

/* ============================================================================
   Address book - fit the shaded panel to its box
   ============================================================================
   .address-bg (the diagonal-hatch panel) was pinned to `width:230px` inside a .address-box whose
   interior is 248px, and its height came from its content. So it met the border at the top and
   left - where its 2px margin plus the box's 1px border give a 3px gap - and fell short everywhere
   else: measured 17px of bare white on the right and 11px at the bottom.

   Each .address-box contains exactly one child, so making the box a flex container lets that child
   fill it in both directions: `flex:1 1 auto` with `width:auto` takes the horizontal space, and
   the default align-items:stretch takes the vertical, including when a long address pushes the box
   past its 220px min-height. All four gaps become the same 3px the top and left already had, with
   no fixed sizes to keep in sync. */
li.address-box {
    display: inline-flex;
}
li.address-box > .address-bg {
    width: auto;
    flex: 1 1 auto;
}

/* Even out the hatch frame. Stretching .address-bg to its box (above) left the panel 214px tall
   while its content, .address-main, stayed 190px - 8px padding + 190 + 8 = 206, so the 8px of
   slack showed as extra pattern along the bottom and the band measured 16px against 8px on the
   other three sides. Making the panel a column flex and letting the content grow takes up the
   slack, so the frame is an even 8px all round however tall the box gets. */
li.address-box > .address-bg {
    display: flex;
    flex-direction: column;
}
li.address-box > .address-bg > .address-main {
    flex: 1 1 auto;
}

/* The "Change" button, same treatment as the cart icons: row, button and face were three
   different boxes - row 208x23, button 83x23, face 87x25 sitting 5px to the LEFT of its own
   button (the theme's -6px sliding-doors margin), and 2px taller than it.
   Sized by content rather than fixed pixels here: the face's own padding is what makes it 87x25,
   and hardcoding that would break the moment the label is translated. The button shrink-wraps the
   face, and the row shrink-wraps the button. */
li.address-box .buttons-row {
    display: inline-block;
    width: auto;
    height: auto;
}
li.address-box button.button {
    width: auto;
    height: auto;
    padding: 0 !important;
    margin: 0 !important;
}
li.address-box button.button .button-left {
    margin-left: 0 !important;
}

/* Address book text one step up: 11px -> 13px. Every string in the card - the "Billing and
   Shipping address" heading, the name, the address lines and the phone - inherits its size from
   the box, so one declaration lifts them all and the line-height (a unitless 1.43) scales with it.
   The Edit button is untouched by design: its label lives in .button-left, which carries an
   explicit 15px of its own and so ignores what the box inherits. Same for the "Add new address"
   link at 22px. */
li.address-box {
    font-size: 13px;
}

/* ============================================================================
   Account details / registration form - fields one step up
   ============================================================================
   The inputs on register.php sat at 11px, inherited from the theme's blanket
   `body, input, select, textarea` rule, while their own labels next to them are 14px - so what a
   customer types was smaller than the text telling them what to type. 14px matches the labels.

   Scoped to .register-table, which is this form's own table, so it covers both Account details
   (register.php?mode=update) and new-customer registration without touching other forms.
   password/email/tel are listed for the registration page, which has fields this one doesn't.
   The <select> is included deliberately: a 14px input next to an 11px dropdown in the same row
   reads as a mistake. */
table.register-table input[type="text"],
table.register-table input[type="password"],
table.register-table input[type="email"],
table.register-table input[type="tel"],
table.register-table select,
table.register-table textarea {
    font-size: 14px;
}

/* ============================================================================
   Form button cells - stop the face being clipped off the column
   ============================================================================
   On news.php#subscribe the Subscribe button's left edge was cut off. Same cause as the other
   buttons in this file: the theme pulls .button-left 6px left of its own <button> with the old
   sliding-doors margin. Here the button sits hard against the left edge of the content column, so
   the face landed at x=31 against the column's x=35 - and #center-main is overflow:hidden, so the
   overhang was clipped rather than just misaligned. Measured: button 101x23@36, face 105x25@31.

   Fixed the same way as the cart and Edit buttons - the button wraps its own face and the negative
   margin goes - so the visible edge and the clickable edge are the same and both sit inside the
   column. Sized by content, so labels of any length are fine.

   Scoped to td.button-row, the cell X-Cart puts form buttons in: the newsletter subscribe form,
   Contact us, RMA search, coupon entry, review voting and the Gift Registry forms all use it, and
   all had the same 6px overhang - harmless where nothing clips it, visible here. */
td.button-row button.button {
    width: auto;
    height: auto;
    padding: 0 !important;
    margin: 0 !important;
}
td.button-row button.button .button-left {
    margin-left: 0 !important;
}

/* ============================================================================
   Checkout card fields - match the address fields
   ============================================================================
   The card form now uses the same face and size as the billing/shipping inputs beside it on the
   same page - Arial/Helvetica at 13px - so the payment block reads as part of the checkout form
   rather than a bolted-on panel. Applies to all four controls: name, number, the two expiry
   selects and the CVV.

   Previously these were `font-family: source_sans_proregular` at 16px with NO fallback family
   after it. That is worth recording, because it is why the card number looked different in Firefox
   and Chrome: while the webfont loads both agree, but with no family left to try when it doesn't,
   each browser falls back to its OWN default - Chrome's is a sans, Firefox's default is the
   "Serif" setting (Times). Naming the fallbacks explicitly removes that whole class of difference.
   (The webfont itself was fine: all five formats declared, files 200 with correct MIME types,
   woff/woff2 headers intact, and css/altskin.FF.css carries no font rules at all.)

   SIZE is deliberately NOT set here. The card fields stay at 16px, which comes from the earlier
   rule above ("Credit-card information fields: larger text so typed card details read clearly",
   `#opc_payment .opc-payment-options input... {font-size:16px!important}`) and which the rule
   directly beneath it depends on - it trims the expiry selects' padding specifically because a
   16px value overflowed their 25px content box. Setting 13px here would need !important to beat
   that, would silently undo a documented decision, and would leave that padding fix mismatched.
   The address fields are 13px, so the card fields remain one step larger; say the word and it is a
   one-line change plus a revisit of the expiry padding.

   tabular-nums on the two numeric fields: proportional digits sit at uneven widths, which makes a
   16-digit number harder to scan back over when checking a typo. */
#bcse-dpm-form input[type="text"],
#bcse-dpm-form input[type="password"],
#bcse-dpm-form select,
#bcse-dpm-payment select[name^="card_expire"] {
    font-family: Arial, Helvetica, sans-serif;
}
#bcse-dpm-card-number,
#bcse-dpm-card-cvv2 {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ============================================================================
   Order receipt / invoice - stop it spanning the full page
   ============================================================================
   cart.php?mode=order_message includes mail/html/order_invoice.tpl with is_nomail='Y', which picks
   the CSS-class branch of that template: `order-invoice width-100 width_new table`. width-100 is
   literally width:100%, so on this page - which has no sidebar - the invoice stretched to the whole
   1330px content column and the header sat at opposite ends of the screen.

   It isn't as obvious on live because live's layout gives that page a narrower column, not because
   of a width rule: `width_new` is a class live's markup carries but its CSS never defines, and
   `.order-invoice` is `background:#fff` on both sites. So the fix is a cap rather than a port of
   some rule that exists over there.

   660px is live's own invoice width - the figure in the non-is_nomail branch of the same template -
   so the receipt now matches the printed invoice instead of the browser window. Centred, and a cap
   rather than a fixed width so narrow screens still get the full column.

   Scoped to the .table-responsive wrapper this skin adds, so it can't reach any other table. The
   print view (order.php?mode=invoice) is unaffected: it takes the other branch, whose inline
   width:600px already beats a max-width of 660. */
.table-responsive > table.order-invoice {
    max-width: 660px;
    margin: 0 auto;
}

/* ============================================================================
   Order tracking list - stop the "Track It!" button sitting on the number
   ============================================================================
   order.php shows each tracking number in one cell and its carrier button in the next
   (modules/Order_Tracking/customer_tracking.tpl). The stock table carries no padding and
   border-collapse leaves the two cells flush, so the button's face landed on the number:
   the visible box isn't the <button>, it's the inner .button-left span, which this theme
   pulls back with `margin:0 0 0 -6px` (the same sliding-doors left-over that put the wish
   list's Send button on top of its field, see that note above). Measured on 267491, the
   number cell ended at 130.7px and the face started at 125.7px - the last ~5px of
   1Z7943940308781673 was underneath it.

   Fixed on the cell rather than the button, since the table is ours to class and the -6px
   is load-bearing everywhere else on the site. 20px right padding clears the 6px overhang
   and leaves a 14px gap; the 4px vertical padding just stops consecutive 23px-tall buttons
   from touching when an order has several numbers. Scoped to the class added to that one
   table, so no other tracking or invoice table is reached. The admin copy of this list
   (main/order_tracking_numbers.tpl) needs none of this - admin pages load only admin.css,
   which never sees the theme's negative margin. */
table.order-tracking-numbers > tbody > tr > td {
    padding: 4px 0;
    vertical-align: middle;
}

table.order-tracking-numbers > tbody > tr > td:first-child {
    padding-right: 20px;
}

/* ============================================================================
   Mobile - release the 780px floor 4.7.10's base CSS puts under the whole page
   ============================================================================
   This skin is already responsive: it carries Bootstrap 3's grid plus 65 hand-written
   @media bands (360 / 361-509 / 510-640 / 641-959 / ... ), exactly as live does. None of
   the bands below 780px were reachable, because skin/common_files/css/main.css opens with
   `html,body{...min-width:780px...}` and nothing since had redeclared it.

   It is a 4.7.10-only problem, not something live solved with a rule of its own. On 4.5.5
   the altskin's main.css *replaced* that base file outright, so the floor never loaded -
   live's bundle contains no min-width:780px at all. 4.7.10 merges base and skin into one
   bundle instead, and this skin's own `body,html` block (line 49) sets height/background/
   margin/padding/border but never min-width, so the 780px survived underneath it.

   Measured on the home page at a 390px phone viewport (CDP, mobile:true): the layout
   viewport was forced out to 783 CSS px and the page rendered the desktop layout,
   clipped - no hamburger, no cart, hero images cut off. With this rule: 393px, matching
   live's 390. Every sub-780 band then applies as written.

   No !important needed - altskin.css is merged last, so plain order beats the base rule.
   min-width:0 rather than a value, so this only removes a floor and never imposes one;
   the page's real widths keep coming from the grid and the bands. */
html,
body {
    min-width: 0;
}

/* ============================================================================
   Mobile - restore live's page gutter, and stop it being paid for twice
   ============================================================================
   Two edits, both undoing migration-era workarounds that predate the min-width fix above.

   (1) `#page-container{max-width:95%;margin:0 auto}` is live's only mobile gutter - at a
   390px viewport that is 371px centred, so the page sits 10px in from each edge. Live
   applies it at every width; it has no override anywhere in its bundle. This skin had
   picked up `@media screen and (max-width:959px){#page-container{max-width:100%}}` under
   the "Responsive media queries (4.7 responsive support)" heading, which cancelled it
   below 960px and made every mobile page full-bleed. That override is now commented out
   at its own line rather than fought with from down here, so there is one rule, not two.

   (2) `.product-details .image` then still overflowed, because 4.7.10 hands it a margin
   live never sees. Live's rule is `text-align:center;vertical-align:top;padding:0;float:left`
   and nothing more; the `margin:5px 10px` in this file exists only to tame the
   `margin:5px 20px 5px 10px` that stock skin/common_files/css/main.css sets - the same
   base-CSS-now-merged problem as the 780px floor. It is harmless at desktop, where the
   image is col-md-3 (25%), but below 768px the column is col-xs-12, so `width:100%` plus
   20px of horizontal margin makes a 410px box in a 390px page. The wishlist button floats
   right inside that column, so the last 10px of it - the heart - was being clipped by
   `#center-main{overflow-x:hidden}`.

   Zeroed only in the xs band, where the 100% width makes the margins unpayable; the
   desktop product layout keeps the spacing it has now. Measured after: image column
   left=10 w=371 right=381, wishlist fully inside, matching live's left=10 w=371. */
@media screen and (max-width: 767px) {
    .product-details .image[class*="col-"] {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================================================
   Featured carousel (1B): snap the scroll, and drop the arrows on phones
   ============================================================================
   (a) SNAP. The arrow handler in customer/main/featured.tpl scrolls by
   `vp.clientWidth` - 363px on a 390px phone, 722px at 768. The card pitch is 220px
   (210px card + 10px gap), and neither step is a multiple of it, so every click
   parked a sliced card against the left edge, worse with each press. Free swiping
   had the same problem, less predictably. Snap costs no layout change: the click
   still asks for a viewport-width scroll, the browser just settles on the nearest
   card edge. scroll-padding-left matches the viewport's own 12px padding, without
   which a snapped card sits under that padding instead of where the first card rests.

   Applied at every width on purpose, not just mobile - it changes no geometry, and
   the desktop arrows land mid-card for exactly the same reason. Delete these two
   rules to go back to free scrolling.

   (b) ARROWS ON PHONES. `.feat-arrow` is 36px wide at left/right:2px, and it is
   positioned against `.feat-carousel`, whose side padding is 3px - not the 24px the
   rule asks for, because the shared `.content` rule outranks it (the file's own
   comment spotted this for padding-bottom and fixed only that). So the arrows sit
   inside the scroll area, on top of a card. Desktop hides the damage because
   `.feat-card` is `max(210px, (100% - 30px) / 4)` and `.feat-inner` is a centred
   210px, so wide screens leave slack for the arrow to land in. On a phone the slot
   is exactly 210px, slack is zero, and the arrow covers the product image.

   Hidden below 768 rather than given room: at 363px of viewport a 40px gutter each
   side would cost most of the peek, and swipe plus the 1.65-card peek is the
   affordance mobile users expect. The JS keeps running and simply toggles hidden
   elements.

   NOT FIXED HERE: the same 36px overlap exists at 768/820/1024/1180 (measured - it
   lands on card 4 instead of card 2). Fixing that means restoring the intended side
   gutter on .feat-carousel, which shifts tablet and desktop layout, so it is left as
   a separate decision. */
.feat-viewport {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 12px;
}

.feat-card {
    scroll-snap-align: start;
}

@media screen and (max-width: 767px) {
    .feat-arrow {
        display: none;
    }
}

/* ============================================================================
   Related items: let the thumbnail keep its aspect ratio
   ============================================================================
   Regression from the simple_products_list.tpl override. Wrapping each product in
   .item_products activated the live-ported rule

       .item_products .image-wrapper img { width: 200px }

   which sets a width and no height. On live that is enough, because 4.5.5's
   product_thumbnail.tpl emits a bare <img> with no dimension attributes, so the
   height resolves from the intrinsic ratio: a 300x200 source renders 200x133.

   4.7.10's product_thumbnail.tpl emits width="300" height="200" attributes. The CSS
   width overrides the width attribute, but nothing overrode the height attribute -
   it is a presentational hint, and absent any CSS height it still applies. So every
   300x200 thumbnail rendered 200x200: squashed 33% horizontally. Measured on all
   five related items, and on desktop as well as mobile.

   height:auto beats the attribute and restores the intrinsic ratio, giving 200x133 -
   the same numbers live reports for the same images. Not scoped to a breakpoint:
   the squash was at every width. */
.item_products .image-wrapper img {
    height: auto;
}

/* ============================================================================
   Popup upsell thumbnails: keep the intrinsic ratio (the copy that actually wins)
   ============================================================================
   `#Add_to_cart_popup_window .upselling.details img` is declared FIVE times in the
   built bundle: once in modules/Add_to_cart_popup/main.css (already corrected to
   height:auto) and four more times in this file, each pinning height:150px. This
   file merges after the module CSS, so those four outranked the corrected one and
   the images still rendered 200x150 - a 1.333 ratio on 300x200 sources, stretched
   ~12% vertically. Verified from the served bundle, not inferred.

   Rather than edit four scattered copies inside media bands in the ported live CSS,
   this single unconditional declaration at the end of the file beats all of them on
   order. Result: 200x133, matching the related-items grid and live's own rendering
   of the same image files.

   If the four originals are ever cleaned up, this can go with them. */
#Add_to_cart_popup_window .upselling.details img {
    width: 200px !important;
    height: auto !important;
}

/* ============================================================================
   Search results: keep "Search again" on screen
   ============================================================================
   `.results-found{position:relative;width:400px}` and
   `.search-again{margin-top:-17px;margin-left:400px;text-align:right}` are a
   hardcoded two-column trick - the count on the left, the link pulled up onto the
   same line on the right. #center-main is 371px on a 390px phone, so the 400px put
   the link at x=410-475: entirely off screen, clipped by #center-main's
   overflow-x:hidden, with no way to scroll to it. Live does exactly the same thing
   (measured: identical 400 / 410 / 475), so this is a live bug fixed here, not a
   migration regression.

   Breakpoint is 509px, the skin's own band edge. Measured, the link needs
   #center-main >= ~465px and so survives from about 480px up - but at 480 it clears
   the viewport by 3px, which a longer result count or a translated label would eat.
   510px and above keeps today's side-by-side layout untouched. */
@media screen and (max-width: 509px) {
    .results-found {
        width: auto;
    }

    .search-again {
        margin-top: 6px;
        margin-left: 0;
        text-align: left;
    }
}

/* ============================================================================
   Static help pages: stack the CMS layout tables instead of letting them overflow
   ============================================================================
   help.php content is CMS HTML that uses tables for layout. They carry
   style="width:100%" and no class, but table-layout:auto sizes them from their
   content, so on FAQ: General the two-column index of question links ("Security of
   Credit Card Information" and friends) demanded 250px + 4px + 244px = 498px inside
   a 371px column. Everything past x=390 was unreachable. Same story on the
   Discount Membership Program page, where three tables reached 553 and 737px.
   Both are identical on live.

   display:block on the table, rows and cells stacks each cell full width, so the two
   link columns become one list and the nested 244px table inherits a full-width
   parent. Content-agnostic - it does not care what the CMS HTML contains.

   Scoped to body.main-help, the page-type hook added to customer/home.tpl for this.
   The obvious selector - .dialog > .content table:not([class]) - also matches the
   product page's classless spec and volume-discount tables (measured: 366px and
   140px), and stacking those would wreck a layout that works. $main is the only
   thing that separates them. */
@media screen and (max-width: 767px) {
    /* DEFAULT for help pages: keep the grid, scroll it. Stacking a table destroys the
       row/column relationship, which matters when the table is real tabular data rather
       than a layout scaffold - the Discount Membership Program page is spend/discount
       tiers, and reading a tier means reading across the row. display:block turns the
       table into a scroll container while the rows and cells keep their table display
       values, so the browser rebuilds the grid inside an anonymous table box: the layout
       is exactly the desktop one, just pannable. Nothing here is clipped or unreachable -
       it is reachable by swiping the table itself, and the page still does not scroll
       sideways.

       Only general_faq gets the stacking treatment below, because its table is a
       two-column index of question links - a layout table with no cross-column meaning,
       where one list per column reads better than a sideways scroll. */
    body.main-help #center-main .dialog > .content table {
        display: block;
        width: auto !important;
        max-width: 100%;
        height: auto !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.help-general_faq #center-main .dialog > .content table,
    body.help-general_faq #center-main .dialog > .content table > tbody,
    body.help-general_faq #center-main .dialog > .content table > tbody > tr,
    body.help-general_faq #center-main .dialog > .content table > tbody > tr > td {
        display: block;
        width: auto !important;
        max-width: 100%;
        /* height:auto is load-bearing, not tidiness. On a real table a height on a row or
           cell is a MINIMUM and the box grows past it; once display:block turns them into
           ordinary blocks it becomes a hard height and the content spills out. The FAQ CMS
           markup sets heights on some rows, so without this the "Please click here to learn
           more about our remanufactured toner cartridges" line - 37px of text in a 21px
           cell - drew straight over the "Pre Order Help" heading beneath it. */
        height: auto !important;
        overflow-x: visible;
    }

    /* CMS content occasionally carries sized images; keep them inside the column too */
    body.main-help #center-main .dialog > .content img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================================================
   Search page: stack the quick-search form so its Search button stays on screen
   ============================================================================
   The "no results" page (and only that one - the results pages carry no table here
   but hidden zero-width acr-container widgets) renders the search form as a single
   three-column table.width-100: label, text field, button. table-layout:auto sizes
   it from content, so it demanded 540px inside a 371px form and centred itself at
   x=-38..502. The button cell landed at 400-502, past the right edge and
   unreachable - the same failure as the "Search again" link, different element.

   Stacking the cells puts the label, field and button on their own lines. The input
   cap stops a size= attribute pushing the row wide again once the cells are blocks.

   Scoped to body.main-search and to tables inside a form, which on these pages is
   only this one - verified by inventorying every table in #center-main on the
   results, no-results and empty-search pages. */
@media screen and (max-width: 767px) {
    body.main-search #center-main form table.width-100,
    body.main-search #center-main form table.width-100 > tbody,
    body.main-search #center-main form table.width-100 > tbody > tr,
    body.main-search #center-main form table.width-100 > tbody > tr > td {
        display: block;
        width: auto !important;
        max-width: 100%;
        height: auto !important;   /* same table-to-block height trap as the help pages above */
    }

    body.main-search #center-main form table.width-100 input[type="text"],
    body.main-search #center-main form table.width-100 select {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================================
   Top message banner: stop it being wider than a phone
   ============================================================================
   `#top-message{position:fixed;left:0;right:0;margin:0 auto;width:400px}` is the
   site-wide notification strip - "Sorry, your search returned no results", "Product
   has been added to cart", form errors, and so on. The hardcoded 400px is wider than
   a 390px phone viewport, so margin:0 auto had nothing to centre with: the banner sat
   flush at x=0 and its right edge, including 31px of padding, was cut off. Found on
   the no-results search page, but it applies to any page that raises a message.

   max-width rather than a breakpoint: over ~420px of viewport the banner keeps its
   400px exactly as now, and below that it shrinks to leave the same 10px each side
   the rest of the page uses. Nothing changes on tablet or desktop. */
#top-message {
    max-width: calc(100% - 20px);
}

/* ============================================================================
   "Added to cart" popup: bigger, black close button
   ============================================================================
   The X is not a font glyph or an .ui-icon span - jQuery UI's icon span is
   display:none!important here, and the mark is painted by a 32x16 base64 PNG
   sprite set as the BUTTON's own background: left half is the resting state,
   right half the hover state, which is why hover shifts background-position
   by -16px. So neither `color` nor a font-size change can touch it.

   25% larger: 16x16 -> 20x20. The sprite has to scale with the box, otherwise a
   bigger button just reveals more of the PNG - i.e. the hover half would start
   bleeding into view. background-size 40x20 scales the whole 32x16 sprite by the
   same 1.25, keeping the left half exactly filling the button. The hover shift is
   rescaled to -20px to match, or hover would land mid-sprite.

   margin-top goes to -10px so the button stays centred on `top:50%`; the existing
   -8px was half of the old 16px height.

   Black: the sprite is NOT a monochrome glyph on transparency - decoding it shows a
   light-grey disc (luminance ~170) with a WHITE cross drawn on top (255). So
   brightness(0), the usual trick, clamps disc and cross alike and renders one solid
   black blob. What is wanted is the disc black with the cross still knocked out of
   it, which means pushing the two apart rather than flattening them.

   CSS contrast() pivots at 0.5, and both values sit above it, so contrast alone
   drives both to white. brightness(0.6) first moves them either side of the pivot -
   disc 0.667 -> 0.4, cross 1.0 -> 0.6 - and contrast(5) then maps 0.4 to 0.0 and 0.6
   to 1.0: black disc, white cross, with the anti-aliased edge landing mid-grey.
   Alpha is untouched by both filters, so the rounded edge stays soft.

   !important throughout because five earlier rules in this bundle already set
   width/height/margin on this selector with !important; this block is appended at
   the end of altskin.css, which merges last, so it wins on order.

   Not scoped to a breakpoint - the button measures 16x16 at both 390 and 1440, so
   one rule covers desktop and mobile as asked. Scoped to .product-added so no
   other jQuery UI dialog on the site is touched. */
.product-added.ui-dialog .ui-dialog-titlebar-close {
    width: 20px !important;
    height: 20px !important;
    margin-top: -10px !important;
    background-size: 40px 20px !important;
    filter: brightness(0.6) contrast(5);
}

.product-added.ui-dialog .ui-dialog-titlebar-close:hover {
    background-position: -20px 0 !important;
}

/* ============================================================================
   Mobile header: bigger MENU label, bigger mini-cart, and one size for both
   ============================================================================
   Applied across the whole band where the mobile header actually exists. The
   hamburger (.menu-mobile) and the mobile cart icon (img.icon inside
   .menu-minicart) are shown from 0 to 959px, so anything narrower would leave
   768-959 with the old small type while still showing the mobile header.

   WHAT WAS THERE. The icon and the quantity were each sized three different ways
   and the two ladders ran in opposite directions:

       width          icon        qty (cart empty)   qty (cart has items)
       <= 360px       16 x 13     17px               12px
       361 - 509px    18 x 15     14px               10px
       510 - 959px    15 x 15     20px               17px

   So as the screen got NARROWER the icon shrank but the empty-cart number grew
   17px against a 16px-wide icon, which is the crowding you spotted. Worse, the
   number a shopper actually sees once something is in the cart - the `.full`
   variant - was the smallest type on the page at 10px between 361 and 509, the
   commonest phone range, and `.full` carries no padding-left at all where
   `.empty` has 6px, so the digit sat hard against the icon (measured: 0px gap).

   WHAT IT IS NOW. One icon size and one number size at every mobile width, with
   the gap applied to both cart states.

   The icon is 23 x 20 rather than a round 24 x 20 because the source PNG is
   31 x 27 - a 1.148 ratio. Every previous size got this wrong (18/15 = 1.20,
   16/13 = 1.23, 15/15 = 1.00), which is why the icon looked subtly squashed and
   why it showed up in the site-wide image-distortion sweep. 23/20 = 1.15.

   No !important needed: these selectors match the originals, and this block is
   appended at the end of altskin.css, which merges last in the bundle. Media
   queries add no specificity, so being later is enough to beat the narrower
   bands above. */
@media screen and (max-width: 959px) {
    .menu-mobile {
        font-size: 15px;
    }

    .menu-minicart img.icon {
        width: 23px;
        height: 20px;
    }

    .checkout_menu .menu-minicart .valign-middle.empty,
    .checkout_menu .menu-minicart .valign-middle.full {
        font-size: 17px;
        padding-left: 6px;
    }
}

/* ============================================================================
   Checkout welcome box: move the sign-in column to the right of the box
   ============================================================================
   `.opc-authcol` was `float:left`, so the sign-in form sat immediately after the
   welcome text and left a wide empty gap between it and the right border -
   measured at 1440px, the form ended around x=1030 in a box running to x=1270.

   `float:right` puts it in the right-hand column instead. 25px of right margin
   matches `.opc-authcol-right`, the variant this skin already uses for the
   logged-in state, so guest and signed-in checkout now sit in the same place
   rather than jumping when you sign in.

   The column shrink-wraps its content, so `margin:0 auto` on the login table is
   what actually centres the form inside that column whenever the column is wider
   than the table - for instance once the welcome text wraps shorter and the float
   gets more room.

   Gated to 761px and up. Below that an existing rule sets
   `float:none!important` on both columns so the box stacks vertically, and the
   form is full width with nothing to align against; re-floating it there would
   undo the mobile layout. */
@media screen and (min-width: 761px) {
    #checkoutTopContainer .opc-authcol {
        float: right;
        margin-right: 25px;
        text-align: center;
    }

    #checkoutTopContainer #checkout_login {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================================
   Cart page: one button per button, not two
   ============================================================================
   The "Continue shopping" and "Checkout" pair at the top of cart.php were each
   drawing TWO buttons on top of each other, offset by the wrapper's padding.

   Two generations of styling are both live. 4.7.10's base CSS paints these as
   sliding-doors buttons: a PNG right cap on the wrapper div, and a second PNG on
   the inner <a> carrying the left cap and the face, with the anchor padded
   `0 5px 0 15px` to clear the caps. The tonerpirate skin then restyles the
   WRAPPER into a modern flat button - `#f1f1f1` + 1px border for Continue
   shopping, an orange gradient for Checkout - but never switches the old face off
   the anchor. So the wrapper drew the new button and the anchor drew the old one
   inside it.

   `div.main-button` (the Checkout at the bottom of the same page) does it the
   right way round: the skin moves the gradient onto the anchor and leaves the
   wrapper transparent, which is why that one always looked correct. Rather than
   restructure these two, the leftover face is simply switched off so the wrapper
   styling - the intended look, and the one that matches the bottom button - is
   all that renders.

   The cap padding goes with it. The anchor's 15px left / 5px right existed only
   to clear PNG caps that are no longer drawn, and the wrapper's asymmetric
   padding did the same job: `padding-right:30px!important` on the Checkout
   wrapper (base CSS) against `9px` on the left left the label visibly off-centre
   once the caps were gone. Both are evened up here.

   Scoped to the two wrappers, so no other button on the site is touched. Not
   breakpoint-scoped - the doubling was present at every width. */
div.checkout-1-button a:link,
div.checkout-1-button a:visited,
div.checkout-1-button a:hover,
div.checkout-1-button a:active,
div.checkout-1-button div,
div.checkout-3-button a:link,
div.checkout-3-button a:visited,
div.checkout-3-button a:hover,
div.checkout-3-button a:active,
div.checkout-3-button div {
    background: none;
    padding-left: 0;
    padding-right: 0;
}

.checkout-buttons .checkout-1-button {
    padding: 1px 13px;
}

div.checkout-buttons div.checkout-3-button {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* ============================================================================
   Checkout welcome box on tablet: sign-in goes left once it drops below the text
   ============================================================================
   With the column floated right, wrapping keeps it on the right - so on a tablet
   the welcome text sat top-left and the sign-in form ended up marooned at the
   bottom-right with a wide gap beside it. Floats give no way to say "right when
   you fit beside me, left when you drop below me".

   Flex does. `flex-wrap:wrap` + `justify-content:space-between` gives both states
   from one rule: while the two columns fit on one line they are pushed to
   opposite edges, exactly as the float did; as soon as the sign-in column no
   longer fits it moves to a line of its own, where space-between leaves a single
   item at flex-start - hard left, under the text.

   Deliberately not a plain breakpoint. The width at which the column drops was
   measured at roughly 902px, but that number is a product of how long the welcome
   sentences happen to be - both of which were reworded today - so a fixed
   min-width would silently stop matching the wrap the next time the copy changes.
   This keys off whether it actually fits.

   `float` is ignored on flex children, so the inline `float:left` on the text div
   and the `float:right` from the desktop rule both go inert here without needing
   to be overridden. The centring from that same desktop rule is undone, since the
   point of this band is left alignment.

   Bounded to 761-959. Below 761 an existing rule already stacks the box; at 960
   and up the desktop float-right layout takes over, where the column always fits
   beside the text. */
@media screen and (min-width: 761px) and (max-width: 959px) {
    #checkoutTopContainer .contentGroupContainer {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }

    #checkoutTopContainer .opc-authcol {
        float: none;
        margin-right: 0;
        text-align: left;
    }

    #checkoutTopContainer #checkout_login {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================================================
   Checkout welcome box: red lead-in on each bullet
   ============================================================================
   "Returning customer?" and "New Customer?" are wrapped in <strong> inside their
   language variables rather than split out in the template, so the whole sentence
   stays editable from one place and the markup travels with the copy at go-live.
   X-Cart renders language variables unescaped - the help pages are HTML in
   language variables - so the tag is live markup, not literal text.

   #cc230c is the red this skin already uses for prices, rather than a new one.

   Scoped to the bullets inside the welcome box, so the <strong> in the sign-in
   heading beside it ("Returning Customers - Sign in below") keeps its normal
   colour - that heading's own green comes from .opc-returning at the end of this
   file, which also overrides this red for the "Returning customer?" lead-in. */
#checkoutTopContainer .contentGroupContainer ul li strong {
    color: #cc230c;
    font-weight: 700;
}

/* ============================================================================
   Cart page: bigger quantity field, reload icon instead of an "Update item" button
   ============================================================================
   The stock per-item button is hidden rather than deleted from the template, so if
   js/tp-cart-qty.js ever fails to load the original control is one CSS line away
   and the page still works. On this page `.light-button` is only ever that button
   - verified against every button on cart.php - and body.main-cart keeps the rule
   off every other page.

   The field was 29x18 at 12px, which is small for a touch target and hard to read
   next to a 14px price. 15px type in a 46x26 box is comfortable without making the
   row taller than the price line it sits on. Centred, because a right-aligned
   single digit next to the "x" reads oddly.

   The icon button is hidden until tp-cart-qty.js adds .is-visible, which it does
   only when the number differs from the one the page was served with. It is laid
   out inline-flex so the glyph centres regardless of the surrounding line-height. */
body.main-cart .buttons-row .light-button {
    display: none;
}

/* #center is load-bearing here, not decoration. The cart's inputs are already claimed by
   `div.checkout-container #center input[type="text"]`, which carries an id and so outranks any
   number of classes: without #center this rule set width (nothing else declares it) but lost
   height and font-size, leaving a 46x18 box still at 12px. */
body.main-cart #center .product-price-text input[type="text"] {
    width: 46px;
    height: 26px;
    box-sizing: border-box;
    padding: 2px 4px;
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
}

.tp-qty-apply {
    display: none;
    width: 26px;
    height: 26px;
    margin: 0 0 0 6px;
    padding: 0;
    /* Solid green with a white arrow rather than a green arrow on grey: on #f1f1f1 the
       #4c6923 glyph was only about 4.6:1 at 15px of stroke, and it read as a disabled
       control sitting next to the field. Reversed out it matches Sign in and Add to cart,
       which is what makes it obvious this is the button that commits the change. */
    border: 1px solid #4c6923;
    border-radius: 4px;
    background: #4c6923;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
    line-height: 0;
}

.tp-qty-apply.is-visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-qty-apply:hover {
    background: #3d551c;
    border-color: #3d551c;
    color: #fff;
}

/* While the update is in flight. The click already returns to the server, so the only job
   here is to stop it looking clickable a second time. */
.tp-qty-apply.is-busy {
    opacity: 0.55;
    cursor: default;
}

.tp-qty-apply:focus {
    outline: 2px solid #4c6923;
    outline-offset: 1px;
}

/* ============================================================================
   Checkout welcome box: widen the text column so "Returning customer?" fits
   ============================================================================
   The text column carries no width of its own - it is a shrink-to-fit float, so
   the browser sizes it to its widest single line, which is the "Welcome To Our
   Secure One Page Checkout" heading beside the padlock: 499px. The bullets then
   have to wrap inside that.

   They get less room than the 499px suggests. The padlock is a 59px float with
   20px either side, and it is 100px tall, so it holds the first few line boxes
   of the <ul> in by 99px. Measured at 1280px, the bullets were laid out in
   400.3px of line - and "Returning customer? Please sign in and verify your
   information." needs 405.4px. Five pixels short, so it broke onto a second line
   for the last word.

   520px clears it with ~15px to spare. The number is bounded on the other side
   by the narrowest desktop the rule covers: at a 960px viewport the box's inner
   width is 883.8px, and the sign-in column takes 313px plus its 25px right
   margin, which leaves 535.8px for the text column before the sign-in form would
   be pushed below it. 520px sits inside that at every width from 960px up, so
   the two columns stay side by side - verified at 960 / 1000 / 1101 / 1280 /
   1920, no horizontal overflow at any of them.

   The space it takes was empty anyway: the sign-in column is floated to the
   right-hand edge, so there was a ~200px gap in the middle of the box.

   min-width, not width, so the column can still grow past this if the copy ever
   gets longer, and so nothing changes for the "New Customer?" bullet - that
   sentence needs 578px of column to fit on one line and deliberately keeps its
   second line here.

   Gated to 960px and up. 761-959px lays the box out with flex and 760px down
   stacks it, and in both the text column is already full width - a min-width
   there would only force horizontal overflow on a phone. */
@media screen and (min-width: 960px) {
    #checkoutTopContainer .contentGroupContainer > div[style*="float"] {
        min-width: 520px;
    }
}

/* ============================================================================
   Checkout welcome box: sign-in form lines up with the bullets, not the padlock
   ============================================================================
   Below 960px the sign-in column sits underneath the welcome text rather than
   beside it, and it was landing at the box's left edge - under the padlock,
   99px to the left of the bullet text it should line up with.

   Between roughly 600 and 760px it looked right, but only by accident. The
   padlock is a float inside the text column, and that column does not establish
   a block formatting context, so when the text is short the padlock hangs out of
   the bottom of it. The sign-in form is a table, a BFC root, and BFC roots are
   shifted sideways to avoid floats - so it was being nudged into place by an
   overhanging padlock. Narrow the screen and the text wraps taller, the padlock
   no longer overhangs, and the form snaps back to the left edge. Above 760px the
   box is a flex container, which contains the float outright, so the nudge never
   happened at all - that is why the tablet view broke at 777px.

   Rather than rely on that, the 99px gutter is made real: it becomes left
   padding on the box, and the text column is pulled back over it by an equal
   negative margin. The padlock and the welcome text therefore do not move at
   all, while everything else in the box - the sign-in form, and the greeting in
   its place once signed in - starts at the text's left edge by construction, at
   every width and whatever the copy does.

   99px is what the padlock occupies: 59px of image plus its 20px side margins.
   104px is that plus the 5px the box already had. Both are keyed to
   #checkoutLockImage above; a different image means new numbers here.

   The two cancel out exactly, so the width at which the sign-in column drops
   below the text is unchanged (measured: still between 880 and 900px). The
   inline max-width:100% on the text column has to be released, or it re-clamps
   that column to the now-narrower content box and the bullets wrap early -
   !important because it is an inline style on the div.

   Capped at 959px. From 960px up the sign-in column is floated to the right of
   the text, where it is not below anything and has nothing to line up with. */
@media screen and (max-width: 959px) {
    #checkoutTopContainer .contentGroupContainer {
        padding-left: 104px;
    }

    #checkoutTopContainer .contentGroupContainer > div[style*="float"] {
        margin-left: -99px;
        max-width: none !important;
    }
}

/* Phones only. The indent costs 99px, and below ~510px that leaves less than the
   313px the sign-in table wants at its natural size - the email/password inputs
   are a fixed 222px, which is what sets that floor. The table would not shrink;
   it would hang out past the box's right border. Releasing the input width lets
   the whole form be fluid and fit the indent instead: 243px wide on a 375px
   phone, 229px on a 360px one. The inputs already carry box-sizing:border-box
   and max-width:100% from the block further up, so nothing else has to change.

   Cost of this on a phone: the "If you already have an account please sign in:"
   heading takes two lines and "Forgot password?" drops below the Sign in button,
   making the box about 40px taller. That is the price of the form lining up with
   the text above it. */
@media screen and (max-width: 509px) {
    #checkoutTopContainer #checkout_login {
        width: 100%;
    }

    #checkoutTopContainer #checkout_login input[type="text"],
    #checkoutTopContainer #checkout_login input[type="password"] {
        width: 100%;
    }
}

/* ============================================================================
   Checkout welcome box on tablet: let the text use the width the form gave up
   ============================================================================
   On tablet the box is a flex container, and the text column is a flex item
   sized from its content. Its content size is set by the longest single line it
   contains - the "Welcome To Our Secure One Page Checkout" heading beside the
   padlock - which comes out at 499px and has nothing to do with how much room is
   actually on the line. So once the sign-in form dropped below, the text column
   stayed at 499px and the bullets kept wrapping against a wide empty right-hand
   side: at 800px it was holding 499px of a 633px line.

   flex-grow lets it take that space. Measured at 761 / 800 / 850 / 880, both
   bullets now sit on one line each with the column at 685-798px.

   Nothing changes where the two columns share a line (about 880px and up): they
   already fill it between them, so there is no free space to grow into - at
   900px the column gains 5px. That is also why this is not the fix for the
   bullets wrapping there; that band is genuinely full, the sign-in form is
   sitting in the space rather than below it.

   Growth only - flex-shrink stays at its default, so this cannot squeeze the
   column below its content either. Bounded to the flex band: below 761px the
   column is a plain full-width block already, and 960px up is the float layout
   where the min-width rule above governs. */
@media screen and (min-width: 761px) and (max-width: 959px) {
    #checkoutTopContainer .contentGroupContainer > div[style*="float"] {
        flex-grow: 1;
    }
}

/* ============================================================================
   Checkout welcome box: brand green on the two "returning customer" lead-ins
   ============================================================================
   Both places this applies - the "Returning customer?" bullet lead-in and the
   "Returning Customers" half of the sign-in heading - carry class="opc-returning"
   inside their language variable, so the copy and its markup stay editable from
   one place (see migration/checkout_welcome/checkout_welcome.sql).

   #527c00 rather than the logo's own green. The logo lime sampled straight off
   Toner_Pirate_print.png is #9cc520, which on this box's #F5F5F5 background
   measures 1.85:1 - far under the 4.5:1 needed for body text, and it looked
   washed out at 14px bold. #527c00 is the same hue family (80 degrees against
   the lime's 75) and is already the green in this very box, on the "Forgot
   password?" link three rows below; it measures 4.54:1.

   Two classes in the selector on purpose. The blanket red on
   `#checkoutTopContainer .contentGroupContainer ul li strong` is (0,1,1,3), so a
   one-class rule would lose to it and the bullet would stay red; adding
   .contentGroupContainer makes this (0,1,2,0), which wins on class count. The
   same selector reaches the heading, which is not inside the <ul> and was never
   red to begin with.

   No font-size here: both lead-ins already inherit the box's 14px, and the
   heading's <span> sits inside the template's <strong>, so it is bold like the
   bullet lead-in without asking. */
#checkoutTopContainer .contentGroupContainer .opc-returning {
    color: #527c00;
}

/* ============================================================================
   Enlarge-Image popup (colorbox): drop the grey frame, move Close to top right
   ============================================================================
   Colorbox's stock theme draws a grey border out of a sprite, in eight divs
   around the content - four corners, and a repeating strip down each side. This
   skin's responsive bands already switch seven of those off with
   `display:none!important`, but #cboxMiddleLeft was left out of every one of
   those lists. So at those widths the entire frame vanished except the left-hand
   strip, and the popup was left with a 21px grey band down one side and nothing
   anywhere else. Measured at a 1350px viewport: everything display:none, and
   #cboxMiddleLeft alive at 21x500 immediately left of the white content.

   It is width-dependent, which is why it comes and goes: the display:none lists
   only exist in the 360, 361-509 and 1301-1400 bands. Between 510 and 1300, and
   at 1401 and up, the full frame renders as designed.

   Switching the paint off rather than adding #cboxMiddleLeft to those lists.
   Colorbox measures these divs when it opens and sizes/centres #colorbox from
   what it finds, so removing them from the layout moves the popup - taking the
   sprite away instead leaves every box exactly where it was and only stops it
   being drawn. It also fixes all widths at once rather than the three bands that
   happen to have a list, so the popup now looks the same everywhere.

   The Close button was bottom right, sitting in a 28px strip that
   #cboxLoadedContent's margin reserved below the photo. Moved to the top right,
   which leaves that strip empty white space - so the margin goes too, and the
   popup is now exactly the size of the image (500x500 rather than 500x528).

   The button is a sprite image by default, a grey circle with a lighter x in it.
   That is replaced with a plain black multiplication sign drawn in a :before -
   `text-indent` has to be reset because the base rule pushes the button's own
   "close" text off-screen with -9999px, and font-size:0 on the button keeps that
   text hidden while the :before sets its own size. The text stays in the DOM for
   screen readers. */
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
#cboxMiddleLeft, #cboxMiddleRight,
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight {
    background: none;
}

#cboxLoadedContent {
    margin-bottom: 0;
}

#cboxContent #cboxClose {
    top: 2px;
    right: 4px;
    bottom: auto;
    left: auto;
    width: 28px;
    height: 28px;
    background: none;
    text-indent: 0;
    font-size: 0;
    line-height: 0;
}

#cboxContent #cboxClose:before {
    content: "\00d7";
    display: block;
    font: 700 30px/28px Arial, Helvetica, sans-serif;
    color: #000;
    text-align: center;
    /* The mark sits directly on the photo, so on a product shot that is dark in its
       top-right corner a black x would disappear into it. Four stacked white glows
       give it a halo that reads on any image; on the usual white-background shot the
       glow lands on white and is invisible, so the mark still looks like a bare x. */
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #fff;
}

#cboxContent #cboxClose:hover:before {
    color: #666;
}

/* ============================================================================
   Cart page: collapse the note paragraph once its text is removed
   ============================================================================
   The gift-certificate note is emptied at the language variable (txt_cart_note),
   not cut out of customer/main/cart.tpl - that is a large core template and
   forking it for one <p> would mean re-merging it on every X-Cart upgrade. The
   trade is that `<p class="text-block">` is still rendered, empty, and its 15px
   bottom margin left a gap under the heading.

   :empty is what makes this safe to leave in place: it matches only while the
   variable is blank. Put the text back and the paragraph starts rendering again
   with its spacing intact, with no CSS to undo. */
body.main-cart #center-main p.text-block:empty {
    display: none;
}

/* ============================================================================
   Cart page: put "Your shopping cart" on the same line as the two buttons
   ============================================================================
   The buttons come FIRST in the markup and float right, so the heading would
   naturally rise beside them - it does not only because X-Cart drops a
   `<div class="clearing">` (clear:both) between the two. Neutralising that one
   divider is the whole change: no repositioning, no negative margins, and the
   floats still reserve their space so the heading text can never run underneath
   them.

   Targeted through the adjacency `div.checkout-buttons + div.clearing` rather
   than by class alone - `.clearing` is X-Cart's general-purpose clearfix and
   appears many times on this page; only the instance directly after the button
   row is the one holding the heading down. Note the class is checkout-buttonS:
   the singular reads naturally and silently matches nothing.

   margin-top lines the two up: the heading's 24px/26.4px text box is taller than
   the 33px buttons, so with both starting at the same y the text sat low against
   them. 0 puts the cap height on the buttons' centre line.

   Held to 768px and up. Below that the buttons alone are ~270px of a ~340px
   column, leaving too little for a 24px heading beside them - it would wrap to
   two lines against the buttons. Phones keep the stacked layout. */
@media screen and (min-width: 768px) {
    body.main-cart #center-main div.checkout-buttons + div.clearing {
        clear: none;
    }

    body.main-cart #center-main div.checkout-buttons + div.clearing + h1 {
        margin-top: 0;
    }
}

/* ============================================================================
   Cart page: the relocated "Remove" control
   ============================================================================
   js/tp-cart-qty.js moves X-Cart's per-item delete anchor out of its own table
   row and into td.details, below the price. This is what makes it read as a
   button rather than the small icon-link it was.

   The stock .simple-delete-button paints a cross sprite as a background; that is
   cleared, because the control now says "Remove" and a mark behind the word just
   reads as a smudge. Muted red rather than the site's green: this is the one
   destructive control in the row and should not look like Checkout or the
   quantity-apply icon. */
body.main-cart .tp-remove-row {
    margin-top: 12px;
}

body.main-cart a.tp-remove-button {
    display: inline-block;
    padding: 3px 14px;
    border: 1px solid #c9b3b0;
    border-radius: 4px;
    background: #f7f1f0 none;
    color: #8a1f11;
    font-size: 13px;
    line-height: 19px;
    text-decoration: none;
    text-indent: 0;
    width: auto;
    height: auto;
}

body.main-cart a.tp-remove-button:hover {
    background: #f0e2e0 none;
    border-color: #b8938f;
    color: #6d180d;
    text-decoration: none;
}

/* ============================================================================
   Cart page: Remove button stays readable on hover, and rows line up
   ============================================================================
   HOVER. `a.simple-delete-button:hover { color: transparent !important }` is in
   the base theme, and it is deliberate there: the stock control is an icon, so
   the label is hidden on hover to leave the sprite alone. Ours is a word, so it
   vanished. !important is the only way past an !important, and it is confined to
   the class this skin adds.

   ROW ALIGNMENT. Each cart line is its own <table>, so the columns are measured
   per table and nothing forces them to agree: the first row's image cell came out
   at 274px and the rest at 211px, stepping the titles right as the list went down.
   A fixed width on the image cell is what makes them share one grid. 230px fits
   the 200px-wide thumbnail plus its cell padding with a little air.

   Below 768 the image and details stack, so the fixed width is scoped above that
   and phones keep the layout they have. */
body.main-cart a.tp-remove-button:hover {
    color: #6d180d !important;
}

/* superseded by the shrink-to-content rule further down this file */

/* ============================================================================
   Cart page: size the product thumbnail from CSS
   ============================================================================
   The cart now requests the 300x200 thumbnail (see customer/main/cart.tpl) rather
   than the 500x500 detail image. Whatever previously forced 200x200 would squash
   it - a 1.5 ratio drawn in a square box - so the height is released and only the
   width is set. 200x133 at the source's own ratio.

   !important because the rules that produced the old square are themselves
   !important; scoped to the cart's image cell so no other thumbnail is touched. */
body.main-cart #center-main td.image img {
    width: 200px !important;
    height: auto !important;
    max-width: 100%;
}

/* ============================================================================
   Cart page: one column grid across every line
   ============================================================================
   The earlier `td.image { width: 230px }` was only a hint - under
   table-layout:auto a cell width is a suggestion the browser is free to exceed,
   and it did: the first line's image cell measured 274px against 230px on the
   rest, because that product's much longer description changed how its table
   distributed the row. Each line being its own <table> is what allows them to
   disagree at all.

   table-layout:fixed removes the guesswork - the first row's declared widths ARE
   the columns - so every line resolves to the same 230px image cell and the
   titles start at the same x. The class is added by js/tp-cart-qty.js; the stock
   markup carries nothing to target.

   Kept above 768px, where the image and details sit side by side. Below that they
   stack and there are no columns to align. */
@media screen and (min-width: 768px) {
    /* `width: 230px` on the cell did not hold. Confirmed with getMatchedStylesForNode that
       every line's image cell matches the same rules with the same 230px and carries no inline
       width - yet the first line still used 273.6px. Under table layout a cell width is an
       input to column negotiation, not a result, and each line being its own <table> lets them
       negotiate differently; table-layout:fixed did not settle it either.

       So the cell is taken out of the negotiation instead. `width: 1%` is the standard
       shrink-to-content idiom - the browser cannot honour 1%, so the column collapses to its
       content - and the content is pinned at 200px by the anchor below. Every line then resolves
       to 200px plus the cell's own padding, by construction rather than by agreement. */
    body.main-cart #center-main table.tp-cart-item td.image {
        width: 1%;
        white-space: nowrap;
    }

    body.main-cart #center-main table.tp-cart-item td.image > a {
        display: block;
        width: 200px;
    }
}

/* ============================================================================
   Cart page: breathing room under Remove, and an inset on the details column
   ============================================================================
   20px is one line: the details cell computes line-height:20px at 14px, so the
   gap under the button matches the spacing between the description's own lines
   rather than being an arbitrary number. It adds to the 10px already sitting
   between the line's table and the next.

   The details cell had no padding at all, so the title started hard against the
   thumbnail's cell edge. Left only - the right side is the wide open part of the
   row and needs nothing. Not scoped to a breakpoint: the image and details sit
   side by side at every width on this page, so the inset is wanted at all of
   them. Widened from 10px to 30px on request. */
body.main-cart #center-main table.tp-cart-item td.details {
    padding-left: 30px;
}

body.main-cart .tp-remove-row {
    margin-bottom: 20px;
}

/* ============================================================================
   Shipping estimator: restore live's box, over a 4.7.10 rule that outranks it
   ============================================================================
   altskin.css already carries live's `.estimator-container { background:#f6f6f6;
   border:1px solid #aeaeae; border-top:none; padding:12px 10px }`, but 4.7.10's
   base adds `.cart .cart-border { background:#f3f3f3; border:1px solid #b5b6b7;
   border-top:0; padding:15px }`, which is one class more specific and wins.
   Live's bundle has no such rule at all - checked - so this is a 4.7.10 arrival,
   not something the port missed. Re-asserted here at (0,3,0) so live's values
   apply again: paler fill, lighter border, tighter padding.

   The second rule is live's and was genuinely absent from the port: it is what
   makes "Estimate shipping cost" read as a blue 13px bold link rather than
   inheriting the theme's default button text. */
.cart .estimator-container.cart-border {
    background: #f6f6f6;
    border: 1px solid #aeaeae;
    border-top: none;
    padding: 12px 10px;
}

.estimator-container.cart-border .simple-button {
    color: #043fa0;
    font-size: 13px;
    font-weight: 700;
}

/* ============================================================================
   Cart boxes: full width and live's colours, over 4.7.10's 95% rule
   ============================================================================
   4.7.10 ships

     .cart .responsive-item, .cart .responsive-cart-header, .cart .cart-border,
     .cart .buttons, .cart .paypal-cart-button, ... {
         width: 95%; box-sizing: border-box; ...
     }

   Live's bundle has no such rule - checked both bundles - so on live these boxes
   take their width from `.right-box { width:100% }` and `.estimator-container
   { width:100% }` and run the full width of the column. Here the 4.7.10 selector
   is one class more specific and pinned them to 95%: 1300px of a 1368px column,
   the 68px short you spotted.

   The same rule was also repainting them - #f3f3f3 with a #b5b6b7 border and 15px
   of padding, against live's #f6f6f6 / #aeaeae / 8px 0 on .right-box. Restored
   here alongside the width, since it is the same rule losing in both cases.

   box-sizing stays border-box (inherited from that same 4.7.10 rule), so 100%
   includes the border and padding and the boxes cannot overflow the column. */
.cart .right-box.cart-border,
.cart .estimator-container.cart-border {
    width: 100%;
}

.cart .right-box.cart-border {
    background: #f6f6f6;
    border: 1px solid #aeaeae;
    padding: 8px 0;
}

/* ============================================================================
   Cart: Subtotal two points larger
   ============================================================================
   Both halves were 12px - the "Subtotal:" label (td.total) and the figure beside
   it (span.currency) - so both go to 14px, keeping them on the same footing. The
   figure is targeted through the box and the label's row rather than by
   .currency alone, which is used for every price on the page.

   The box computes 14px itself, so this simply stops the total being the one
   thing in it set smaller than its container. */
.cart .right-box.cart-border td.total,
.cart .right-box.cart-border td.total + td .currency,
.cart .right-box.cart-border .total-value .currency {
    font-size: 14px;
}

/* ============================================================================
   Cart footer row: un-clip Update cart, and make Clear cart a real button
   ============================================================================
   The theme's generic `button.button .button-left` carries `margin: 0 0 0 -6px`
   - the pull-back that used to tuck the label under a sliding-doors PNG left cap
   that is no longer drawn. Everywhere else on the site there is something to the
   left to absorb it; here there is not. `.cart .left-buttons-row` is
   `position:absolute; left:0`, so the button already starts hard against the
   column edge and the -6px put its left border 5px outside it - measured, the
   row began at x=33.4 and the button's box at x=28.4 - where #center-main's
   overflow:hidden cut it off.

   +4px is that -6px moved 10px to the right, which lands the border 5px inside
   the row instead of 5px outside it. Scoped to this row: the same -6px is doing
   its job on every other button on the site and must not move.

   Clear cart sits next to it as `a.simple-delete-button` - a red text link with a
   small trash GIF, which reads as an afterthought beside a bordered Update cart.
   It gets the same treatment the per-item control got: the values below are the
   ones from `body.main-cart a.tp-remove-button` further up this file, so the two
   destructive actions on the page look identical. Kept as a copy rather than
   folded into that selector list because that block is being edited in another
   session right now; if its look is retuned, retune these with it.

   `background: <colour> none` is what drops the trash GIF, and the icon's
   13px left padding goes with it, or the label would sit off-centre in the
   button. */
body.main-cart .left-buttons-row button.button .button-left {
    margin-left: 4px;
}

body.main-cart .left-buttons-row a.simple-delete-button {
    display: inline-block;
    padding: 3px 14px;
    border: 1px solid #c9b3b0;
    border-radius: 4px;
    background: #f7f1f0 none;
    color: #8a1f11;
    font-size: 13px;
    line-height: 19px;
    text-decoration: none;
    text-indent: 0;
    width: auto;
    height: auto;
    vertical-align: top;
}

body.main-cart .left-buttons-row a.simple-delete-button:hover {
    background: #f0e2e0 none;
    border-color: #b8938f;
    color: #6d180d;
    text-decoration: none;
}

/* ============================================================================
   Cart estimator: shipping methods and their charges at 12px bold
   ============================================================================
   Both columns of the estimate - the method name and the price beside it - are
   set together, so the two stay on the same footing whatever the rows around
   them do. Settled at 12px bold, after 15px and 14px were tried.

   The weight is stated on both halves on purpose. The method names were already
   coming out bold from the rows around them while the prices were not, so
   without this the two columns would go bold and regular at the same size.

   Held to the cart page and to the estimator. `table.checkout-shippings` is also
   the shipping block on one-page checkout, which has its own sizing further up
   (`#opc_shipping table.checkout-shippings td.shipping-name`) and is not part of
   this change. */
body.main-cart .estimator-container table.checkout-shippings td.shipping-name,
body.main-cart .estimator-container table.checkout-shippings td.shipping-name label,
body.main-cart .estimator-container table.checkout-shippings td.shipping-cost,
body.main-cart .estimator-container table.checkout-shippings td.shipping-cost .currency {
    font-size: 12px;
    font-weight: 700;
}

/* ============================================================================
   Cart: the coupon form stays folded away until asked for
   ============================================================================
   "Redeem a discount coupon" and its form are hidden by default so the cart does
   not advertise a coupon to shoppers who do not have one. The prompt above it now
   carries a "Click here" link (in txt_add_coupon_header) which reveals the box.

   Hidden in CSS, not by script, so the form is never briefly visible while the
   page finishes loading.

   Targeted by class. The first version of this rule identified the box structurally,
   as the div.dialog following a p.text-block, on the assumption that the emptied
   cart-note paragraph at the top was followed by an item table. It is not - it is
   followed by the div.dialog that wraps every cart line - so the rule hid the whole
   cart and left the prompt alone on the page. modules/Discount_Coupons/add_coupon.tpl
   is now overridden to put tp-coupon-dialog on this box, which is unambiguous.

   15px on the prompt: it is the only thing left above the fold once the coupon box
   is folded away, so it carries more weight than the 11px the theme gave it. */
body.main-cart #center-main div.dialog.tp-coupon-dialog {
    display: none;
}

body.main-cart #center-main div.dialog.tp-coupon-dialog.tp-coupon-open {
    display: block;
}

body.main-cart #center-main p.text-block {
    font-size: 15px;
    /* Arial rather than the theme's source_sans_proregular. Set on the paragraph so the
       "Click here" link inside inherits it too and the sentence reads as one piece. */
    font-family: Arial, Helvetica, sans-serif;
}

body.main-cart #center-main a.tp-coupon-toggle {
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================================================
   "Specify destination" popup: 14px throughout
   ============================================================================
   The popup ran at the theme's 11px - labels, both selects and the zip field -
   which is small for a form someone has to read and type into. Everything moves
   to 14px together, including the Close window link, so nothing is left at the
   old size next to it.

   Hung on .tp-estimate, a wrapper inside the form itself, NOT on the page body.
   popupOpen() does not open a browser window - it builds a jQuery UI dialog on the
   current page and injects this content into it, so in normal use the body is the
   cart page's and a class put there never applies. An earlier version keyed on
   body.popup-estimate and did nothing at all in the real flow: it only ever showed
   up when the standalone popup_estimate_shipping.php URL was loaded directly, which
   is not how a shopper reaches it. A marker inside the content works in both.

   The selects and the input need naming separately: form controls do not inherit
   font-size from an ancestor, they start from the browser default, which is why
   setting it on the wrapper alone would leave the two dropdowns and the zip box
   small while the labels beside them grew. */
.tp-estimate,
.tp-estimate label,
.tp-estimate td {
    font-size: 15px;
}

.tp-estimate select,
.tp-estimate input[type="text"] {
    font-size: 15px;
}

/* ============================================================================
   Product grid: rows must not snag on unequal tile heights
   ============================================================================
   The tiles are Bootstrap 3 columns (.item.col-md-3), which are floats. A float
   that wraps slides left only until it catches on a taller float above it, so a
   single tall tile leaves holes in the next row. Reported on a search for
   "Q2612A" signed in as a member: tiles 1-2 carried five membership price rows
   and stood 355px tall, tiles 3-4 carried three and stood 307px, and the fifth
   result landed under tile 3 with slots 1 and 2 empty.

   Category pages appeared safe only by luck -- .dialog-category-products-list
   sets min-height:288px, which is below the 307-355px these tiles actually
   reach, so it equalises nothing. Search results are not matched by that
   selector at all.

   Flex wrapping removes the float behaviour, so nothing can snag at any height,
   and items in a row stretch to a common height (which also squares up the
   short tiles). Widths still come from the col-* percentages, so the 4/2/1
   per-row breakpoints are unchanged; measured as a no-op at 991px and below.
   ============================================================================ */
.products.products-list {
    display: flex;
    flex-wrap: wrap;
}

.products.products-list .item {
    float: none;
}

.products.products-list .item > .itemdiv {
    height: 100%;
}

/* ============================================================================
   Advanced search form: fields match the rest of the site
   ============================================================================
   The site-wide form rule

       .input-style, input[type=password], input[type=text], select, textarea
           { ... font-family: 'source_sans_proregular' }

   puts Source Sans on every field, while the page around them runs on the body
   stack (arial, verdana, helvetica, sans-serif). On the advanced search form the
   mismatch is obvious, because the bold Arial labels in .data-name sit directly
   beside the inputs.

   Scoped to .adv-search on purpose. The same mismatch exists on every other form
   on the site (checkout, login, cart); widening this rule would restyle all of
   them, which is a bigger change than was asked for.

   11px -> 13px. Specificity clears the site rule on its own (0,2,1 over 0,1,1
   for the inputs, 0,1,1 over 0,0,1 for the select), so no !important is needed.
   ============================================================================ */
.adv-search input[type="text"],
.adv-search select,
.adv-search select option {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 13px;
}

/* ============================================================================
   Header: the black Checkout / mini-cart box must sit ON the green bar
   ============================================================================
   Between roughly 961px and 1100px the box hung 21px below the green menu bar,
   overlapping the white space under it.

   The box is laid out three different ways as the window narrows. Under 959px and
   over 1100px it is a plain `float: right` and simply rides at the end of the bar,
   which is why those widths always looked right. In between, one band

       @media screen and (min-width:960px) and (max-width:1100px)
           .menu-container .menu_checkout_cart { position: absolute; top: 21px; right: 0 }

   lifts it out of the flow and pins it 21px down. That 21px is a hand-measured
   half-gap: it centres a 39px box in a 79px bar, i.e. it assumes the nav has
   wrapped onto TWO lines. The nav only wraps below about 961px now, so for the
   rest of that band the bar is a single 39px line and a 21px offset pushes a 39px
   box almost entirely past the bottom edge. Live has the same rule and the same
   band; there the box lands ABOVE the bar instead, so this is not something the
   migration broke - it is inherited.

   Rather than swap one hand-measured number for another, the offset is expressed
   as what it was always trying to be: centred in the bar, whatever the bar's
   height. top:50% + translateY(-50%) is exact for a one-line bar (offset 0) and
   for a two-line bar (offset 20px, which is what the 21px was approximating), so
   the box cannot come off the bar again if the nav's wrap point moves.

   The `position: relative` re-anchors the box from .line2 (the whole header block)
   to the bar itself, which is what makes 50% mean "half the bar". It is scoped
   inside this media query so no other width can be affected. The only other
   absolutely-positioned elements in here are the nav dropdowns, and they are
   placed at their static position (top/left:auto), which is unchanged by a new
   containing block - verified by measuring the dropdowns before and after.
   ============================================================================ */
@media screen and (min-width: 960px) and (max-width: 1100px) {
    .menu-container {
        position: relative;
    }

    .menu-container .menu_checkout_cart {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ============================================================================
   Search box: the magnifier button must meet the green border
   ============================================================================
   From 641px to 1100px a 3px strip of white showed between the right edge of the
   magnifier button and the search box's green border.

   The input carries a 4px green border, so the button is flush when it sits 4px
   in from its containing block's right edge. It gets there from TWO declarations,
   which is the trap: `#header input { margin-right: 3px }` near the top of this
   file, plus the base

       #header .line1 input.image-button { top: 2px; right: 1px }

   That was 1px + 3px = 4px, landing the button exactly against the inside of the
   border. It is now 1px + 1px = 2px, overlapping the border instead - see the note
   on the base rule for why an exact fit could not survive Windows Chrome's rounding.

   Two bands (641-959 and 960-1100) then set

       input.image-button { right: 4px !important }

   which reads like "line it up with the 4px border" but is added to the 3px
   margin that is still there, for 7px total - parking the button 3px short and
   opening the white strip. The same bands also carry a `right: 18px` rule that
   never applied, being outgunned by the base rule's specificity, so the
   !important line is the only one in play.

   Restoring the base 1px for that range makes the button flush at every width:
   under 641px and over 1100px nothing overrides the base rule and they were
   already correct, which is why the seam only showed in the middle. Live renders
   this button at the identical coordinate (770.4px at a 1050px window), so this
   restores the live appearance rather than inventing a new one.

   Needs !important to answer !important, and lives at the end of the file because
   those bands are duplicated three times higher up.
   ============================================================================ */
@media screen and (min-width: 641px) and (max-width: 1100px) {
    #header .line1 input.image-button {
        right: 1px !important;
    }
}

/* ============================================================================
   Login page: "Forgot password?" at 12px
   ============================================================================
   The link runs at 11px from the site-wide `a.simple-button { font-size: 11px }`,
   which dresses buttons on many other pages, so the size is set here rather than
   on that shared rule.

   Scoped two ways on purpose: body.main-authentication keeps it to login.php, and
   the href keeps it to this link rather than any other .simple-button on the page.
   One Page Checkout has its own Forgot password link (opc_main.tpl) which is
   deliberately left alone - it was not part of the request.
   ============================================================================ */
body.main-authentication a.simple-button[href*="Password_Recovery"] {
    font-size: 12px;
}

/* ============================================================================
   BARE POPUP PAGE  (help.php?section=<x>&popup=Y, see customer/home.tpl)

   The popup layout emits only <div id="popup-page-content"> - it never opens
   #page-container / #content-container / #center, so none of the column CSS
   (the width:200% + left:50% float trick, the absolutely positioned #header,
   #left-bar/#right-bar) applies and there is nothing to override here. All that
   is left to do is give the content some breathing room and neutralise the
   theme's page-level width floor, which would otherwise force a horizontal
   scrollbar in a window narrower than 780px.
   ============================================================================ */
body.popup-page {
    min-width: 0;
    background: #fff;
    margin: 0;
}

/* Top padding is the ONLY thing between the window edge and the first line of text -
   the two rules below strip the other two contributors, so this number is the gap you
   actually see (measured 10px). It was 35px: 15 here + 10 + 10. */
#popup-page-content {
    padding: 10px 20px 20px;
}

/* conditions.tpl and its sibling help templates open a stray legacy <P> before the
   dialog (it dates to the 2004 X-Cart original) which the parser closes immediately as
   an empty paragraph, donating its p{margin:0 0 10px}. Harmless on the full page where
   it sits under the heading; in the popup it is the top of the window. Scoped to direct
   children so real paragraphs inside .content keep their spacing, and scoped to the
   popup so the full page keeps rendering exactly as it does today. */
#popup-page-content > p {
    margin: 0;
}

/* .dialog .content's 10px top padding sat under the heading. The heading is hidden
   here (see below), so it is just a second helping of the padding above. */
#popup-page-content .dialog > .content {
    padding-top: 0;
}

/* The dialog is the whole page here, so its bottom margin (30px, meant to space
   stacked dialogs apart) just adds dead scroll at the end of the window. */
#popup-page-content .dialog {
    margin-bottom: 0;
}

/* Drop the dialog's own heading in a popup: the popup window's title bar already
   shows the section name (see the $popup_title branch in customer/service_head.tpl),
   so the in-page "Terms & Conditions" bar below it just says the same thing twice.
   Done here rather than by passing noborder to dialog.tpl so that it holds for every
   help section the popup can show, without overriding the shared dialog template. */
#popup-page-content .dialog > .title {
    display: none;
}

/* ---------------------------------------------------------------------------
   960-971px: the top menu wraps "Help" onto a second row.

   #header is position:absolute with a hard height:125px, so nothing below it
   reserves space for that extra row -- the wrapped menu lands on top of whatever
   comes first in the content column (the Banner System strip, or the part-finder
   band when no banner is set). Reproduced with the banner removed, so it is the
   header, not the banner.

   Mobile switches at max-width:959px, so the window starts at 960. It wraps up
   to 971; from 972 to 984 it stays on one row but "Help" is jammed hard against
   the CHECKOUT block, so the band runs to 984. From 985 the stock 14px padding
   clears it on its own.

   Trimming the per-item padding is enough; moving the 959/960 breakpoint instead
   would touch ~28 media queries, three of which are min-width:960px combined
   with max-width:991px and would become impossible ranges.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 960px) and (max-width: 984px) {
    .menu > ul > li {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ---------------------------------------------------------------------------
   Header/content clearance on desktop.

   #header is position:absolute, so nothing below it reserves space; the offset
   is a hand-tuned constant per breakpoint on #content-container (~38 of them in
   this file). Every desktop band was set a few px SHORT of the header's real
   height, so #content-container actually starts INSIDE the header:

       viewport     menu bar ends   content started   clearance
       960-991          193              190            -3px
       992-1299         121              118            -3px
       1300+            121              115            -6px

   Nothing showed because the first element in the column happens to carry its
   own top spacing (.banner-black has margin-top, the banner strip has 10px), so
   the deficit was absorbed. Measured clearance to the first visible thing was
   only +3 to +6px, and Chrome on Windows renders this header a few px taller
   than Chrome on Linux -- enough to consume it and drop the content onto the
   menu. That is why it reproduced on Windows only, and at seemingly random
   widths. Mobile (<=959px) already had +29px and was never affected.

   Give every desktop band ~11px of real clearance. Checkout is deliberately not
   touched: .checkout-container #content-container has higher specificity and
   keeps its own values.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 960px) and (max-width: 991px) {
    #content-container { margin-top: 204px; }
}
@media screen and (min-width: 992px) {
    #content-container { margin-top: 132px; }
}

/* ---------------------------------------------------------------------------
   Logged-in greeting: keep "Hello, <name>" and "My account" on separate lines
   at 960-1100px.

   The 960-1100 band sets .hello-name{width:50%;float:left}. Floated at half
   width it no longer fills the line, so ul.login-signin -- which is
   display:inline-block, and is forced inline-block again by the
   TP-HEADER-SIGNIN-TOPRIGHT-FIX block at min-width:960px -- flows up beside the
   name instead of dropping below it. From 1101px the float is not applied and
   the two stack normally, which is the intended look.

   .register_login is position:absolute with width:28% through this band, so
   there is room for both lines; the float was the only thing pulling them
   together. Measured with a rebuilt logged-in header fragment against the live
   CSS bundle (the state needs a login, so it cannot be shot on the real page).
   --------------------------------------------------------------------------- */
@media screen and (min-width: 960px) and (max-width: 1100px) {
    .hello-name {
        width: 100%;
        float: none;
    }
}

/* ---------------------------------------------------------------------------
   Make the logged-in "Hello, <name>" and "My account" bold.

   NOT done with font-weight: every @font-face in this skin is declared as its
   own family at font-weight:400 (source_sans_proregular / _prosemibold /
   _probold), so font-weight:bold on a regular-only family gets a synthesized
   faux-bold instead of the real face. Switching family is how the rest of the
   skin does weight -- see the top menu, which uses _prosemibold.

   Covers both header states: "Sign in | Register" when logged out, and the
   "My account" label when logged in (both are top-level items of the same
   ul.login-signin).

   The child combinator on the second rule is load-bearing. "My account" is a
   bare text node in li.modify-profile-link, and the dropdown links under it
   declare no font-family, so they rely on inheriting the reset in the third
   rule. A plain descendant selector ("ul.login-signin li") would match those
   nested li elements DIRECTLY, and a direct match beats an inherited value
   whatever the specificity -- Account Details / Quick Reorder / Wish List /
   Order History / Address Book / Log out would all go bold again. "> li"
   matches only the top-level items; the dropdown li elements are children of
   the inner ul, so they stay out of reach.
   --------------------------------------------------------------------------- */
.hello-name {
    font-family: 'source_sans_probold';
}
ul.login-signin > li {
    font-family: 'source_sans_probold';
}
ul.login-signin li.modify-profile-link ul {
    font-family: 'source_sans_proregular';
}

/* ---------------------------------------------------------------------------
   Pin the sign-in / greeting block to one position at every desktop width.

   It used to shift as the window narrowed because it was being centred against
   boxes that themselves change height: .line1 is 83px as a single row but 155px
   once the header stacks at 960-991, and the logo is 67px in most bands but 47px
   between 992 and 1100. Centring against either therefore moved the block:

       UL top from the top of .line1, before:
       960-991  32     992-1100  31     1101-1280  26     1281+  27

   A constant offset instead, so it holds still from 960px up to any width. It
   clears the logo row in every band (logo starts at y=10, the search box not
   until ~88 in the stacked band), so nothing collides.

   Horizontal is deliberately untouched: the gap to the viewport edge grows
   39px -> 55px across this range, but that is #page-container being max-width:95%
   and applies equally to the logo and the search box, so the block stays put
   relative to the rest of the header. Measured at every band boundary
   (991/992, 1100/1101, 1280/1281) it steps by 0px, so there is no jump to fix.

   Below 960px .register_login is display:none, which is the "until it
   disappears" part -- nothing needed there.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
    #header .line1 .register_login {
        top: 27px;
        transform: none;
    }
}

/* "My account" is a bare text node in li.modify-profile-link, not an <a>, so it
   picked up neither the link colour nor a pointer cursor and did not read as
   clickable. Colour it the site link blue (a:link is #043fa0) and add the
   cursor.

   The caret needs no rule of its own: Bootstrap draws it with
   "border-top: 4px dashed" and no colour, so it inherits currentColor and turns
   blue with the label.

   The dropdown panel is unaffected -- its items are real <a> elements and
   ".login-signin a{color:#000}" (later in the cascade than a:link, same
   specificity) already pins them black. */
ul.login-signin li.modify-profile-link {
    /* One step lighter than the site link blue (#043fa0 = hsl(217,95%,32%));
       same hue and saturation, lightness 32% -> 40%. Contrast on white is
       7.10:1, so it still clears AA and AAA for normal text -- the label is
       bold 15px, which is not large text, so 4.5:1 is the bar it has to meet. */
    color: #054fc8;
    cursor: pointer;
}

/* Gap above the part-finder band.

   Two things had made it inconsistent. The desktop clearance fix raised
   #content-container margin-top by 14px (118 -> 132, and 190 -> 204 at
   960-991) so the content column stops starting inside the absolutely
   positioned header, and that lands on top of .banner-black's own margin.
   Separately the stock values were never consistent across the bands, which
   only showed once the Banner System was switched off and its strip stopped
   filling the space:

       menu-bottom to band-top, as found:
       <=509    42-44      641-959   51
       510-640   0         >=960     28   (19 in the 1101-1280 band)

   Levelled to ~18px from 641px up, so nothing jumps when the menu flips to its
   mobile form at 959. The values differ per band because the clearance already
   present differs: ~10px at >=960, ~19px at 641-959.

   Left alone below 641px: the 510-640 band deliberately sets margin-top:0 and
   was not part of the report.

   Scoping matters here -- media queries add no specificity, so an unscoped rule
   would beat the 510-640 band's margin-top:0 just by sitting later in the
   file. */
@media screen and (min-width: 641px) and (max-width: 959px) {
    .banner-black { margin-top: 0; }
}
@media screen and (min-width: 960px) {
    .banner-black { margin-top: 8px; }
}
@media screen and (min-width: 1101px) and (max-width: 1280px) {
    .banner-black { margin-top: 8px !important; }
}

/* "My account" sat 5px lower between 1101 and 1280 than at any other width, so
   it stepped down entering that band and back up leaving it. The 1101-1280 band
   is the only one that gives .hello-name ~ .login-signin a margin-top (5px);
   the top-level rule and every other band use 0. Level it. */
@media screen and (min-width: 1101px) and (max-width: 1280px) {
    .hello-name ~ .login-signin { margin-top: 0 !important; }
}

/* Hold the sign-in TEXT still, not just its box.

   0ad44fd pinned .register_login, and the <ul> box does sit at a constant y=30
   from 960px to 1920px -- but the visible text still stepped, because two rules
   move it INSIDE that fixed box:

       960-1100   text at 30
       1101-1280  text at 40   .login-signin gets padding-top:10px in that band
       1281+      text at 38   the li picks up the top-level margin-top:8px
                               (960-1280 override it with "margin: 0 3px")

   Measuring the <ul> missed both, which is why this looked fixed and was not.
   Zero them across the whole desktop range so the text lands at 30 everywhere,
   matching the 960-1100 band it already used.

   Applies to the logged-in block too: its My account line is the same
   ul.login-signin li, so it would otherwise step in the same two places. */
@media screen and (min-width: 960px) {
    ul.login-signin { padding-top: 0 !important; }
    ul.login-signin li { margin-top: 0 !important; }
}

/* Error alert popup (invalid coupon, etc.) was drawn mostly off-screen to the
   left on phones.

   Two rules collide. .ui-dialog.type-e widens the stock 300px jQuery UI box to
   500px and re-centres it with left:50% + margin-left:-250px. The responsive
   rule .ui-dialog.ui-widget.ui-widget-content.ui-corner-all (4 classes, so it
   wins on specificity) then resets width to 98% and left to 1px for viewports
   up to 640px -- but says nothing about margin-left, so the -250px survives and
   drags the box to 1 - 250 = -249px. At 390px wide that left 133px of a 382px
   dialog on screen, the rest cut off past the left edge.

   Measured with CDP on the real cart page: add a product, POST an invalid
   coupon, read getBoundingClientRect on .ui-dialog.

   Only .type-e is affected -- it is the only dialog type given the 500px
   treatment; information and warning popups keep jQuery UI's own width and are
   centred correctly by the same responsive rule. */
@media screen and (max-width: 640px) {
    .ui-dialog.type-e {
        margin-left: 0 !important;
    }
}

/* Keep the alert popup above its own modal overlay.

   common_files/css/jquery_ui.css gives BOTH .ui-dialog and .ui-widget-overlay
   z-index:10000, via `.ui-front`. The dialog normally ends up on top only
   because jQuery UI's _moveToTop raises it to 10001 -- and it does that solely
   when it finds a visible .ui-front sibling to measure against. If that check
   misses, the two tie, and the overlay wins because jQuery UI appends it after
   the dialog. The page then looks greyed out with the popup dimmed underneath
   and neither OK nor the titlebar X reachable, which is what happened on iOS
   Safari with the invalid-coupon error. Chrome on Linux bumped it to 10001 and
   looked fine, so this does not reproduce everywhere.

   Pinning it removes the dependency on that bump. !important on purpose: it has
   to beat the inline z-index _moveToTop writes, otherwise the inline value wins
   and we are back to relying on the same code path. Stacked dialogs still order
   correctly -- they tie at 10010 and the later one paints on top, which is the
   order they open in. See js/tp-alert-dialog.js for the tap-the-overlay-to-close
   half of this. */
.ui-dialog {
    z-index: 10010 !important;
}
/* !important here too: jQuery UI writes an inline z-index on the overlay at
   runtime (observed 10009), so without it the overlay is free to climb toward
   the dialog. Pinned, the 10-point gap cannot be closed. xAlert makes itself
   non-modal when an overlay already exists, so no second overlay is ever
   created that would need to sit above the first dialog. */
.ui-widget-overlay {
    z-index: 10000 !important;
}

/* ============================================================================
   Customer account tabs (#top-links) - match the live store
   ============================================================================
   The tabs on orders.php, register.php?mode=update, cart.php?mode=wishlist and
   address_book.php came out in jQuery UI's stock blue, because 4.7.10 ships a
   different theme from live:

       live  lib/jqueryui/jquery.ui.theme.css   (1.8-era, customised)
       here  lib/jqueryui/jquery-ui.theme.css   (1.12 stock "smoothness")

                        live                here (stock)
       inactive bg      #dbdbdb             #dfeffc + gradient png
       inactive border  #dbdbdb             #9dc4e1
       inactive text    #000                #2e6e9e
       active bg        #fff                #f5f8f9 + png
       active border    #949494             #79b7e7
       active text      #547020  (green)    #2d4462

   The markup differs too: 4.4.3 marked the current tab ui-tabs-selected, 4.7.10
   uses ui-tabs-active, so both are matched below and this keeps working if the
   template is ever re-forked from either version.

   SCOPED TO #top-links ON PURPOSE. ui-state-default / ui-state-active are
   jQuery UI's shared vocabulary - the add-to-cart popup, the alert dialogs and
   any datepicker all carry them. Restyling them globally to match these tabs
   would repaint every one of those.

   "none" is spelled out on each background because the stock rules carry a
   gradient PNG; a bare colour would leave the image sitting on top of it. */
#top-links .ui-state-default,
#top-links .ui-widget-content .ui-state-default,
#top-links .ui-widget-header .ui-state-default {
    background: #dbdbdb none;
    border: 1px solid #dbdbdb;
    color: #000;
}
#top-links .ui-state-default a,
#top-links .ui-state-default a:link,
#top-links .ui-state-default a:visited {
    color: #000;
}
#top-links .ui-state-hover,
#top-links .ui-widget-content .ui-state-hover,
#top-links .ui-widget-header .ui-state-hover {
    background: #dbdbdb none;
    border: 1px solid #dbdbdb;
    color: #000;
}
#top-links .ui-state-active,
#top-links .ui-tabs-active,
#top-links .ui-tabs-selected,
#top-links .ui-widget-content .ui-state-active,
#top-links .ui-widget-header .ui-state-active {
    background: #fff none;
    border: 1px solid #949494;
    color: #000;
}
#top-links .ui-state-active a,
#top-links .ui-state-active a:link,
#top-links .ui-state-active a:visited,
#top-links .ui-tabs-active a,
#top-links .ui-tabs-selected a {
    color: #547020;
}

/* ============================================================================
   Account tabs + profile note - restore live's text size
   ============================================================================
   The tab labels and the "This form enables you to modify your profile..."
   paragraph came out noticeably smaller than live. Neither declares a
   font-size, so both resolve against the inherited base - and the base is
   where the two installs diverge:

       live   body -> 14px      test   body -> 11px

   Same rule, opposite winner. Live's skin CSS is css/main.css and loads
   FIRST, so bootstrap's `body{font-size:14px}` (loaded later by
   service_css.tpl) overrides main.css's `body,button,input,select,textarea
   {font-size:11px}`. Porting the skin renamed that file to altskin.css,
   which service_css.tpl loads LAST - so here the 11px wins instead. One
   rename, and every element that inherits its size got smaller.

   Measured on the two register pages, only three things actually inherit:
   the two below and the footer. Everything else in the form declares px and
   already matches. So this pins the two the account pages need rather than
   flipping the global base, which would resize every inheriting element on
   every page this close to cutover. The base itself is logged in
   POST_MIGRATION_TODO.md.

   15.4px is not arbitrary: jQuery UI's `.ui-widget{font-size:1.1em}` sits on
   #top-links, and on live that is 1.1 x 14px. Keeping the computed value here
   also keeps the em-based tab padding (.5em 1em -> 7.7px 15.4px) identical. */
#top-links {
    font-size: 15.4px;
}
.register-note {
    font-size: 14px;
}