/* ====================================================
   COWTOWN MRZR - retro-inspired modern stylesheet
   web-safe palette, beveled borders, no autoplay/frames
   ==================================================== */

/* tiled "computer paper" background */
body {
  margin: 0;
  padding: 0;
  background-color: #008080;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.05) 0px,
      rgba(0,0,0,0.05) 1px,
      transparent 1px,
      transparent 4px
    );
  font-family: "Verdana", "Geneva", "Arial", sans-serif;
  font-size: 13px;
  color: #000000;
}

a { color: #0000ee; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover { color: #ff0000; background-color: #ffff00; }

/* ============= TOP BANNER ============= */
.topbar {
  background: #000000;
  color: #ffff00;
  font-family: "Courier New", monospace;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 2px solid #808000;
}
.topbar td { padding: 4px 8px; }
.topbar .blink {
  color: #ff0000;
  font-weight: bold;
  animation: blink 1.2s steps(2, start) infinite;
}
@keyframes blink {
  to { visibility: hidden; }
}

/* ============= HEADER ============= */
.header {
  background: linear-gradient(180deg, #003300 0%, #006600 50%, #003300 100%);
  border: 4px outset #00aa00;
  margin-top: 6px;
  color: #ffff00;
}
.sitetitle {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 56px;
  letter-spacing: 6px;
  margin: 6px 0 0 0;
  color: #ffcc00;
  text-shadow:
    2px 2px 0 #000000,
    4px 4px 0 #663300;
}
.subtitle {
  color: #ffffff;
  font-style: italic;
  font-size: 14px;
  margin-bottom: 4px;
}
.estd {
  color: #99ff99;
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  padding-bottom: 6px;
}
.star-logo {
  font-size: 80px;
  color: #ffff00;
  text-shadow: 3px 3px 0 #000000;
}

/* ============= NAV BAR ============= */
.navbar {
  background: #c0c0c0;
  border: 3px outset #ffffff;
  margin-top: 6px;
}
.navbar td {
  background: #000080;
  border: 2px outset #6666cc;
  text-align: center;
  font-family: "Courier New", monospace;
  font-weight: bold;
}
.navbar td a {
  color: #ffff00;
  text-decoration: none;
  display: block;
  padding: 4px 8px;
}
.navbar td a:hover {
  color: #ffffff;
  background: #ff0000;
}

/* ============= NEWS TICKER ============= */
.ticker-wrap {
  margin-top: 6px;
}
.ticker-wrap td {
  background: #000000;
  border: 3px ridge #888888;
  padding: 4px;
}
.ticker-label {
  display: inline-block;
  background: #ff0000;
  color: #ffff00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 12px;
  padding: 2px 8px;
  margin-right: 8px;
  border: 1px solid #ffff00;
  vertical-align: middle;
}
.ticker-window {
  display: inline-block;
  width: calc(100% - 180px);
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
}
.ticker-text {
  display: inline-block;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

/* ============= MAIN CONTENT ============= */
.maincontent {
  background: #c0c0c0;
  border: 3px outset #ffffff;
  margin-top: 6px;
}
.sidebar {
  background: #c0c0c0;
  padding: 8px;
  border-right: 2px groove #888888;
}
.main {
  background: #ffffcc;
  padding: 12px 16px;
}

/* ============= SIDEBAR PANELS ============= */
.panel {
  background: #ffffff;
  border: 2px outset #dddddd;
  margin-bottom: 10px;
}
.panel-title {
  background: #000080;
  color: #ffff00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 6px;
  border-bottom: 2px ridge #6666cc;
}
.panel-body {
  padding: 6px 8px;
  font-size: 12px;
}
.panel-body ul {
  margin: 0;
  padding-left: 18px;
  list-style: square;
}
.panel-body li { margin-bottom: 3px; }
.phone {
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: bold;
  color: #cc0000;
}
.hours {
  font-size: 11px;
  color: #444444;
}
.email-link {
  display: inline-block;
  background: #ffff00;
  border: 2px outset #ffffaa;
  padding: 4px 6px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: bold;
}
.badge {
  display: inline-block;
  background: #006600;
  color: #ffff00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 10px;
  padding: 6px 4px;
  margin: 4px 2px;
  border: 2px ridge #00ff00;
  text-align: center;
  line-height: 1.2;
  width: 60px;
}
.badge.yellow {
  background: #ffff00;
  color: #cc0000;
  border-color: #ff8800;
}
.badge.red {
  background: #cc0000;
  color: #ffff00;
  border-color: #ff6666;
}

/* ============= MAIN COLUMN ============= */
.welcome-box {
  background: #ffffff;
  border: 3px ridge #999999;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.welcome-box h2 {
  font-family: "Impact", "Arial Black", sans-serif;
  color: #000080;
  margin: 4px 0 8px 0;
  letter-spacing: 1px;
}
.welcome-box p {
  margin: 6px 0;
  line-height: 1.45;
}

.section-header {
  background: linear-gradient(90deg, #000080 0%, #6666cc 50%, #000080 100%);
  color: #ffff00;
  font-family: "Impact", "Arial Black", sans-serif;
  letter-spacing: 3px;
  text-align: center;
  padding: 6px 0;
  margin: 14px 0 10px 0;
  border: 2px ridge #ffff00;
  text-shadow: 1px 1px 0 #000000;
}

/* ============= MARQUEE ============= */
.marquee-wrap {
  overflow: hidden;
  background: #000000;
  border: 2px inset #888888;
  padding: 4px 0;
  margin-bottom: 10px;
}
.marquee {
  display: inline-block;
  white-space: nowrap;
  color: #ffff00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 13px;
  padding-left: 100%;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ============= LISTINGS ============= */
.listing {
  background: #ffffff;
  border: 3px ridge #999999;
  margin-bottom: 14px;
}
.listing-photo {
  background: #000000;
  border: 2px inset #444444;
  padding: 4px !important;
}
.listing-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 160px;
  border: 1px solid #333333;
  background: #c0c0c0;
}
.photo-caption {
  font-size: 10px;
  color: #ffff66;
  font-family: "Courier New", monospace;
  padding-top: 4px;
  text-align: center;
}
.listing-title {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 18px;
  color: #000080;
  letter-spacing: 1px;
}
.listing-price {
  display: inline-block;
  background: #ffff00;
  color: #cc0000;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 18px;
  padding: 2px 8px;
  border: 2px outset #ffff66;
  margin: 4px 0 6px 0;
}
.listing-price.sold {
  background: #cc0000;
  color: #ffff00;
  border-color: #ff6666;
  letter-spacing: 3px;
  transform: rotate(-2deg);
}
.specs {
  margin: 6px 0;
  padding-left: 20px;
  list-style: square;
  font-size: 12px;
  line-height: 1.5;
}
.listing-cta {
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 13px;
  margin-top: 6px;
}

/* ============= FORMS ============= */
input[type="text"], textarea {
  border: 2px inset #888888;
  background: #ffffff;
  font-family: "Courier New", monospace;
  font-size: 13px;
  padding: 2px 4px;
}
input[type="submit"] {
  background: #c0c0c0;
  border: 3px outset #ffffff;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 13px;
  padding: 4px 12px;
  cursor: pointer;
}
input[type="submit"]:active { border-style: inset; }

/* ============= FOOTER ============= */
.footer {
  background: #000000;
  color: #cccccc;
  border: 3px outset #555555;
  margin-top: 6px;
  margin-bottom: 12px;
  font-size: 12px;
}
.footer a { color: #00ffff; }
.footer a:visited { color: #ff66ff; }

.counter-wrap {
  font-family: "Courier New", monospace;
  font-size: 14px;
  margin-bottom: 6px;
}
.counter {
  display: inline-block;
  background: #000000;
  color: #00ff00;
  border: 2px inset #444444;
  padding: 2px 8px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 4px;
  margin-left: 4px;
}
.webring {
  margin: 6px 0;
  font-family: "Courier New", monospace;
}
.madewith { margin: 8px 0; }
.madewith-badge {
  display: inline-block;
  background: #c0c0c0;
  color: #000000;
  border: 2px outset #ffffff;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  margin: 2px;
}
.copyright {
  color: #888888;
  font-size: 11px;
  margin-top: 6px;
}

/* ====================================================
   MOBILE / NARROW VIEWPORTS
   Keep the 1998 chrome, just stop overflowing.
   ==================================================== */
@media (max-width: 820px) {
  /* override HTML width="780" attrs */
  table.topbar,
  table.header,
  table.navbar,
  table.ticker-wrap,
  table.maincontent,
  table.footer,
  table.listing {
    width: 100% !important;
    max-width: 100%;
  }

  body { font-size: 14px; }

  /* header collapses: drop the side stars, shrink the title */
  .header .star-logo { display: none; }
  .sitetitle {
    font-size: 38px;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0 #000000, 3px 3px 0 #663300;
  }
  .subtitle { font-size: 12px; padding: 0 6px; }
  .estd { font-size: 10px; letter-spacing: 1px; }

  /* nav: wrap into a vertical-ish stack */
  .navbar { padding: 4px; }
  .navbar tr { display: flex; flex-wrap: wrap; }
  .navbar td {
    flex: 1 1 45%;
    margin: 2px;
    display: block;
  }
  .navbar td a { padding: 8px 4px; font-size: 12px; }

  /* ticker: label on its own row, scroll the headline */
  .ticker-label {
    display: block;
    margin: 0 0 4px 0;
    text-align: center;
  }
  .ticker-window {
    display: block;
    width: 100%;
  }
  .ticker-text { font-size: 12px; }

  /* main content: stack sidebar above main */
  .maincontent,
  .maincontent tbody,
  .maincontent tr {
    display: block;
  }
  .sidebar,
  .main {
    display: block;
    width: auto !important;
    border-right: none;
  }
  .sidebar {
    padding: 8px;
    border-bottom: 2px groove #888888;
  }
  .main {
    padding: 10px;
  }

  /* sidebar panels into a side-by-side grid so they don't dominate */
  .sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .panel { margin-bottom: 0; }
  .panel:first-child { grid-column: 1 / -1; } /* HOT DEALS spans full width */

  /* listings: stack photo above details */
  .listing,
  .listing tbody,
  .listing tr {
    display: block;
  }
  .listing td {
    display: block;
    width: auto !important;
  }
  .listing-photo {
    border-bottom: 2px inset #444444;
  }
  .listing-img {
    max-width: 100%;
    width: auto;
    max-height: 280px;
    margin: 0 auto;
  }
  .listing-title { font-size: 16px; }
  .listing-price { font-size: 16px; }

  /* section header: tighten letter-spacing so it doesn't wrap weird */
  .section-header {
    letter-spacing: 1px;
    font-size: 18px;
    padding: 6px 4px;
  }

  /* marquee: shrink */
  .marquee { font-size: 12px; animation-duration: 22s; }

  /* guestbook: full-width form */
  .welcome-box form table,
  .welcome-box form table tbody,
  .welcome-box form table tr {
    display: block;
    width: 100%;
  }
  .welcome-box form td {
    display: block;
    padding: 4px 0;
  }
  input[type="text"],
  textarea {
    width: 100%;
    box-sizing: border-box;
  }

  /* footer */
  .counter { font-size: 14px; letter-spacing: 2px; }
  .webring { font-size: 11px; }
  .madewith-badge { font-size: 9px; }
}

/* very narrow phones */
@media (max-width: 480px) {
  .sitetitle { font-size: 30px; letter-spacing: 2px; }
  .sidebar { grid-template-columns: 1fr; }
  .panel:first-child { grid-column: auto; }
  .navbar td { flex: 1 1 100%; }
  .badge { width: 48px; font-size: 9px; }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .topbar .blink { animation: none; }
  .marquee { animation: none; padding-left: 0; }
}