/* Pellbrook Plumbing, the OLD site (a made-up company; a portfolio demo). A deliberately dated look: yellow on
   navy, blue underlined links, a visitor counter, a fixed-width table layout, Times New Roman. The banner at the top
   is NOT part of the old site: it says what this page is, in a plain modern style, and works on a phone. The old
   site itself is a fixed 760 px table that pans sideways inside its own box on a narrow screen (the page never
   scrolls sideways). Layout tables carry role="presentation". No script on these pages. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #000080; color: #FFFF00; font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: 1.35; overflow-x: hidden; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 10; background: #FFFFFF; color: #1A1A1A; padding: 12px 18px; border-radius: 8px; font: 700 16px/1.2 system-ui, "Segoe UI", Arial, sans-serif; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- the banner (modern, readable, phone-friendly) ---------- */
.then-banner { background: #FFFFFF; color: #1F1A17; font-family: Verdana, system-ui, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.55; border-bottom: 6px solid #C24E2D; }
.tb-in { max-width: 1000px; margin: 0 auto; padding: 16px 20px 18px; }
.tb-tag { display: inline-block; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px; background: #1F1A17; color: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.tb-main, .tb-addr, .tb-small { margin: 0 0 8px; }
.tb-addr code { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 15px; background: #F3ECE6; border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.tb-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tb-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; background: #C24E2D; color: #FFFFFF; font-weight: 700; text-decoration: none; }
.tb-links a + a { background: #FFFFFF; color: #A83F22; box-shadow: inset 0 0 0 2px #E6CDBC; }
.tb-addr a { color: #A83F22; font-weight: 700; }
.tb-small { font-size: 15px; color: #574C45; }
.then-banner :focus-visible { outline: 3px solid #C24E2D; outline-offset: 3px; }

/* ---------- the old site ---------- */
.old-scroll { overflow-x: auto; padding: 24px 12px 40px; }
.old-scroll:focus-visible { outline: 3px solid #FFFF00; outline-offset: -3px; }
.old-page { width: 760px; margin: 0 auto; border: 3px outset #C0C0C0; background: #D4D0C8; color: #000000; border-collapse: separate; }
.old-page td { vertical-align: top; }
.old-top { background: #000080; color: #FFFF00; text-align: center; padding: 10px; border-bottom: 3px ridge #C0C0C0; }
.old-top h1 { margin: 0; font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; font-size: 30px; font-weight: bold; color: #FFFF00; }
.old-nav { background: #C0C0C0; text-align: center; padding: 6px; border-bottom: 2px outset #FFFFFF; font-size: 16px; }
.old-page a { color: #0000EE; text-decoration: underline; }
.old-page a:visited { color: #551A8B; }
.old-page a[aria-current] { font-weight: bold; }
.old-side { width: 190px; background: #000080; color: #FFFF00; padding: 10px; font-size: 15px; border-right: 3px ridge #C0C0C0; }
.old-side p { margin: 0 0 12px; }
.old-side .hot { color: #FFFFFF; background: #CC0000; padding: 4px; text-align: center; font-weight: bold; }
.old-main { padding: 12px 14px; font-size: 16px; }
.old-main p { margin: 0 0 12px; }
.old-main .red { color: #B00000; font-weight: bold; }
.old-main .new { color: #006600; font-weight: bold; font-size: 18px; }
.old-list { margin: 0 0 12px; padding-left: 24px; list-style: square; }
.broken-img { float: left; width: 120px; height: 90px; margin: 0 12px 8px 0; border: 2px inset #FFFFFF; background:
  linear-gradient(45deg, transparent 48.5%, #808080 49%, #808080 51%, transparent 51.5%),
  linear-gradient(-45deg, transparent 48.5%, #808080 49%, #808080 51%, transparent 51.5%), #E8E8E8; }
.under { width: 200px; height: auto; margin: 0 0 12px; }
.coupon { border: 3px dashed #000000; background: #FFFFCC; padding: 12px; margin: 0 0 12px; text-align: center; }
.coupon-big { font-family: Impact, "Arial Black", Arial, sans-serif; font-size: 40px; color: #CC0000; margin: 0 0 4px; }
.coupon .small { font-size: 13px; }
.old-foot { background: #C0C0C0; text-align: center; padding: 8px; font-size: 13px; border-top: 2px outset #FFFFFF; }
.old-foot p { margin: 0 0 4px; }
.counter { font-family: "Courier New", monospace; background: #000000; color: #00FF00; padding: 1px 6px; letter-spacing: 2px; }