body {
    background-image:url(background-whitewall_3.png);
	background-repeat:repeat;
	background-position:top center;
	background-attachment:fixed;
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
    margin: 0px;
    padding: 0px;
    }

form {
    padding: 0px;
    margin: 0px;
    }

a:link {
    color: #006699;
    text-decoration: none;
    }

a:visited {
    color: #006699;
    text-decoration: none;
    }

a:hover {
    color: #024060;
    text-decoration: none;
    }

a:active {
    color: #006699;
    text-decoration: none;
    }

h1 {
    font-size: 14pt;
    font-weight: bold;
    }

h4 {
    font-size: 12pt;
    font-weight: bold;
    margin: 0px;
    }
.siteheader {
    background-color: #FFFFFF;
    text-decoration: none;
    }


.headercheckout {width:180px; background-color:#FFFFFF;}
.headercheckout div{width:180px; background-color:#FFFFFF; margin-right:5px;}
.topbar {
    background-color: #024062;
    text-decoration: none;
    line-height: 16px;
    padding: 0px;
    margin: 0px;
    }

.maintable {
    padding: 3px;
    margin: 0px;
    }
	
.leftside {
   
    }

.rightside {
   
    }

.content {
    
    margin: 10px;
    }

.contenttable {
    width: 95%;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin-top: 10px;
    }

.contenttable td {
    text-align: left;
    }

.content-title {
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    }

.searchbox {
    width: 200px;
    }
.searchbox td{
    width: 200px;
	background-color:#FFFFFF;
	text-align:center;
	border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    }
	
.smlogin-form {
    padding: 0px 5px 0px 10px;
    font-size: 10pt;
    }

.clear {
    clear: both;
    color: #ffffff;
    }

.viewcart {
    margin-top: 18px;
    text-align: center;
    }
	
.cartitems{
	font-size: 9pt;
	}

.logged-in-message {
    color: red;
    font-weight: bold;
    }

.feat-table {
    margin: 0px;
    padding: 0px;
    width: 100%;
    }

.feat-head {
    color: #FFFFFF;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    font-size: 10pt;
    background-image: url(topprodhead.jpg);
    margin: 0px;
    padding: 0px 0px 0px 15px;
    background-repeat: no-repeat;
    border-bottom: 2px solid #eceff3;
    }

.feat-cell {
    text-align: center;
    vertical-align: top;
    padding: 10px;
    }

.feat-cell div {
    text-align: center;
    }
	
.tinytxt {
    font-size: 7pt;
    line-height: 10px;
    margin: 0px;
    padding: 0px;
    }

.tinytxt input {
    font-size: 7pt;
    line-height: 10px;
    margin: 0px;
    padding: 0px;
    }

.tinytxt a:link {
    margin: 0px;
    padding: 0px;
    }

.tinytxt a:visited {
    margin: 0px;
    padding: 0px;
    }

.tinytxt a:hover {
    margin: 0px;
    padding: 0px;
    }
.footer {
    font-size: 10px;
    font-weight: bold;
    margin-top: 20px;
    }

.footer a:link {}

.footer a:hover {}

.footer a:visited {}	

.input-err { background-color: #ffff00; }


/* ══════════════════════════════════════════════════════════
   UNIFIED HEADER + HAMBURGER SIDEBAR REDESIGN
   ══════════════════════════════════════════════════════════ */

/* ── Hamburger button — visible on ALL screen sizes ── */
.hd-hamburger {
    display: flex;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10100;
    background: #024060;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    }

.hd-hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    }

/* ── Sidebar overlay ── */
.hd-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
    }

.hd-overlay.open { display: block; }

/* ── Mobile / tablet sidebar ── */
.hd-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100%;
    background: #024060;
    z-index: 10050;
    overflow-y: auto;
    transition: left 0.3s ease;
    }

.hd-sidebar.open { left: 0; }

.hd-sidebar-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    }

.hd-sidebar-brand {
    padding: 50px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    }

.hd-sidebar-search {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    }

.hd-sidebar-search .searchbox,
.hd-sidebar-search .searchbox td {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 4px;
    }

.hd-sidebar-search input[type="text"] {
    background: transparent;
    color: #fff;
    border: none;
    padding: 4px 6px;
    width: 75%;
    }

.hd-sidebar-search input[type="submit"] {
    background: #FFCC00;
    color: #024060;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 3px;
    }

.hd-sidebar-section {
    color: #FFCC00;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 16px 4px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 4px;
    }

/* Override nav.css styles inside sidebar */
.hd-sidebar .leftnav        { width: 100%; margin: 0; padding: 0; }
.hd-sidebar .rightnav       { width: 100%; }

.hd-sidebar .bothnavhead {
    width: 100%;
    background-image: none;
    background-color: rgba(255,255,255,0.08);
    color: #FFCC00;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 8px 16px;
    }

