:root {
  --bg: #fffeef;
  --rule: #c8c189;
  --nav: #1d3c9f;
  --nav-top: #1b4b9a;
  --text: #222;
  --box-bg: #fcfcda;
  --box-border: #c8c189;
  --link: #1d3c9f;
  --strip-yellow: #fcfcda;
  --strip-white: #fffef3;
  --accent: #1a8a3a;
  --table-bg: #fffef3;
  --table-head: #f9f9b6;
  --table-row: #fffff2;
  --table-row-alt: #f9f9da;
  --inactive-row: #f5f5f5;
  --footer-text: #333;
  --year-red: #cc1e1e;
  --year-green: #1a8a3a;
}

.theme-yellow {
  --bg: #fffeef;
  --rule: #c8c189;
  --nav: #1d3c9f;
  --nav-top: #1b4b9a;
  --text: #222;
  --box-bg: #fcfcda;
  --box-border: #c8c189;
  --link: #1d3c9f;
  --strip-yellow: #fcfcda;
  --strip-white: #fffef3;
  --accent: #1a8a3a;
  --table-bg: #fffef3;
  --table-head: #f9f9b6;
  --table-row: #fffff2;
  --table-row-alt: #f9f9da;
  --inactive-row: #f5f5f5;
  --footer-text: #333;
  --year-red: #cc1e1e;
  --year-green: #1a8a3a;
}

.theme-blue {
  --bg: #f4f7ff;
  --rule: #a9b8d8;
  --nav: #1c3f8a;
  --nav-top: #214a9a;
  --text: #1a1f2c;
  --box-bg: #e3ecff;
  --box-border: #a9b8d8;
  --link: #1c3f8a;
  --strip-yellow: #e3ecff;
  --strip-white: #f7f9ff;
  --accent: #1b4f9c;
  --table-bg: #f7f9ff;
  --table-head: #d7e3ff;
  --table-row: #f8faff;
  --table-row-alt: #e7efff;
  --inactive-row: #e5e7ef;
  --footer-text: #2a3347;
  --year-red: #b02b2b;
  --year-green: #1f6f5f;
}

.theme-black {
  --bg: #1a1a1a;
  --rule: #4a4a4a;
  --nav: #d9d9d9;
  --nav-top: #ededed;
  --text: #f2f2f2;
  --box-bg: #262626;
  --box-border: #4a4a4a;
  --link: #d9d9d9;
  --strip-yellow: #222222;
  --strip-white: #2c2c2c;
  --accent: #f0f0f0;
  --table-bg: #262626;
  --table-head: #333333;
  --table-row: #242424;
  --table-row-alt: #2f2f2f;
  --inactive-row: #2a2a2a;
  --footer-text: #e0e0e0;
  --year-red: #e05a5a;
  --year-green: #6cc2a4;
}

.theme-red {
  --bg: #fff3f3;
  --rule: #d7a1a1;
  --nav: #8a1c1c;
  --nav-top: #9a1f1f;
  --text: #2a1a1a;
  --box-bg: #ffe9e9;
  --box-border: #d7a1a1;
  --link: #8a1c1c;
  --strip-yellow: #ffe9e9;
  --strip-white: #fff7f7;
  --accent: #a32020;
  --table-bg: #fff7f7;
  --table-head: #ffd7d7;
  --table-row: #fff6f6;
  --table-row-alt: #ffe1e1;
  --inactive-row: #f0e5e5;
  --footer-text: #3a2a2a;
  --year-red: #b02020;
  --year-green: #1f6f5f;
}

.theme-green {
  --bg: #f2fbf6;
  --rule: #9fc9b1;
  --nav: #1f5f3b;
  --nav-top: #236947;
  --text: #1f2a22;
  --box-bg: #e7f6ee;
  --box-border: #9fc9b1;
  --link: #1f5f3b;
  --strip-yellow: #e7f6ee;
  --strip-white: #f6fffa;
  --accent: #2a7a52;
  --table-bg: #f6fffa;
  --table-head: #d8efe3;
  --table-row: #f5fbf8;
  --table-row-alt: #e2f2e8;
  --inactive-row: #e6efe9;
  --footer-text: #24332a;
  --year-red: #b02b2b;
  --year-green: #1f7a55;
}

