:root{
  /* palette */
  --vs-card:#fff;               --vs-body:#000; 
  --vs-accent:#900;           --vs-gray:#999;
  --vs-bg-soft:#eee;            --vs-nav-text:#444;
  --vs-hover-text:#ff0;         --vs-shadow:#aaa;         
  --vs-brand:#A30101;         --vs-brand2:#c0cfc0;
  --vs-blue-soft:#f0f7ff;         --vs-blue:#009;     
  --vs-muted:#fefefe;            --vs-link:#0040ff;
  --vs-nav-border:#d0d7de;      --vs-link-hover:#bc7800;  
 --vs-cream:#eee5cc;           --vs-bg:#f6f8fb;       
  --vs-mute:#5e5e5e;            --vs-bga:#dfdada;  
    
/* typography */
  --vs-font-sans: system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  --vs-font-ui: Tahoma,Arial,Verdana,sans-serif;
  --vs-fs-8: .5rem;      --vs-fs-9: .563rem;
  --vs-fs-10: .625rem; /* 10px  */
  --vs-fs-11: .6875rem;       --vs-fs-12: .75rem;  
  --vs-fs-13: .8125rem;    --vs-fs-14: .875rem;
  --vs-fs-15: .9375rem;     --vs-fs-16: 1rem;  
  --vs-fs-18: 1.125rem;       --vs-fs-20: 1.25rem;
  --vs-fs-22: 1.375rem;        --vs-fs-25: 1.5625rem;  
  --vs-fw-bold: 700;          --vs-fw-regular: 400;
  
  /* --- Font Modifiers --- */
.text-xxs{font-size: var(--vs-fs-8);}     .text-xs{font-size: var(--vs-fs-9);}
.text-xs1{font-size: var(--vs-fs-10);}   .text-xs2 {font-size: var(--vs-fs-11);} 
.text-xs3 {font-size: var(--vs-fs-12);}  .text-xs4 {font-size: var(--vs-fs-13);}
.text-sm {font-size: var(--vs-fs-14);}   .text-md {font-size: var(--vs-fs-15);}
.text-base {font-size: var(--vs-fs-16);}   .text-lg {font-size: var(--vs-fs-18);}
.text-xl {font-size: var(--vs-fs-20);}      .text-2xl {font-size: var(--vs-fs-22);}
.text-3xl {font-size: var(--vs-fs-25);}

/* spacing / radius / shadow */
  --vs-gap-0: .125rem; /*2px*/       --vs-gap-1: .25rem;  /*4 px*/
  --vs-gap-2: .375rem; /*6 px*/      --vs-gap-3: .5rem;  /*8 px*/
  --vs-gap-4: .625rem;  /*10 px*/      --vs-gap-5: .75rem;   /*12 px*/
  --vs-gap-6: 1rem; /*16px*/              --vs-gap-7: 1.25rem;  /*20px*/
  --vs-gap-8: 1.5rem;  /*24px*/         --vs-nav: .938rem;  /*15px*/
  --vs-rounded: 1.563rem; /*25px*/    --vs-large: 1.875rem;  /*30px*/

  /* --- Color Modifiers --- */
.color-red {color: var(--vs-accent); background:inherit;}  
.color-white {color: var(--vs-card); background:inherit;}
.color-blue{ color: var(--vs-blue); background:inherit;}
.color-black{ color: var(--vs-body); background:inherit;}

& li{padding-bottom:.188rem;}
& img{border: 0; display:block; margin:auto;}
& div {margin:auto;}
& hr { width: 100%;}
& tr{vertical-align:top;}
}  

/* --- Global & Utility Styles --- */
*,
*::before,
*::after {box-sizing: border-box;}

mark{text-decoration:underline; font-style: italic; background: yellow;  color: var(--vs-accent);}
a {color: var(--vs-link); font-weight: var(--vs-fw-regular); text-decoration: none; background:inherit;}
a:hover { color: var(--vs-link-hover);  text-decoration: underline; }

.ad{display:block; margin:0 auto;}
 .b, .bold {  font-weight: var(--vs-fw-bold);}
.i {font-style: italic;}
.u {text-decoration: underline;}   
.center, .C {display: block;  text-align: center; margin: auto;}
.left, .L {text-align: left;}
.right, .R {text-align: right;}
.xs{font-size: var(--vs-fs-12);}

