BODY {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    background-color: gainsboro;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

A {
    font-weight: bold;
    font-size: 8pt;
    color: maroon;
    font-style: normal;
    text-decoration: none
}

    A:visited {
        font-weight: bold;
        font-size: 11pt;
        color: maroon;
        font-style: normal;
        text-decoration: none
    }

    A:link {
        font-weight: bold;
        font-size: 11pt;
        color: maroon;
        font-style: normal;
        text-decoration: none
    }

    A:hover {
        font-weight: bold;
        font-size: 8pt;
        color: gray;
        font-style: normal;
        text-decoration: underline
    }

.menu-text {
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: darkblue;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.menu-text-padded {
    PADDING-LEFT: 10px;
    FONT: bold 11pt/20px Arial;
    COLOR: black
}

.small-text-padded {
    PADDING-LEFT: 10px;
    FONT: bold 7pt/16px Arial;
    COLOR: #666666
}

.menu-text-orange {
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: #e67700;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.menu-text-red {
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: red;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.menu-text-blue {
    FONT-WEIGHT: normal;
    font-size: 11pt;
    COLOR: navy;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.menu-text-red2 {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    COLOR: red;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.content-text {
    FONT-WEIGHT: normal;
    font-size: 11pt;
    COLOR: black;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.content-text-padded {
    PADDING-LEFT: 10px;
    FONT-WEIGHT: normal;
    font-size: 8pt;
    COLOR: black;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.search-text {
    FONT-WEIGHT: normal;
    font-size: 8pt;
    COLOR: black;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.textbox {
    FONT-WEIGHT: bold;
    font-size: 11pt;
    COLOR: black;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: #dddddd
}

#TxtUser {
    FONT-WEIGHT: bold;
    font-size: 8pt;
    COLOR: black;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: #dddddd
}

#TxtPass {
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: #dddddd
}

.errMessage {
    font-weight: bold;
    font-size: 8pt;
    color: red;
    font-style: normal;
    background-color: lightgoldenrodyellow;
    padding: 10px 5px;
}

.copyright {
    FONT-WEIGHT: normal;
    FONT-SIZE: 7pt;
    COLOR: #666666;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.Header {
    BACKGROUND-COLOR: black
}

    .Header .TR1 {
    }

    .Header .TR2 {
    }

.MainBody {
    BACKGROUND-COLOR: white
}

.headline-text {
    FONT-WEIGHT: bold;
    FONT-SIZE: 14pt;
    COLOR: black;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

INPUT {
    FONT-WEIGHT: bold;
    font-size: 11pt;
    COLOR: black;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: #dddddd
}

SELECT {
    FONT-WEIGHT: bold;
    COLOR: black;
    FONT-STYLE: normal;
    BACKGROUND-COLOR: #dddddd
}

.Messages {
    BORDER-RIGHT: black 1px solid;
    PADDING-RIGHT: 0px;
    BORDER-TOP: black 1px solid;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    BORDER-LEFT: black 1px solid;
    PADDING-TOP: 0px;
    BORDER-BOTTOM: black 1px solid
}

    .Messages .TH {
        BORDER-RIGHT: black 1px;
        PADDING-RIGHT: 0px;
        BORDER-TOP: black 1px;
        PADDING-LEFT: 0px;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px;
        BORDER-LEFT: black 1px;
        PADDING-TOP: 0px;
        BORDER-BOTTOM: black 1px solid;
        BACKGROUND-COLOR: silver
    }

    .Messages .TD {
        PADDING-RIGHT: 0px;
        PADDING-LEFT: 5px;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px 0px 0px 5px;
        PADDING-TOP: 0px
    }

    .Messages .Title {
        PADDING-RIGHT: 0px;
        PADDING-LEFT: 0px;
        FONT-WEIGHT: bolder;
        FONT-SIZE: 12px;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px;
        COLOR: white;
        PADDING-TOP: 0px;
        BORDER-BOTTOM: black 1px solid;
        BACKGROUND-COLOR: darkblue;
        TEXT-ALIGN: center;
        TEXT-DECORATION: none
    }

    .Messages .Text {
        BORDER-RIGHT: black 1px solid;
        PADDING-RIGHT: 3px;
        BORDER-TOP: black 1px solid;
        PADDING-LEFT: 3px;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px;
        BORDER-LEFT: black 1px solid;
        PADDING-TOP: 0px;
        BORDER-BOTTOM: black 1px solid
    }

.copyright A:visited {
    FONT-WEIGHT: normal;
    FONT-SIZE: 7pt;
    COLOR: #666666;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.copyright A:link {
    FONT-WEIGHT: normal;
    FONT-SIZE: 7pt;
    COLOR: #666666;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.copyright A:active {
    FONT-WEIGHT: normal;
    FONT-SIZE: 7pt;
    COLOR: #666666;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.copyright A {
    FONT-WEIGHT: normal;
    FONT-SIZE: 7pt;
    COLOR: #666666;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.menu-text-blue-bold {
    FONT-WEIGHT: bold;
    COLOR: navy;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.menu-text-red-bold {
    FONT-WEIGHT: bold;
    COLOR: red;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.menu-text-black {
    FONT-WEIGHT: normal;
    COLOR: black;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.menu-text-black-bold {
    FONT-WEIGHT: bold;
    COLOR: black;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial
}

.Footer-Color-Top {
    BACKGROUND-COLOR: red
}

.Footer-Color-Bottom {
    BACKGROUND-COLOR: black
}

.UPSSelect {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}

    .UPSSelect .B1 {
        BORDER-RIGHT: black 1px solid;
        PADDING-RIGHT: 0px;
        PADDING-LEFT: 5px;
        FONT-WEIGHT: normal;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px;
        BORDER-LEFT: black 1px solid;
        COLOR: black;
        PADDING-TOP: 0px;
        BORDER-BOTTOM: black 1px solid;
        FONT-STYLE: normal;
        FONT-FAMILY: Arial
    }

    .UPSSelect .B2 {
        BORDER-RIGHT: black 1px solid;
        PADDING-RIGHT: 0px;
        BORDER-TOP: black 1px solid;
        PADDING-LEFT: 5px;
        FONT-WEIGHT: normal;
        PADDING-BOTTOM: 0px;
        MARGIN: 0px;
        BORDER-LEFT: black 1px solid;
        COLOR: black;
        PADDING-TOP: 0px;
        BORDER-BOTTOM: black 1px solid;
        FONT-STYLE: normal;
        FONT-FAMILY: Arial
    }

    .UPSSelect .Opt {
        BORDER-RIGHT: black 1px;
        BORDER-TOP: black 1px solid;
        FONT-WEIGHT: normal;
        BORDER-LEFT: black 1px solid;
        COLOR: black;
        BORDER-BOTTOM: black 1px solid;
        FONT-STYLE: normal;
        FONT-FAMILY: Arial
    }

.OnSale {
    BORDER-RIGHT: black 1px solid;
    BORDER-LEFT: black 1px
}

    .OnSale .Item {
        BORDER-RIGHT: black 1px;
        PADDING-RIGHT: 5px;
        BORDER-TOP: black 1px;
        PADDING-LEFT: 5px;
        PADDING-BOTTOM: 5px;
        BORDER-LEFT: black 1px solid;
        PADDING-TOP: 5px;
        BORDER-BOTTOM: black 1px solid
    }

.MenuTitle {
    BORDER-RIGHT: 0px;
    BORDER-TOP: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    Z-INDEX: 10;
    LEFT: 10px;
    BORDER-LEFT: 0px;
    WIDTH: 100px;
    LINE-HEIGHT: 15px;
    BORDER-BOTTOM: 0px;
    FONT-FAMILY: verdana,helvetica,sans-serif;
    POSITION: absolute;
    HEIGHT: 20px
}

.MenuSubMenu {
    FONT-SIZE: 10px;
    LEFT: 10px;
    VISIBILITY: hidden;
    WIDTH: 120px;
    LINE-HEIGHT: 15px;
    FONT-FAMILY: verdana,helvetica,sans-serif;
    POSITION: absolute
}

.OnSale .OnSaleTitle {
    BORDER-RIGHT: black 1px;
    BORDER-TOP: black 1px solid;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    BORDER-LEFT: black 1px solid;
    COLOR: red;
    BORDER-BOTTOM: black 1px solid;
    FONT-STYLE: normal;
    TEXT-DECORATION: none
}

.menu-sub-items-text-small {
    DISPLAY: none;
    FONT-WEIGHT: normal;
    COLOR: black;
    FONT-STYLE: normal;
    FONT-FAMILY: Verdana, helvetica, sans-serif;
    TEXT-DECORATION: none
}

    .menu-sub-items-text-small A:link {
        FONT-WEIGHT: normal;
        COLOR: maroon;
        FONT-STYLE: normal;
        FONT-FAMILY: verdana,helvetica,sans-serif;
        TEXT-DECORATION: none
    }

    .menu-sub-items-text-small A:visited {
        FONT-WEIGHT: normal;
        COLOR: maroon;
        FONT-STYLE: normal;
        FONT-FAMILY: verdana,helvetica,sans-serif;
        TEXT-DECORATION: none
    }

    .menu-sub-items-text-small A:hover {
        FONT-WEIGHT: normal;
        COLOR: gray;
        FONT-STYLE: normal;
        FONT-FAMILY: verdana,helvetica,sans-serif;
        TEXT-DECORATION: none
    }

/* ===========================
   Modern Search UI (Store-wide)
   CSS-only; no Classic ASP logic change
   Targets the existing Search include controls by name
   =========================== */

input[name="txtSearchPhrase"] {
    height: 30px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid #cfd6e0;
    background: #fff;
    font-weight: 600;
    font-size: 11pt;
    outline: none;
    box-sizing: border-box;
}

    input[name="txtSearchPhrase"]:focus {
        border-color: #bcd2ff;
        box-shadow: 0 0 0 3px rgba(188,210,255,0.55);
    }

select[name="txtSearchRowToReturn"] {
    height: 30px;
    border-radius: 12px;
    border: 1px solid #cfd6e0;
    background: #fff;
    font-weight: 600;
    font-size: 10.5pt;
    padding: 0 8px;
}

/* Style the existing "Go" image link like a modern button */
a[onclick*="Search.asp"] img,
a[onclick*="search.asp"] img {
    border-radius: 12px;
    padding: 4px;
    background: #e8eef9;
    border: 1px solid #c7d6f6;
}

a[onclick*="Search.asp"]:hover img,
a[onclick*="search.asp"]:hover img {
    background: #dfeaff;
    border-color: #bcd2ff;
}

/* ===== Modern Login CTA (left column) ===== */
.loginBoxCell {
    padding-right: 10px;
}

.loginBoxInner {
    padding: 10px 8px 12px 8px;
}

a.btnLogin, a.btnLogin:link, a.btnLogin:visited {
    display: block;
    text-align: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #cfcfcf;
    color: #111;
    font-size: 11pt;
    font-weight: 700;
    text-decoration: none;
}

    a.btnLogin:hover {
        background: #f2f2f2;
        text-decoration: none;
    }

.loginHint {
    margin-top: 6px;
    text-align: center;
    font-size: 9pt;
    color: #333;
}
/* ===== Store Left Column Width (Catalog + Search + Login) ===== */
td[width="150"] {
    width: 220px !important;
}

table[width="150"] {
    width: 220px !important;
}

td[width="136"] {
    width: 206px !important;
}
/* inner cell */

/* ===== Catalog Tree Modern Skin ===== */

/* The catalog panel area */
td.menu-text {
    font-size: 11pt; /* readable */
    line-height: 1.25;
}

    /* Make catalog links feel like a nav list */
    td.menu-text a,
    td.menu-text a:link,
    td.menu-text a:visited {
        display: block;
        padding: 6px 10px;
        margin: 2px 6px;
        border-radius: 10px;
        color: #1f2a37;
        text-decoration: none;
        font-weight: 600;
    }

        /* Hover */
        td.menu-text a:hover {
            background: #eef2ff;
            text-decoration: none;
        }

    /* Indentation for nested items still works, but feels cleaner */
    td.menu-text table {
        width: 100%;
    }

    td.menu-text td {
        vertical-align: middle;
    }
/* ============================
   Store Sidebar: Cleaner Look
   ============================ */

/* widen sidebar but keep it proportional */
td[width="150"], table[width="150"] {
    width: 210px !important;
}

td[width="136"] {
    width: 196px !important;
}

/* keep sidebar background consistent */
td.menu-text {
    font-size: 10.5pt;
    line-height: 1.2;
    color: #111;
}

    /* --- Catalogs: TREE STYLE (not pill buttons) --- */
    /* This targets the catalog block only by its header image nearby.
   We can't select by header in old CSS, so we style links conservatively. */
    td.menu-text a,
    td.menu-text a:link,
    td.menu-text a:visited {
        display: inline; /* undo "block button" look */
        padding: 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
        border: 0;
        color: maroon; /* preserve brand feel */
        font-weight: 700;
        font-size: 10pt;
        text-decoration: none;
    }

        /* hover = subtle underline only */
        td.menu-text a:hover {
            background: transparent;
            text-decoration: underline;
            color: #333;
        }

    /* tighten the nested tables inside catalogs */
    td.menu-text table {
        width: 100%;
        border-collapse: collapse;
    }

    td.menu-text td {
        padding: 2px 0;
    }

        /* make the little indent spacer less wasteful */
        td.menu-text td[width="5"] {
            width: 10px !important;
        }

    /* keep +/- icons aligned and not huge gaps */
    td.menu-text img {
        vertical-align: middle;
    }
/* Stretch ONLY the left-panel header GIFs */
img[src$="/images/login.gif"],
img[src$="/images/search.gif"],
img[src$="/images/catalogs.gif"],
img[src$="images/login.gif"],
img[src$="images/search.gif"],
img[src$="images/catalogs.gif"] {
    width: 100% !important;
    height: auto !important;
    display: block;
}
/* Tighten vertical spacing inside the left sidebar stack */
table[width="150"] {
    margin-bottom: 6px;
}

/* Catalog list starts too low: remove extra top padding/margins inside menu cell */
td.menu-text {
    padding-top: 0 !important;
}

    /* Kill extra spacing from nested tables that Catalogs.asp uses */
    td.menu-text table {
        margin: 0 !important;
    }

    td.menu-text td {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* If there's a <br> before the first catalog item, neutralize it */
    td.menu-text br {
        line-height: 0;
    }

    /* ===============================
   Catalog tree readability polish
   (safe: does not touch menu2.js)
   =============================== */

/* Make the catalog list area readable */
td.menu-text {
    font-size: 10.5pt;
    line-height: 1.25;
}

/* Prevent global A{} rules from shrinking/warping catalog links */
td.menu-text a,
td.menu-text a:link,
td.menu-text a:visited {
    font-size: inherit;
    font-weight: 700;
    color: maroon;
    text-decoration: none;
}
td.menu-text a:hover {
    color: #333;
    text-decoration: underline;
}

/* Tighten spacing created by nested tables in Catalogs.asp */
td.menu-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
td.menu-text td {
    padding: 2px 0;
    vertical-align: middle;
}
td.menu-text td[width="5"] { width: 10px !important; }

/* Keep the +/- icons small and aligned */
/* ONLY the catalog +/- icons (menu2.js), not product images */
td.menu-text img[id^="pic"][src*="closed"],
td.menu-text img[id^="pic"][src*="spacer"] {
    width: 12px !important;
    height: 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Subcatalog indentation */
td.menu-sub-items-text-small {
    font-size: 10pt;
    line-height: 1.2;
}
/* ============================
   Product Detail Main Image
   ============================ */
#picture1 {
    width: 320px;
    height: auto;
    max-width: 100%;
    display: block;
}

/* ============================
   Modern Login UI Overrides
   ============================ */

.loginCard {
    font-size: 16px; /* base readable size */
    line-height: 1.4;
}

.loginTitle {
    font-size: 20px;
    font-weight: 700;
}

.loginLabel {
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.loginInput {
    font-size: 16px;
    padding: 10px 12px;
}

.loginActions button,
.loginActions input,
.loginActions a {
    font-size: 14px;
}

/* ============================
   Modern Login: override legacy ID sizing
   ============================ */

.loginCard #TxtUser,
.loginCard #TxtPass {
    font-size: 16px;
    line-height: 1.4;
}