.theme-purple {
  --bg: #f7f3ff;
  --rule: #b9a6d8;
  --nav: #4a2b7a;
  --nav-top: #52308a;
  --text: #221a2a;
  --box-bg: #efe7ff;
  --box-border: #b9a6d8;
  --link: #4a2b7a;
  --strip-yellow: #efe7ff;
  --strip-white: #fbf7ff;
  --accent: #5a2f9a;
  --table-bg: #fbf7ff;
  --table-head: #e2d4ff;
  --table-row: #f8f4ff;
  --table-row-alt: #e9ddff;
  --inactive-row: #ece6f3;
  --footer-text: #2f2738;
  --year-red: #b02b2b;
  --year-green: #1f6f5f;
}

.theme-pink {
  --bg: #fff3f7;
  --rule: #d9a3b6;
  --nav: #8a2a4b;
  --nav-top: #992d53;
  --text: #2a1f25;
  --box-bg: #ffe7f0;
  --box-border: #d9a3b6;
  --link: #8a2a4b;
  --strip-yellow: #ffe7f0;
  --strip-white: #fff7fb;
  --accent: #b03660;
  --table-bg: #fff7fb;
  --table-head: #ffd6e5;
  --table-row: #fff6fa;
  --table-row-alt: #ffe2ef;
  --inactive-row: #efe5ea;
  --footer-text: #3a2a32;
  --year-red: #b02b2b;
  --year-green: #1f6f5f;
}

.theme-orange {
  --bg: #fff7f0;
  --rule: #d9b38f;
  --nav: #8a3a1c;
  --nav-top: #9a421f;
  --text: #2a2018;
  --box-bg: #fff0e0;
  --box-border: #d9b38f;
  --link: #8a3a1c;
  --strip-yellow: #fff0e0;
  --strip-white: #fffaf5;
  --accent: #b04a20;
  --table-bg: #fffaf5;
  --table-head: #ffe0c2;
  --table-row: #fff8f1;
  --table-row-alt: #ffe8d4;
  --inactive-row: #f0e7dd;
  --footer-text: #3a2f26;
  --year-red: #b02b2b;
  --year-green: #1f6f5f;
}

.theme-gray {
  --bg: #f3f3f3;
  --rule: #b7b7b7;
  --nav: #3a3a3a;
  --nav-top: #434343;
  --text: #1f1f1f;
  --box-bg: #f0f0f0;
  --box-border: #b7b7b7;
  --link: #3a3a3a;
  --strip-yellow: #f0f0f0;
  --strip-white: #fafafa;
  --accent: #4a4a4a;
  --table-bg: #fafafa;
  --table-head: #e1e1e1;
  --table-row: #f8f8f8;
  --table-row-alt: #ededed;
  --inactive-row: #e2e2e2;
  --footer-text: #2a2a2a;
  --year-red: #b02b2b;
  --year-green: #1f6f5f;
}

.theme-dark-gray {
  --bg: #d9d9d9;
  --rule: #5a5a5a;
  --nav: #202020;
  --nav-top: #1b1b1b;
  --text: #111111;
  --box-bg: #f2f2f2;
  --box-border: #5a5a5a;
  --link: #1b1b1b;
  --strip-yellow: #e1e1e1;
  --strip-white: #f7f7f7;
  --accent: #1a1a1a;
  --table-bg: #f7f7f7;
  --table-head: #cfcfcf;
  --table-row: #f9f9f9;
  --table-row-alt: #e3e3e3;
  --inactive-row: #d0d0d0;
  --footer-text: #1a1a1a;
  --year-red: #b02020;
  --year-green: #1f6f5f;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Verdana, Geneva, sans-serif;
  padding-bottom: 64px;
}

.site-header {
  text-align: center;
}

.strip {
  width: 100%;
  border-top: 1px dotted var(--rule);
  border-bottom: 1px dotted var(--rule);
}

.strip-title {
  background: var(--strip-yellow);
}

.strip-years {
  background: var(--strip-white);
}

.strip-nav {
  background: var(--strip-yellow);
}

.strip-footer {
  background: var(--strip-yellow);
  border-top: 1px dotted var(--rule);
  border-bottom: 1px dotted var(--rule);
}

.inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 6px 12px;
}

h1 {
  margin: 4px 0 2px;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.initial {
  font-size: 1.44em;
}

.title-link {
  color: inherit;
  text-decoration: none;
}

.imo-years {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Times New Roman", Times, serif;
  margin: 2px 0;
}

.imo-years .year {
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

.imo-years .red { color: var(--year-red); }
.imo-years .green { color: var(--year-green); }

.logo-small {
  height: 26px;
  width: auto;
}

.logo-small-link {
  display: inline-flex;
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  padding: 4px 0;
}

.site-nav a {
  color: var(--nav-top);
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

.dot {
  color: var(--nav);
  font-size: 10px;
}

.content {
  max-width: 1200px;
  margin: 22px auto 30px;
  padding: 0 12px;
  text-align: center;
}

.logo-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 14px;
}

.logo-large {
  width: min(380px, 65vw);
  height: auto;
}

.info-box {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  padding: 3px 8px;
  margin: 14px auto;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  max-width: 1100px;
  width: 100%;
}

.page-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  text-align: left;
  align-items: start;
  margin-left: -140px;
  width: calc(100% + 140px);
}

.page-sidebar {
  background: var(--strip-yellow);
  border: 1px solid var(--box-border);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
}

.page-sidebar a {
  display: block;
  color: var(--nav);
  text-decoration: none;
  padding: 2px 0;
}

.page-sidebar a:hover {
  text-decoration: underline;
}

.page-sidebar .active {
  font-weight: bold;
}

.page-main {
  text-align: left;
  overflow-x: auto;
}

.about-main h2 {
  margin: 0 0 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  color: var(--accent);
}

.about-main h3 {
  margin: 16px 0 6px;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: var(--accent);
}

.about-main p {
  margin: 6px 0 10px;
  font-size: 14px;
  line-height: 1.4;
}

.about-list {
  margin: 0 0 14px;
  font-size: 14px;
}

.about-list dt {
  font-weight: bold;
  color: var(--nav);
  margin-top: 6px;
  text-transform: uppercase;
  font-size: 13px;
}

.about-list dd {
  margin: 2px 0 6px 14px;
}

.about-table {
  width: max-content;
  table-layout: auto;
  border-collapse: collapse;
  margin: 6px 0 14px;
  font-size: 14px;
}

.about-table th,
.about-table td {
  border: 1px solid var(--box-border);
  padding: 4px 6px;
  text-align: left;
  background: var(--table-bg);
  white-space: nowrap;
}

.about-table thead th {
  background: var(--strip-yellow);
  text-align: center;
}

.about-main a {
  color: var(--nav);
  text-decoration: none;
}

.page-title {
  margin: 0 0 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  color: var(--accent);
}

.countries-table {
  width: max-content;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--table-bg);
}

.countries-table th,
.countries-table td {
  border: 1px solid var(--box-border);
  padding: 4px 6px;
  text-align: left;
  background: inherit;
  white-space: nowrap;
}

.countries-table th {
  background: var(--table-head);
  font-weight: bold;
  text-align: center;
}

.countries-table tbody tr {
  background: var(--table-row);
}

.countries-table tbody tr.is-alt,
.timeline-table tbody tr.is-alt,
.individual-table tbody tr.is-alt {
  background: var(--table-row-alt);
}

.countries-table tbody tr.is-inactive {
  background: var(--inactive-row);
}

.timeline-table tbody tr,
.individual-table tbody tr {
  background: var(--table-row);
}

.countries-table .center {
  text-align: center;
}

.countries-table a {
  color: var(--nav);
}

.country-links {
  margin: 0 0 10px;
  font-size: 14px;
}

.country-links a {
  color: var(--nav);
  text-decoration: none;
}

.country-details {
  margin: 0 0 14px;
  font-size: 14px;
}

.country-details dt {
  font-weight: bold;
  color: var(--nav);
  margin-top: 6px;
  text-transform: uppercase;
  font-size: 13px;
}

.country-details dd {
  margin: 2px 0 6px 14px;
}

.country-details a {
  color: var(--nav);
}

.country-details .empty {
  min-height: 14px;
}

