body {
  background: #ffffff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

/* ── Centering ── */
center {
  display: block;
  text-align: center;
}


table.navy,
TABLE.navy {
  border-collapse: collapse;
  border: 1px solid #333366;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000033;
  background: #ffffff;
}

table.navy td,
table.navy th,
TABLE.navy TD,
TABLE.navy TH {
  border: 1px solid #333366;
  padding: 1px 2px;
  vertical-align: top;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* Inline anchor style used inside navy tables */
a.navy,
table.navy a {
  color: #000066;
  text-decoration: none;
  font-size: 10px;
}
a.navy:hover,
table.navy a:hover {
  color: #0033cc;
  text-decoration: underline;
}

.navysmall,
td.navysmall {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #000033;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0 2  px;
  
}

/* ============================================================
   MONTH TITLE HEADER
   ============================================================ */

/* Wrapper table that holds just the big month name image */
table.navy:not([width="985"]):not([width="150"]) {
  display: table;
  margin: 0 auto 0;

}
table.navy:not([width="985"]):not([width="150"]) td[bgcolor="#000066"] {
  background-color: #000066 !important;
  text-align: center;
  display:flex;
  padding: 6px 81px;
;
}

table.navy:not([width="985"]):not([width="150"]) td[bgcolor="#000066"] img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-height: 60px;
}

/* ============================================================
   MONTH TAB NAVIGATION  (MAY | JUNE | JULY | AUGUST strip)
   ============================================================ */

table.navy td[bgcolor="#c0c0c0"],
table.navy td[bgcolor="#C0C0C0"] {
  background-color: #c0c0c0 !important;
  padding: 0;
  text-align: center;
}

table.navy td[bgcolor="#c0c0c0"] a,
table.navy td[bgcolor="#C0C0C0"] a {
  display: inline-block;
  border-right: 1px solid #999999;
  opacity: 0.8;
  transition: opacity 0.15s ease;
  vertical-align: top;
}

table.navy td[bgcolor="#c0c0c0"] a:last-child,
table.navy td[bgcolor="#C0C0C0"] a:last-child {
  border-right: none;
}

table.navy td[bgcolor="#c0c0c0"] a:hover,
table.navy td[bgcolor="#C0C0C0"] a:hover {
  opacity: 1;
}

table.navy td[bgcolor="#c0c0c0"] a img,
table.navy td[bgcolor="#C0C0C0"] a img {
  display: block;
  width: 100px;
  height: auto;
}

/* ============================================================
   MAIN CALENDAR GRID  (7-column weekly grid, width=985)
   ============================================================ */

/* Full calendar wrapper — full-width up to 985px */
table.navy[width="985"] {
  width: 100% !important;
  max-width: 985px;
  margin: 0 auto;
  border: 2px solid #333366;
  border-collapse: collapse;
  table-layout: fixed;
  background: #ffffff;
}

/* Each calendar cell */
table.navy[width="985"] > tbody > tr > td,
table.navy[width="985"] > TR > TD {
  width: 14.2857%;
  vertical-align: top;
  padding: 3px;
  border: 1px solid #333366;
  background: #ffffff;
  min-height: 60px;
}

/* Day-of-week header row  (SUNDAY … SATURDAY) */
table.navy[width="985"] > tbody > tr:first-child > td,
table.navy[width="985"] > TR:first-child > TD {
  background-color: #d8d8d8 !important;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #000000;
  padding: 5px 2px;
  vertical-align: middle;
}

/* Day number (<b>3</b>) at top of each date cell */
table.navy[width="985"] > tbody > tr > td > b:first-child,
table.navy[width="985"] > TR > TD > B:first-child {
  display: block;
  font-size: 11px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 3px;
}

/* ============================================================
   GAME EVENT BLOCKS  (nested table width=150 inside each day)
   ============================================================ */

table.navy[width="150"] {
  width: 100% !important;
  max-width: 100%;
  margin: 0 0 5px 0;
  border: 1px solid #333366;
  border-collapse: collapse;
  background: #ffffff;
  table-layout: auto;
}

table.navy[width="150"] td {
  font-size: 10px;
  padding: 1px 2px;
  border: 1px solid #333366;
  vertical-align: middle;
}

/* Date/time header bar (light silver) */
table.navy[width="150"] > tbody > tr:first-child > td[colspan="4"],
table.navy[width="150"] > TR:first-child > TD[colspan="4"] {
  background-color: #c0c0c0 !important;
  padding: 0;
  font-size: 10px;
}

/* Inner date/time mini-table */
table.navy[width="150"] td[bgcolor="#c0c0c0"] > table,
table.navy[width="150"] td[bgcolor="#C0C0C0"] > table {
  width: 100%;
  border: none;
  border-collapse: collapse;
}

table.navy[width="150"] td[bgcolor="#d2d2d2"],
table.navy[width="150"] td[bgcolor="#D2D2D2"] {
  background-color: #d2d2d2 !important;
  font-size: 9px;
  padding: 1px 3px;
  white-space: nowrap;
  vertical-align: middle;
}

/* Date/time link text */
table.navy[width="150"] td[bgcolor="#d2d2d2"] a,
table.navy[width="150"] td[bgcolor="#D2D2D2"] a {
  color: #000066;
  font-size: 9px;
  font-weight: bold;
  text-decoration: none;
}

table.navy[width="150"] td[bgcolor="#d2d2d2"] a:hover,
table.navy[width="150"] td[bgcolor="#D2D2D2"] a:hover {
  text-decoration: underline;
}

/* Team logo images (24px tall) */
table.navy[width="150"] img[height="24"] {
  height: 24px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Tickets/PayPal button image */
table.navy[width="150"] img[src*="tickets"] {
  height: 14px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Score numbers shown as <h2> inline */
table.navy[width="150"] h2 {
  display: inline;
  font-size: 11px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  color: #000000;
  line-height: 1;
}

/* Small helper icons (pointstreak, Facebook) */
table.navy[width="150"] img[width="10"],
table.navy[width="150"] img[height="10"] {
  width: 10px !important;
  height: 10px !important;
  vertical-align: middle;
}

/* Game notes / umpires text */
table.navy[width="150"] small {
  font-size: 9px;
  line-height: 1.3;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
}

/* Inline PayPal forms */
table.navy[width="150"] form {
  display: inline;
  margin: 0;
  padding: 0;
}


/* Outer no-border table that wraps each division banner */
table[border="0"] > tbody > tr > td[bgcolor="#04b7eb"],
table[border="0"] > TR > TD[bgcolor="#04b7eb"] {
  background-color: #04b7eb !important;
  padding: 0;
  text-align: left;
  line-height: 0;
}

table[border="0"] > tbody > tr > td[bgcolor="#000066"],
table[border="0"] > TR > TD[bgcolor="#000066"] {
  background-color: #000066 !important;
  padding: 0;
  text-align: left;
  line-height: 0;
}

/* Division image (pacific.png / mountain.png) */
table[border="0"] td[bgcolor="#04b7eb"] img,
table[border="0"] td[bgcolor="#000066"] img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
}

/* ============================================================
   Allow horizontal scroll on smaller screens
   ============================================================ */

@media (max-width: 900px) {
  /* Wrap calendar in scrollable container */
  table.navy[width="985"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    min-width: 640px;
  }

  table.navy[width="985"] > tbody,
  table.navy[width="985"] > tbody > tr,
  table.navy[width="985"] > tbody > tr > td {
    display: revert;
  }

  table.navy[width="985"] > tbody > tr > td {
    min-width: 90px;
    padding: 2px;
    font-size: 9px;
  }

  table.navy[width="985"] > tbody > tr:first-child > td {
    font-size: 10px;
    padding: 3px 1px;
  }

  table.navy[width="150"] {
    font-size: 9px;
  }

  table.navy td[bgcolor="#c0c0c0"] a img,
  table.navy td[bgcolor="#C0C0C0"] a img {
    width: 80px;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 600px)
   ============================================================ */

@media (max-width: 600px) {
  body {
    overflow-x: auto;
  }

  table.navy[width="985"] {
    min-width: 500px;
    font-size: 8px;
  }

  table.navy[width="985"] > tbody > tr > td {
    min-width: 70px;
    padding: 1px;
  }

  table.navy[width="985"] > tbody > tr:first-child > td {
    font-size: 8px;
    padding: 2px 1px;
  }

  table.navy[width="150"] img[height="24"] {
    height: 18px;
  }

  table.navy td[bgcolor="#c0c0c0"] a img,
  table.navy td[bgcolor="#C0C0C0"] a img {
    width: 60px;
  }

  table.navy:not([width="985"]):not([width="150"]) td[bgcolor="#000066"] img {
    max-height: 44px;
  }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤ 380px)
   ============================================================ */

@media (max-width: 380px) {
  table.navy[width="985"] {
    min-width: 420px;
    font-size: 7px;
  }

  table.navy td[bgcolor="#c0c0c0"] a img,
  table.navy td[bgcolor="#C0C0C0"] a img {
    width: 48px;
  }

  table.navy:not([width="985"]):not([width="150"]) td[bgcolor="#000066"] img {
    max-height: 36px;
  }
}