.hd-sidebar .subnavbox {
    width: 100%;
    border: none;
    background: transparent;
    }

.hd-sidebar .vert-level-0 a,
.hd-sidebar .vert-level-0-on a,
.hd-sidebar .vert-level-1 a,
.hd-sidebar .vert-level-1-on a,
.hd-sidebar .vert-level-2 a,
.hd-sidebar .vert-level-2-on a,
.hd-sidebar .specialnav a,
.hd-sidebar .specialnav-on a,
.hd-sidebar .content-link a,
.hd-sidebar .content-link-on {
    width: 100% !important;
    color: #ddd !important;
    background-image: none !important;
    }

.hd-sidebar .vert-level-0 a:hover,
.hd-sidebar .vert-level-1 a:hover,
.hd-sidebar .vert-level-2 a:hover,
.hd-sidebar .specialnav a:hover,
.hd-sidebar .content-link a:hover {
    color: #FFCC00 !important;
    background-image: none !important;
    background-color: rgba(255,255,255,0.08);
    }

.hd-sidebar .cartlinks { margin-left: 0; padding: 4px 16px; }
.hd-sidebar .cartlinks a:link,
.hd-sidebar .cartlinks a:visited { color: #ddd; }
.hd-sidebar .cartlinks a:hover   { color: #FFCC00; }

.hd-sidebar-contact {
    padding: 14px 16px;
    border-top: 2px solid rgba(255,255,255,0.15);
    margin-top: 6px;
    }

.hd-sidebar-contact a {
    display: block;
    color: #bbb;
    text-decoration: none;
    font-size: 13px;
    padding: 5px 0;
    }

.hd-sidebar-contact a:hover { color: #fff; }

.hd-sidebar-social {
    padding: 12px 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    }

.hd-sidebar-social a {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    margin-right: 8px;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    }

.hd-sidebar-social a:hover { background: #FFCC00; color: #024060; }

/* ── Unified main header shell ── */
.hd-main { background: #024060; }

/* Row 1: logo + social + cart — always visible */
.hd-row1 {
    display: flex;
    align-items: center;
    padding: 6px 16px 6px 58px;   /* always leave room for fixed hamburger */
    min-height: 56px;
    }

.hd-logo {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    }

.hd-logo img { max-height: 50px; }

.hd-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    }

.hd-social-img { display: inline-block; vertical-align: middle; }
.hd-social-img img { max-height: 22px; vertical-align: middle; }

.hd-cart-area {
    display: flex;
    align-items: center;
    gap: 6px;
    }

.hd-cart-area .viewcart  { margin-top: 0; }
.hd-cart-area .cartitems { color: #FFCC00; font-weight: bold; }

/* Row 2: nav links + cart links — desktop only */
.hd-row2 {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 0 16px;
    min-height: 34px;
    background: #013048;
    }

.hd-topnav        { flex: 1 1 auto; }
.hd-cartlinks-area { flex: 0 0 auto; }

/* Override horiz-top nav colours for dark header */
.hd-main .horiz-top                      { background-color: transparent; }
.hd-main .horiz-top a:link,
.hd-main .horiz-top a:visited            { color: #fff; border-color: transparent; }
.hd-main .horiz-top a:hover              { color: #FFCC00; border-color: transparent; }
.hd-main .horiz-top-on                   { background-color: #FFCC00; color: #024060; }
.hd-main .horiz-top-on a:link,
.hd-main .horiz-top-on a:visited,
.hd-main .horiz-top-on a:hover           { color: #024060; }
.hd-main .horiz-child-bar                { background-color: rgba(255,255,255,0.07); }
.hd-main .horiz-child a:link,
.hd-main .horiz-child a:visited          { color: #ccc; }
.hd-main .horiz-child a:hover            { color: #FFCC00; }
.hd-main .horiz-child-on a:link,
.hd-main .horiz-child-on a:visited       { color: #FFCC00; }

/* Cart links in header row 2 */
.hd-row2 .cartlinks                      { margin-left: 0; font-size: 8pt; }
.hd-row2 .cartlinks a:link,
.hd-row2 .cartlinks a:visited            { color: #bbb; }
.hd-row2 .cartlinks a:hover              { color: #FFCC00; }

/* ── Full-width content area (no left column) ── */
.hd-content {
    max-width: 1200px;
    width: 100%;
    margin: 12px auto;
    padding: 0 14px;
    box-sizing: border-box;
    }

.hd-content .contenttable { width: 100%; }

/* ── Responsive breakpoints ── */
@media (max-width: 992px) {
    /* hamburger is always visible — just hide desktop-only header elements */
    .hd-row2      { display: none; }
    .hd-social-img { display: none; }
    }

@media (max-width: 600px) {
    .hd-row1 { min-height: 50px; padding-right: 8px; }
    }