h1, .h{font-family: Arial, sans-serif;  font-size: var(--vs-fs-22);  color: var(--vs-blue); background:inherit; text-align: center;  margin-bottom: 1.25rem;} 

h3 {display: block;  font-size: 1.17rem; margin-top: 1rem; margin-bottom: .25rem;    margin-left: 0; margin-right: 0;  font-weight: bold; color:var(--vs-accent); background:inherit; text-decoration:underline;}

body {
  margin: .625rem auto 0;  padding: 0;
  background: var(--vs-card);  color: var(--vs-body);
  font-family: var(--vs-font-sans);  font-size: var(--vs-fs-14);
  line-height: 1.35;
}

/* ---------- Tables (responsive & consistent) ---------- */
.table{width:100%; border-collapse: collapse; background:var(--vs-card); font-size: var(--vs-fs-13);}

/* Mobile scroll wrapper for wide tables */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; }
td.titletext{font-size:var(--vs-fs-12);}
.title-txt{
  text-align: center;  margin:0 auto; background:var(--vs-card);  padding: 1.875rem;  font-size: var(--vs-fs-25);  border-radius:var(--vs-rounded);
}

/*BEGIN STYLE FOR MAIN TABLE*/
/* --- General Layout and Siding --- */
.main, .leftside, .rightside {background: var(--vs-blue-soft); vertical-align:top;}
.leftside, .rightside {  font-size: var(--vs-fs-15);  text-align: center;  margin-inline: auto;  width: min(180px, 40vw);}

.leftside p, .rightside p {padding-top: .625rem; text-align: center; margin: 0 auto;}

/* --- Content and Table Styles --- */
.middle, .middleA {
  background: var(--vs-card);
  border: 1px solid var(--vs-body);
  padding-top:.063rem; padding-left:.625rem;
  text-align: center;
}
.middleB{text-align:center;   padding-top:.063rem; padding-left: .625rem;}
.middleB td{border:0;}
.middle tr, .middleA tr { vertical-align: top;}
.adbox {font-size: var(--vs-fs-13); background: var(--vs-muted);}

/*END STYLE FOR MAIN TABLE*/

/* ---------- Top bars ---------- */
.top-table{width:100%; text-align:center; margin:0 auto; border:.0rem; background:var(--vs-card);}
.top-468, .top-125{width:100%; text-align:center; margin:0 auto; border:.0rem; background:var(--vs-card);}
.top-468{width:29.25rem; padding:.313rem 1.313rem; display:block; text-align:center;}
.top-125{width:7.813rem; padding:.313rem 2.313rem;}
.logo, .logo-202{background:var(--vs-card); width:12.625rem; border:0; }

/* ---------- Small Top Bar ---------- */
.th1, .topbar, .topbar a{font-family:var(--vs-font-ui); font-weight:var(--vs-fw-bold); background:var(--vs-brand2);  font-size:var(--vs-fs-12); color:var(--vs-link);  text-align:center; width:100%; padding:.25rem 0rem; border:0;}
.topbar a:hover{ color:var(--vs-card); text-decoration:underline; background:inherit;}
.th1{ background:var(--vs-bga);}
.th, td {border: 1px solid var(--vs-body);  text-align: left;}

/* ---------- Shadow box ---------- */
.box-m{ width:99%; font-size:var(--vs-fs-16); font-weight:var(--vs-fw-bold); padding: .063rem; }
.mybox{ width:98%; }
.boxshadow{
  border-radius:var(--vs-rounded);  background:#f2f2f2;  margin:0 auto;  box-shadow:var(--vs-shadow-color);
}
.boxcontent{
  border-radius:var(--vs-rounded);  background:var(--vs-card);  position:relative;  border:1px solid var(--vs-body);  transform: translate(-5px,-10px);
}
/*end SHADOW BOX*/

.rdg, li {font-size: var(--vs-fs-15);  text-align: left;  padding-bottom: .938rem;}
.border { border: 1px solid var(--vs-body);}
.border0 { border: 0px solid var(--vs-body);}

/* --- Container & Layout Styles --- */
.div-main {
  border: 1px solid var(--vs-body); border-radius: var(--vs-rounded);
  background: var(--vs-card);
  font-size: var(--vs-fs-14); text-align: center;
  margin: auto; padding: 1.25rem;
  width: 56.25rem;  
}

