/* ==========================================================================
   FRANK'S FACTS — almanac.css
   Early-2000s web-portal / almanac aesthetic. The whole look lives here.
   Palette: forest green #2f5d31, brick #9e3b2b, mustard #d9a41b,
            navy #1d3c6e, newsprint page #fdfbf4 on #cfc7b4.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #cfc7b4;
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: #222222;
}

a { color: #0033cc; }
a:visited { color: #663399; }
a:hover { color: #9e3b2b; }

.page {
  width: 990px;
  margin: 0 auto;
  background: #fdfbf4;
  border-left: 1px solid #8a8365;
  border-right: 1px solid #8a8365;
  box-shadow: 0 0 14px rgba(60, 50, 20, 0.35);
}

/* ---- utility bar (very 2003) ---- */
.utilbar {
  background: #f7e9c3;
  border-bottom: 1px solid #c8b878;
  font-size: 10px;
  color: #7a6a35;
  padding: 3px 10px;
  text-align: right;
}
.utilbar a { color: #7a5c10; margin-left: 10px; }

/* ---- news ticker ---- */
.ticker {
  background: #9e3b2b;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 2px solid #6d2216;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: tickerscroll 40s linear infinite;
}
@keyframes tickerscroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ---- masthead ---- */
.masthead {
  background: #2f5d31;
  border-top: 3px double #d9a41b;
  border-bottom: 3px double #d9a41b;
  padding: 18px 20px 14px 20px;
  text-align: center;
  position: relative;
}
.masthead h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  letter-spacing: 3px;
  color: #f5c518;
  text-shadow: 2px 2px 0 #1b3a1c;
}
.masthead .tagline {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #f2edd8;
  margin-top: 2px;
}
.masthead .est {
  font-size: 10px;
  color: #bcd3b6;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}
.masthead .seal {
  position: absolute;
  top: 14px;
  left: 24px;
  width: 74px;
  height: 74px;
  border: 2px solid #d9a41b;
  border-radius: 50%;
  background: #244a26;
  color: #f5c518;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}
.masthead .seal .star { font-size: 18px; }

/* ---- tab bar ---- */
.tabbar {
  background: #1d3c6e;
  padding: 6px 8px 0 8px;
  border-bottom: 3px solid #d9a41b;
}
.tabbar a {
  display: inline-block;
  background: #33578f;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 14px 4px 14px;
  margin-right: 3px;
  border: 1px solid #6f8cbe;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
}
.tabbar a:hover { background: #d9a41b; color: #1d3c6e; }
.tabbar a.current { background: #fdfbf4; color: #1d3c6e; }

/* ---- 3-column portal layout ---- */
.cols { display: flex; align-items: flex-start; }
.leftcol  { width: 178px; flex: 0 0 178px; padding: 12px 0 20px 10px; }
.main     { flex: 1 1 auto; padding: 14px 16px 24px 16px; min-width: 0; }
.rightcol { width: 200px; flex: 0 0 200px; padding: 12px 10px 20px 0; }

/* ---- module boxes ---- */
.box {
  border: 1px solid #8a8365;
  background: #ffffff;
  margin-bottom: 12px;
}
.box .hd {
  background: #2f5d31;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-bottom: 1px solid #8a8365;
}
.box .bd { padding: 8px 10px; font-size: 11px; }
.box.brick .hd   { background: #9e3b2b; }
.box.navy .hd    { background: #1d3c6e; }
.box.mustard .hd { background: #d9a41b; color: #3a2c00; }

/* ---- left nav index ---- */
.navlist { list-style: none; }
.navlist li { border-bottom: 1px dotted #c4bda6; }
.navlist a {
  display: block;
  padding: 4px 6px;
  font-size: 11px;
  text-decoration: none;
  color: #1d3c6e;
}
.navlist a:hover { background: #f0ead2; color: #9e3b2b; }
.navlist a.current { background: #2f5d31; color: #ffffff; font-weight: bold; }
.navlist .grp {
  background: #ece5cd;
  color: #6a6142;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 6px;
}

/* ---- main content ---- */
.main h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  color: #2f5d31;
  border-bottom: 2px solid #d9a41b;
  padding-bottom: 3px;
  margin: 16px 0 10px 0;
}
.main h2:first-child { margin-top: 2px; }
.main h3 {
  font-family: Georgia, serif;
  font-size: 16px;
  color: #9e3b2b;
  margin: 14px 0 6px 0;
}
.main p { margin: 0 0 10px 0; }
.main ul, .main ol { margin: 0 0 10px 22px; }

.crumbs { font-size: 10px; color: #8a8365; margin-bottom: 8px; }
.crumbs a { color: #8a8365; }

/* ---- fact list ---- */
.factlist { list-style: none; margin: 0 0 14px 0 !important; }
.factlist li {
  border-bottom: 1px dotted #c4bda6;
  padding: 8px 2px;
}
.factlist .fno {
  color: #2f5d31;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 6px;
}
.factlist .src { font-size: 10px; color: #8a8365; }

/* ---- big fact callout ---- */
.bigfact {
  background: #f7e9c3;
  border: 1px solid #c8b878;
  border-left: 6px solid #d9a41b;
  padding: 14px 18px;
  margin: 14px 0;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: #3a2c00;
}
.bigfact .franksays {
  display: block;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9e3b2b;
  margin-top: 8px;
}

/* ---- frank's verdict stamps (myths page) ---- */
.stamp {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border: 2px solid;
  transform: rotate(-2deg);
}
.stamp.false { color: #9e3b2b; border-color: #9e3b2b; background: #fbeae6; }
.stamp.true  { color: #2f5d31; border-color: #2f5d31; background: #e8f0e3; }

/* ---- trivia: highlight to reveal ---- */
.reveal {
  background: #222222;
  color: #222222;
  padding: 1px 4px;
}
.reveal::selection { background: #d9a41b; color: #222222; }
.reveal::-moz-selection { background: #d9a41b; color: #222222; }
.hint { font-size: 10px; color: #8a8365; font-style: italic; }

/* ---- opt-in ---- */
.optin {
  border: 2px solid #9e3b2b;
  background: #fff9dd;
  margin-bottom: 12px;
}
.optin .hd {
  background: #9e3b2b;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 8px;
}
.optin .bd { padding: 10px; font-size: 11px; }
.optin input[type="email"] {
  width: 100%;
  border: 1px solid #8a8365;
  padding: 5px 6px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  margin: 6px 0;
}
.btn-go {
  background: #d9a41b;
  color: #3a2c00;
  border: 1px solid #8f6c0e;
  border-bottom: 3px solid #8f6c0e;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 16px;
  cursor: pointer;
}
.btn-go:hover { background: #f5c518; }
.btn-go:disabled { opacity: .6; cursor: default; }
.fineprint { font-size: 9px; color: #8a8365; margin-top: 5px; }

.optin-wide {
  border: 2px solid #9e3b2b;
  background: #fff9dd;
  margin: 16px 0;
  text-align: center;
}
.optin-wide .hd {
  background: #9e3b2b;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 10px;
}
.optin-wide .bd { padding: 14px; }
.optin-wide input[type="email"] {
  border: 1px solid #8a8365;
  padding: 6px 8px;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  width: 260px;
  max-width: 60%;
  vertical-align: middle;
  margin-right: 6px;
}

.optin-success {
  border: 2px solid #2f5d31;
  background: #e8f0e3;
  color: #1b3a1c;
  font-weight: bold;
  font-size: 12px;
  padding: 12px 14px;
  margin: 10px 0;
}

/* ---- sponsor / contact forms ---- */
.bizform label { display: block; font-size: 11px; font-weight: bold; margin: 8px 0 2px 0; color: #1d3c6e; }
.bizform input[type="text"], .bizform input[type="email"], .bizform textarea {
  width: 100%;
  border: 1px solid #8a8365;
  padding: 6px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
}
.bizform textarea { height: 80px; resize: vertical; }
.bizform .btn-go { margin-top: 10px; }

/* ---- poll ---- */
.poll .opt { display: block; margin: 4px 0; font-size: 11px; }
.pollbar {
  background: #ece5cd;
  border: 1px solid #c4bda6;
  height: 12px;
  margin: 2px 0 6px 0;
}
.pollbar .fill { background: #2f5d31; height: 100%; }
.poll .pct { font-size: 10px; color: #6a6142; }

/* ---- odometer counter ---- */
.counter {
  font-family: "Courier New", monospace;
  background: #222222;
  color: #7CFC00;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  padding: 3px 8px;
  border: 2px inset #777777;
  display: inline-block;
}

/* ---- data table ---- */
.datatable {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0 14px 0;
  font-size: 11px;
}
.datatable th {
  background: #2f5d31;
  color: #ffffff;
  text-align: left;
  padding: 5px 8px;
  border: 1px solid #8a8365;
}
.datatable td { border: 1px solid #b7ae90; padding: 5px 8px; vertical-align: top; }
.datatable tr:nth-child(even) td { background: #f5f1e2; }

/* ---- images ---- */
img.floatright { float: right; margin: 2px 0 10px 14px; border: 1px solid #8a8365; padding: 3px; background: #ffffff; }
img.floatleft  { float: left; margin: 2px 14px 10px 0; border: 1px solid #8a8365; padding: 3px; background: #ffffff; }
.clear { clear: both; }
.caption { font-size: 9px; color: #8a8365; text-align: center; }

/* ---- NEW! blinker ---- */
.newtag {
  color: #ffffff;
  background: #9e3b2b;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  margin-left: 5px;
  animation: ffblink 1.2s steps(2, start) infinite;
}
@keyframes ffblink { to { visibility: hidden; } }

/* ---- issue archive entries ---- */
.issue-entry { border-bottom: 1px dotted #c4bda6; padding: 10px 2px; }
.issue-entry .idate { font-size: 10px; color: #8a8365; text-transform: uppercase; letter-spacing: 1px; }

/* ---- alert dialog (form errors) ---- */
.win-alert {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: #fdfbf4;
  border: 2px solid #9e3b2b;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  z-index: 99;
  font-size: 12px;
}
.win-alert .bar {
  background: #9e3b2b;
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
  padding: 4px 8px;
}
.win-alert .inner { padding: 14px 12px; }
.win-alert .btnrow { text-align: center; padding: 0 0 12px 0; }
.win-alert .btn {
  background: #d9a41b;
  border: 1px solid #8f6c0e;
  font-weight: bold;
  padding: 4px 24px;
  cursor: pointer;
}

/* ---- hr ---- */
hr.rule { border: none; border-top: 1px solid #c4bda6; border-bottom: 1px solid #ffffff; margin: 16px 0; }

/* ---- footer ---- */
.footer-optin {
  background: #f7e9c3;
  border-top: 2px solid #d9a41b;
  padding: 12px 16px;
  text-align: center;
  font-size: 12px;
}
.footer-optin input[type="email"] {
  border: 1px solid #8a8365;
  padding: 5px 8px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  width: 220px;
  vertical-align: middle;
  margin: 0 6px;
}
.footer {
  background: #2f5d31;
  color: #cfe0c9;
  font-size: 10px;
  text-align: center;
  padding: 16px 12px 20px 12px;
  border-top: 3px double #d9a41b;
}
.footer a { color: #ffffff; }
.badges { margin-top: 10px; }
.badge {
  display: inline-block;
  border: 1px solid #d9a41b;
  color: #f5c518;
  background: #244a26;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 7px;
  margin: 2px 3px;
}

/* ---- small screens (fallback, not the point of this site) ---- */
@media (max-width: 1010px) {
  .page { width: 100%; }
  .cols { flex-wrap: wrap; }
  .leftcol, .rightcol { width: 100%; flex: 1 1 100%; padding: 8px 10px; }
  .main { flex: 1 1 100%; padding: 10px 12px; }
  .masthead .seal { display: none; }
  .masthead h1 { font-size: 30px; }
  .optin-wide input[type="email"] { max-width: 100%; margin-bottom: 8px; }
}