.resources-list {
  margin: 0 0 14px;
  font-size: 14px;
}

.resources-list dt {
  font-weight: bold;
  color: var(--nav);
  margin-top: 6px;
}

.resources-list dd {
  margin: 2px 0 8px 14px;
}

.resources-list a {
  color: var(--nav);
}

.year-info {
  margin: 0 0 14px;
  font-size: 14px;
}

.year-info dt {
  font-weight: bold;
  color: var(--nav);
  margin-top: 6px;
  text-transform: uppercase;
  font-size: 13px;
}

.year-info dd {
  margin: 2px 0 6px 14px;
}

.year-info .awards-lines {
  line-height: 1.4;
}

.year-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.year-nav {
  color: inherit;
  text-decoration: none;
  font-weight: normal;
}

.year-nav:hover {
  text-decoration: none;
}

.year-links {
  margin: 4px 0 10px;
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
  color: var(--accent);
}

.year-links a {
  color: var(--accent);
  text-decoration: none;
}

.year-links a:hover {
  text-decoration: underline;
}

.country-links {
  margin: 4px 0 10px;
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
  color: var(--accent);
}

.country-links a {
  color: var(--accent);
  text-decoration: none;
}

.country-links a:hover {
  text-decoration: underline;
}

.country-links a.active {
  font-weight: bold;
}

.country-links .dot {
  color: var(--accent);
  font-size: 14px;
  margin: 0 8px;
}

.year-links a.active {
  font-weight: bold;
}

.year-links .dot {
  color: var(--accent);
  font-size: 14px;
  margin: 0 8px;
}

.timeline-table,
.individual-table {
  width: max-content;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--table-bg);
}

.timeline-table th,
.timeline-table td,
.individual-table th,
.individual-table td {
  border: 1px solid var(--box-border);
  padding: 4px 6px;
  text-align: left;
  background: inherit;
  white-space: nowrap;
}

.timeline-table th,
.individual-table th {
  background: var(--table-head);
  font-weight: bold;
  text-align: center;
}

.results-table {
  width: max-content;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--table-bg);
}

.results-table th,
.results-table td {
  border: 1px solid var(--box-border);
  padding: 4px 6px;
  text-align: right;
  background: inherit;
  white-space: nowrap;
}

.results-table th:first-child,
.results-table td:first-child {
  text-align: center;
}

.results-table th {
  background: var(--table-head);
  font-weight: bold;
  text-align: center;
}

.results-table tbody tr {
  background: var(--table-row);
}

.results-table tbody tr.is-alt {
  background: var(--table-row-alt);
}

.results-table a {
  color: var(--nav);
}

.results-table-wrap {
  overflow-x: auto;
}

.search-box,
.problems-box {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  padding: 12px;
  max-width: 520px;
}

.search-label {
  display: block;
  margin: 8px 0 4px;
  font-weight: bold;
  color: var(--nav);
}

.search-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--box-border);
  background: var(--table-bg);
}

.search-actions {
  margin-top: 10px;
}

.search-actions button,
.problems-controls button {
  padding: 6px 10px;
  border: 1px solid var(--box-border);
  background: var(--table-head);
  cursor: pointer;
}

.problems-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
  margin-top: 10px;
}

.problems-controls select {
  padding: 4px 6px;
  border: 1px solid var(--box-border);
  background: var(--table-bg);
}

.timeline-table .center,
.individual-table .center {
  text-align: center;
}

.timeline-table .right,
.individual-table .right {
  text-align: right;
}

.statistics-table,
.country-results-table {
  width: max-content;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--table-bg);
}

.statistics-table th,
.statistics-table td,
.country-results-table th,
.country-results-table td {
  border: 1px solid var(--box-border);
  padding: 4px 6px;
  text-align: left;
  background: inherit;
  white-space: nowrap;
}

.statistics-table th,
.country-results-table th {
  background: var(--table-head);
  font-weight: bold;
  text-align: center;
}

.statistics-table tbody tr,
.country-results-table tbody tr {
  background: var(--table-row);
}

.statistics-table tbody tr.is-alt,
.country-results-table tbody tr.is-alt {
  background: var(--table-row-alt);
}

.statistics-table tbody tr.stat-light {
  background: var(--table-row);
}