.sh {font-size: var(--vs-fs-14); color: var(--vs-body); text-align: left;  padding: .625rem 0 .625rem .625rem; background:inherit;}
.sh a:any-link{color: var(--vs-link); font-weight:bold; background:inherit;}
.sh a:hover {text-decoration: underline; color: var(--vs-link-hover); font-weight:bold;background:inherit;}


.pal, .palB, .palA, .palbox{border:0; border-spacing:0; border-collapse:collapse;}
.palbox{ background:var(--vs-card);  padding:10px 1px; width:100%; text-align:center; }
.pal { background: var(--vs-card); font-size: var(--vs-fs-13); text-align:center; padding:.313rem;}
.palB{width:98%; border-radius:var(--vs-rounded); background: var(--vs-card); font-size: var(--vs-fs-15);}
.palA{background: var(--vs-card);  font-size: var(--vs-fs-13);  text-align: center;  margin: auto;}
.palheader{ background: var(--vs-card);  font-size: var(--vs-fs-12);  font-weight: var(--vs-fw-bold); text-align:center;}

.pref-main,.public{width:min(975px, 95vw);  font-size:var(--vs-fs-14);  margin:0 auto; border:0;border-collapse: collapse; background:var(--vs-card);}
.pref-main{text-align:center;}
.public{ background:var(--vs-blue-soft); }
.pref-shot {float: left; margin-right: .938rem; margin-bottom: .313rem;}