.statistics-table tbody tr.stat-inactive {
  background: var(--inactive-row);
}

.statistics-table .right,
.country-results-table .right {
  text-align: right;
}

.country-results-table .center,
.statistics-table .center {
  text-align: center;
}

.country-results-table a {
  color: var(--nav);
}

.country-team-table,
.country-individual-table,
.country-hof-table,
.country-team-year-table {
  width: max-content;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--table-bg);
}

.country-team-table th,
.country-team-table td,
.country-individual-table th,
.country-individual-table td,
.country-hof-table th,
.country-hof-table td,
.country-team-year-table th,
.country-team-year-table td {
  border: 1px solid var(--box-border);
  padding: 4px 6px;
  text-align: left;
  background: inherit;
  white-space: nowrap;
}

.country-team-table th,
.country-individual-table th,
.country-hof-table th,
.country-team-year-table th {
  background: var(--table-head);
  font-weight: bold;
  text-align: center;
}

.country-team-table tbody tr,
.country-individual-table tbody tr,
.country-hof-table tbody tr,
.country-team-year-table tbody tr {
  background: var(--table-row);
}

.country-team-table tbody tr.is-alt,
.country-individual-table tbody tr.is-alt,
.country-hof-table tbody tr.is-alt,
.country-team-year-table tbody tr.is-alt {
  background: var(--table-row-alt);
}

.country-team-year-table tbody tr.team-total {
  background: var(--table-head);
}

.country-individual-table tr.year-sep td {
  padding: 6px 0;
  border: none;
  background: transparent;
}

.country-team-table .center,
.country-individual-table .center,
.country-hof-table .center,
.country-team-year-table .center {
  text-align: center;
}

.country-team-table .right,
.country-individual-table .right,
.country-hof-table .right,
.country-team-year-table .right {
  text-align: right;
}

.country-team-table a,
.country-individual-table a,
.country-hof-table a,
.country-team-year-table a {
  color: var(--nav);
}

.team-summary {
  margin: 8px 0 0;
  font-size: 14px;
}

.statistics-table tr.stat-sep td {
  padding: 6px 0;
  border: none;
  background: transparent;
}
.sort-link {
  color: inherit;
  text-decoration: none;
}

.sort-link:hover {
  text-decoration: underline;
}

.sort-link.active {
  font-weight: bold;
}

.timeline-table a,
.individual-table a {
  color: var(--nav);
}

.resources-list dt.is-alt,
.resources-list dd.is-alt {
  background: var(--table-row-alt);
  display: inline-block;
  padding: 2px 4px;
}

.hof-header {
  margin: 0 0 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  color: var(--accent);
}

.hof-meta {
  margin: 0 0 10px;
  font-size: 14px;
}

.hof-table {
  width: max-content;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--table-bg);
}

.hof-table th,
.hof-table td {
  border: 1px solid var(--box-border);
  padding: 4px 6px;
  text-align: center;
  background: var(--table-bg);
  white-space: nowrap;
}

.hof-table th {
  background: var(--strip-yellow);
  font-weight: bold;
  text-align: center;
}

.hof-table th.left,
.hof-table td.left {
  text-align: left;
}

.hof-table .awards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.site-footer {
  text-align: center;
  font-size: 12px;
  color: var(--footer-text);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.site-footer p {
  margin: 6px 0;
}

.site-footer a {
  color: var(--link);
  text-decoration: none;
}

.site-footer .sep {
  color: var(--footer-text);
  margin: 0 6px;
  font-size: 10px;
}

.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--rule);
  background: var(--swatch-color, var(--strip-yellow));
  cursor: pointer;
  padding: 0;
}

.footer-picker {
  justify-content: center;
  width: 100%;
  padding: 6px 0;
}

.theme-swatch.is-active {
  outline: 2px solid var(--nav);
  outline-offset: 1px;
}

@media (max-width: 600px) {
  h1 { font-size: 20px; }
  .site-nav { font-size: 14px; gap: 8px; }
  .info-box { font-size: 12px; }
  .page-layout {
    grid-template-columns: 1fr;
    margin-left: 0;
    width: 100%;
  }
  .hof-table { font-size: 12px; }
}