/* ---------- Computer Picks ---------- */
.tableCP{border:0; border-collapse: collapse; width:98%;}
.cptable,.t-table{
  background:var(--vs-card);  text-align:center;  padding: .188rem;  font-size: .813rem;
}
.cptable{ width:100%; border-collapse: collapse; padding:0;}
.t-table{ width:80%; margin-inline:auto; border-collapse: collapse;}
.cptable a,.t-table a,.cptd a,.cptdp a{ color: var(--vs-blue); text-decoration:underline; background:inherit;}
.pref-cptitle{
  background:var(--vs-body); color:var(--vs-card);
  font-weight:var(--vs-fw-bold);  font-size:var(--vs-fs-16);  text-align:center;
  margin:auto;  padding:10px 0;
  border:1px solid var(--vs-body);
}
.cpth,.cptd,.cptdp{border:1px solid var(--vs-body); width:10%; text-align:center;}
.cpth{ color:var(--vs-accent); background:#e2e2e2; } /* slightly lighter than #ccc */
.cptdp{ font-weight:var(--vs-fw-bold); }

/*Computer Picks Legacy tab styles preserved */
.TP_1246236331_tabTD{text-align:center; width:33%; padding:0; border-top:1px solid var(--vs-body); cursor:pointer;}
.TP_1246236331_leftRule, .TP_1246236331_centerRule,.TP_1246236331_rightRule{ border-left:1px solid var(--vs-body);  border-right:1px solid var(--vs-body);}
.TP_1246236331_centerRule{ border-left-width:0; }
.TP_1246236331_tab, .TP_1246236331_tabhood, .TP_1246236331_tabbonnet{text-align:center; padding:0; width:9.375rem; cursor:pointer;}
.TP_1246236331_tabhood{background:var(--vs-accent); color:var(--vs-card); font-size:var(--vs-fs-14);}
.TP_1246236331_tabbonnet{background:var(--vs-card); color:var(--vs-body); font-size:var(--vs-fs-14);}
.TP_1246236331_tabcontent{text-align:left; width:100%; border:0px solid var(--vs-body);  margin:0; padding-top: .313rem;}
.TP_1246236331_tabdivcontent{ overflow:visible; margin:0; padding:0; }

.at1,.at2{
  background:var(--vs-body);  color:var(--vs-card);
  font-weight:var(--vs-fw-bold);  font-size:var(--vs-fs-13);  text-align:center;
  margin:auto;  padding:3px 0;
  border:1px solid var(--vs-body);
}
.at1{ width:65%; } 
.at2{ width:35%; }
.tt1,.tt2{ border:1px solid var(--vs-body); background:#fc9; }
.tt1{ width:65%; } .tt2{ width:35%; }
.tt-td1{ border:1px solid var(--vs-body); width:65%; text-align:left; padding-left: 1.25rem; }
.tt-td2{ border:1px solid var(--vs-body); width:35%; font-weight:var(--vs-fw-bold); }
/*end Computer Picks*/

/* ---------- Service / Alerts ---------- */
.renew-alert{
  padding:1.25rem 1.25rem 0 1.25rem;
  background:var(--vs-brand2); color:var(--vs-accent);
  width:95%;
  font-size:var(--vs-fs-14); text-align:center;
  margin:auto;  border:1px solid var(--vs-body); border-radius:var(--vs-rounded);
}

/* ---------- Content strip ---------- */
.content{ background:var(--vs-card); text-align:center; font-size:var(--vs-fs-14);}
.content div{color:var(--vs-link); padding:.313rem .313rem;  text-align:center; margin:auto; background:inherit;}
.content a{font-weight: var(--vs-fw-bold); color:var(--vs-link); text-decoration:underline; background:inherit;}
.content a:hover{ color:var(--vs-link-hover); background:inherit;}

/* ---------- Forms / Inputs ---------- */
input,textarea,select{
  background:var(--vs-card);
  font-family:var(--vs-font-ui);
  border:1px solid var(--vs-nav-border);  border-radius:1.5rem;
  padding:.4rem .6rem;
}
input{  color:var(--vs-body);  font-size:var(--vs-fs-11);  font-weight:var(--vs-fw-bold); background:inherit;}
textarea{ font-size:var(--vs-fs-12); min-height:6.875rem; resize:vertical; }
select{ font-size:var(--vs-fs-11); }

input:focus,textarea:focus,select:focus{
  outline: .125rem solid var(--vs-link);  outline-offset:.125rem;
}

.bookview { padding: 1.25rem .625rem; width: 100%; text-align: left;}
.toutA {width: 85%; border-collapse:collapse; background: var(--vs-card);  font-size:var(--vs-fs-12); padding:1.25rem; margin:0 auto;}

/* ---------- Free/GUEST CAPPER MENU ---------- */
.free-main{
  width:98%;
  background:var(--vs-card); color:var(--vs-card);
  font-size:var(--vs-fs-14); text-align:center;
  border:0; margin:auto; padding:0;
}
.free-header, .free-m td.free-h {
  background: var(--vs-nav-text); color: var(--vs-card);
  font-weight: var(--vs-fw-bold); text-align: center;
  padding: .313rem 0;
}
.free-header{  border-radius: .938rem;}
.free-header a {color: var(--vs-card); display:block; background:inherit;}
.free-header a:hover {color: var(--vs-link-hover); background:inherit;}
.free-m, .freenews{
  background:var(--vs-card);  color:var(--vs-body);  text-align:center;  width:100%;  border:0;
}
.free-m td{
  font-weight:var(--vs-fw-bold); font-size:var(--vs-fs-12); text-align:center;
  color:var(--vs-card); background:var(--vs-bga);
  border:1px solid var(--vs-card);
  width:25%;
  vertical-align:middle;
}
.free-m a{ display: block; font-size:var(--vs-fs-13); color:var(--vs-body); background:inherit;}
.free-m a:hover{ color:var(--vs-brand); font-weight:var(--vs-fw-bold); text-decoration:underline; background:var(--vs-card); }
/*END GUEST CAPPER MENU*/

.submit{
  font-family:var(--vs-font-ui);  font-size:var(--vs-fs-15); font-weight:var(--vs-fw-bold);
  border-radius:1.063rem;  padding:.35rem .9rem;
  cursor:pointer;
}
.submit:hover{ filter:brightness(.68); }

.submitB {
  font-family: Tahoma, sans-serif; font-size: var(--vs-fs-14);  font-weight: 100;
  background: var(--vs-nav-text);  color: var(--vs-card);
  padding: .9375rem;  border-radius: 1.563rem;
}

.submitB:hover {background: var(--vs-brand2); color: var(--vs-body);}
.a:any-link {font-size:var(--vs-fs-12); text-decoration: none;}

/* ---------- Help / Articles / Links ---------- */
.help{ color:var(--vs-link); background:inherit;text-decoration:underline; 
 font-size:var(--vs-fs-12); }
.help:hover{ color:var(--vs-accent); background:inherit;}

.article:hover{ text-decoration:underline; font-size:var(--vs-fs-12); }
.articleA{ font-size:var(--vs-fs-25);  font-weight:var(--vs-fw-regular);  text-align:left;}
.articleA a{ color: var(--vs-blue); background:inherit;}
.articleA a:hover{ color:#990060; text-decoration:underline; font-weight:bold; background:inherit;}

/* Global link variants (kept for compatibility, simplified) */
.gLo2, .gLo3{ text-decoration:none; }
.gLo2{ font-size:var(--vs-fs-14); }
.gLo3{ font-size:var(--vs-fs-16); font-weight:var(--vs-fw-bold); }
.gLo2:hover, .gLo3:hover{ text-decoration:underline; background:transparent; }

/* ---------- Side Menus ---------- */
.menuBarS{
  background:var(--vs-card); color:var(--vs-nav-text);
  border:1px solid var(--vs-nav-border);  border-radius:var(--vs-nav);
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 8px 30px rgba(0,0,0,.05);
  padding: .25rem;
  width:100%;  max-width:13.75rem;
  font-family:Verdana, Arial, sans-serif;  font-size:var(--vs-fs-13);
  text-align:left;
}
.menuButtonSH, .menuButtonSH a{
  display:block;
  font-size:var(--vs-fs-11); font-weight:var(--vs-fw-bold);
  margin-top: .125rem;   padding:2px 0;
  border-radius:.625rem;
  background:var(--vs-nav-text);  color:var(--vs-card);
  text-align:center;
}
.menuButtonSH a:hover{ text-decoration:none; filter:brightness(1.05); }
.BarS{padding: .125rem 0.125rem .125rem; background:transparent; border-bottom:1px solid var(--vs-nav-border);}
.BarS:last-child {  border-bottom: 0;}
.BarS a{
  display: block; /* Ensures the whole link area is clickable */
  font-size:var(--vs-fs-11);   font-weight: var(--vs-fw-regular);
  background: var(--vs-card);  color: var(--nav-text);
  text-decoration: none;
  border-radius: .5rem;
}
.BarS a:hover{ padding-left:.313rem; background:var(--vs-brand); color:var(--vs-card);}
.menuActive{ background:var(--vs-bga); font-size:var(--vs-fs-11); font-weight:var(--vs-fw-bold); color:var(--vs-link-hover);}
.menuActive a{ color:var(--vs-brand);   font-size:var(--vs-fs-11); background:inherit;}
/* ---------- END Side Menus ---------- */

.menuBarCPW {
  font-family: var(--vs-font-ui);  font-size:var(--vs-fs-14); font-weight: var(--vs-fw-bold);
  width: 23.125rem;  height: 1.125rem;
  text-align: center;  margin: 0 auto;
  color: var(--vs-card);  background: var(--vs-brand);
}

.titlelinkCP{
  font-family: var(--vs-font-ui);  font-size:var(--vs-fs-14);  font-weight: var(--vs-fw-bold);
  background: var(--vs-brand);
  width: 30rem;
  text-align: center;  margin: 0 auto; padding: .25rem;
  border-radius: 1.25rem;
}

.titlelinkCP a{ text-decoration: underline; color: var(--vs-card); background:inherit;}
.titlelinkCP a:hover{color: aqua; background:inherit;}

 .bookbottom, .legal {
  font-family: var(--vs-font-ui);  font-size: var(--fs-12);
  text-align: center;
  color: var(--vs-body);  background: var(--vs-card);
  padding: .313rem .313rem;   margin:0 auto;
}

.adboxBarB, .adboxBarB a{
display:block; text-decoration: none;   
color: var(--vs-body); background: var(--vs-blue-soft); 
text-align: center;  padding: .25rem;   
font-weight: var(--vs-fw-bold); 
 font-size: .75rem; /*do not change*/
 }
.adboxBarB a:hover{ color:var(--vs-link-hover); background: var(--vs-bg);}

/* --- Background & Color Utilities --- */
.ff50, .ff100{ background:var(--vs-card); text-align: center; font-weight: var(--vs-fw-bold); color: var(--vs-body); }
.ff100 { width: 100%;}
.ff50 { width: 50%;}