/* =========================================================
   oldweb.css: Juan's Cool Links, rebuilt to look the way
   each site's home page did in the fall of 1999 (colors and
   layouts taken from the Wayback Machine's copies).
   One stylesheet for all five; each page's look lives under
   its own BODY ID (#geocities, #altavista, #askjeeves,
   #winamp, #mapquest). None of these are the real sites.
   ========================================================= */

* { box-sizing: border-box; }
body { margin: 0; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px dotted currentColor; outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* the way home, on every page */
.ow-back { padding: 5px 12px; background: #000033 url("assets/tile-bg.gif"); font: bold 12px Arial, Helvetica, sans-serif; }
:is(#geocities, #altavista, #askjeeves, #winamp, #mapquest) .ow-back a, :is(#geocities, #altavista, #askjeeves, #winamp, #mapquest) .ow-back a:visited { color: #ffff00; }

/* the Birthday Webring, same as the one on Juan's page */
.ow-ring { margin: 24px auto; color: #fff; text-align: center; font: 12px/1.6 Arial, Helvetica, sans-serif; }
:is(#geocities, #altavista, #askjeeves, #winamp, #mapquest) .ow-ring a, :is(#geocities, #altavista, #askjeeves, #winamp, #mapquest) .ow-ring a:visited { color: #00ffff; }
.ow-ring b { color: #ffff00; }

/* ===================== Yahoo! GeoCities ===================== */
#geocities { background: #fff; color: #000; font: 13px/1.35 Arial, Helvetica, sans-serif; }
#geocities a { color: #0000ee; }
#geocities a:visited { color: #551a8b; }
.geo { max-width: 600px; margin: 0 auto; padding: 0 8px; }
.geo-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 12px; padding: 14px 0 10px; }
.geo-logo { display: flex; align-items: center; margin: 0; line-height: 1; }
.geo-yahoo {
  font: 900 italic 30px/1 "Times New Roman", Times, serif; color: #ff0000; letter-spacing: -1px; transform: scaleY(1.1);
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 2px 2px 0 #000;
}
.geo-cities { margin-left: 2px; font: bold 26px/1 Arial, Helvetica, sans-serif; color: #336633; letter-spacing: -1px; }
.geo-house {
  position: relative; width: 22px; height: 18px; margin: 0 0 6px 4px; background: #ffcc00; border: 2px solid #336633; border-top: 0;
}
.geo-house::before {
  content: ""; position: absolute; left: -6px; top: -12px; border: 15px solid transparent; border-top: 0; border-bottom: 12px solid #336633;
}
.geo-welcome { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 3px 6px; background: #eeeeee; }
.geo-go { display: inline-block; padding: 0 3px; border: 1px solid #000; background: #fff; color: #000; font-size: 9px; }
.geo-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 2px; }
#geocities .geo-button {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 6px; min-height: 52px; padding: 5px 20px 5px 6px; background: #003399; color: #fff; text-decoration: none;
}
.geo-button b { font: bold 13px/1.2 Arial, Helvetica, sans-serif; letter-spacing: 1px; color: #fff; }
.geo-button span:last-child { font: 10px/1.25 Arial, Helvetica, sans-serif; color: #dfe7ff; }
.geo-button::after {
  content: "\25B6\FE0E"; position: absolute; right: 4px; bottom: 5px; width: 14px; height: 14px; border-radius: 50%;
  background: #ffcc00; color: #000; font: 8px/14px Arial, sans-serif; text-align: center;
}
.geo-button:hover b { text-decoration: underline; }
.geo-icon { grid-row: 1 / 3; align-self: center; width: 40px; height: 36px; border-radius: 3px; background: #6688cc; position: relative; }
.geo-icon::before, .geo-icon::after { content: ""; position: absolute; }
.geo-icon-build::before { left: 6px; top: 6px; width: 22px; height: 26px; background: #fff; box-shadow: 4px 4px 0 #cfd9f2; }
.geo-icon-build::after { left: 18px; top: 4px; width: 5px; height: 28px; background: #ffcc00; transform: rotate(35deg); border-bottom: 5px solid #333; }
.geo-icon-edit::before { left: 5px; top: 8px; width: 30px; height: 22px; background: #fff; border-radius: 50%; }
.geo-icon-edit::after { left: 17px; top: 3px; width: 5px; height: 28px; background: #00aa44; transform: rotate(-30deg); }
.geo-icon-upload::before { left: 6px; top: 12px; width: 28px; height: 20px; background: #ffcc00; border-radius: 2px; }
.geo-icon-upload::after { left: 13px; top: 2px; border: 7px solid transparent; border-top: 0; border-bottom: 12px solid #fff; }
.geo-notice { margin: 8px 0; padding: 4px; background: #ffffcc; border: 1px solid #999; text-align: center; font-size: 15px; }
.geo-cols { display: grid; grid-template-columns: minmax(0, 399px) minmax(0, 199px); gap: 2px; align-items: start; justify-content: center; }
.geo-bar { margin: 0; padding: 3px 4px; background: #003399; color: #fff; font: bold 14px Arial, Helvetica, sans-serif; }
.geo-green { background: #00cc00; }
.geo-cell { margin: 0 0 2px; padding: 6px 8px; background: #ffffcc; }
.geo-cell p { margin: 0; }
.geo-search { text-align: center; }
.geo-search input[type="text"] { width: min(100%, 140px); }
.geo-hoods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 2px 0 6px; list-style: none; font-size: 13px; }
.geo-center { text-align: center; }
.geo-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; font: 12px "Times New Roman", Times, serif; }
#geocities .geo-big { font: bold 14px Arial, Helvetica, sans-serif; }
.geo-form label { font-weight: bold; font-size: 12px; }
.geo-form p { margin: 0 0 6px; }
.geo-form input[type="text"] { width: min(100%, 220px); }
.geo-result:empty { display: none; }
.geo-result { margin-top: 6px; padding: 6px; background: #fff; border: 1px solid #003399; font-size: 12px; }
.geo-result p { margin: 0 0 4px; }
.geo-address { font: bold 12px/1.4 "Courier New", Courier, monospace; overflow-wrap: anywhere; }
.geo-reasons { padding: 6px 8px 6px 32px; }
.geo-reasons li { margin-bottom: 2px; }
.geo-side { border: 1px solid #00cc00; }
.geo-side .geo-bar { margin: -1px -1px 0; }
.geo-side-cell { padding: 6px 6px 2px; font-size: 13px; }
.geo-side-cell p { margin: 0 0 12px; }
.geo-photo { margin: 4px 0 2px; border: 2px solid #003399; width: 120px; height: 90px; object-fit: cover; }
.geo-legal { margin: 14px 0 0; padding-top: 6px; border-top: 1px solid #ccc; text-align: center; }

/* ========================= AltaVista ========================= */
#altavista { background: #fff; color: #000; font: 14px/1.3 "Times New Roman", Times, serif; }
#altavista a { color: #000099; }
#altavista a:visited { color: #663366; }
.av { max-width: 800px; margin: 0 auto; padding: 0 6px; }
.av-banner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; padding-top: 6px; border-bottom: 3px solid #003399; }
#altavista .av-mark {
  position: relative; display: block; width: 140px; height: 54px; overflow: hidden; color: #fff; text-decoration: none;
  background: linear-gradient(#123a8f, #5577c4 70%, #8fa7dc);
}
.av-peak {
  position: absolute; left: 30px; bottom: 14px; width: 0; height: 0;
  border-left: 40px solid transparent; border-right: 54px solid transparent; border-bottom: 28px solid #e9eef8;
}
.av-peak::after {
  content: ""; position: absolute; left: -16px; top: 12px; width: 0; height: 0;
  border-left: 16px solid transparent; border-right: 30px solid transparent; border-bottom: 16px solid #9fb2d9;
}
.av-mark h1 { position: absolute; left: 6px; top: 18px; margin: 0; font: bold 21px/1 Arial, Helvetica, sans-serif; letter-spacing: -0.5px; text-shadow: 0 1px 2px #001a55; }
.av-mark sup { font-size: 9px; }
.av-sub { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 6px; background: #003399; color: #99ccff; font: bold 13px/14px Arial, Helvetica, sans-serif; letter-spacing: 1px; }
.av-tagline { flex: 1 1 260px; padding-bottom: 6px; color: #000066; font: bold 14px Arial, Helvetica, sans-serif; }
.av-date { padding-bottom: 6px; font-size: 12px; }
.av-toplinks { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 14px; padding: 1px 6px; background: #99ccff; font-size: 13px; }
.av-search { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 10px; background: #ffcc66; font-size: 13px; }
.av-search-main { flex: 1 1 420px; min-width: 0; }
.av-search-main p { margin: 0 0 6px; }
.av-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 4px; padding: 0; border: 0; font-size: 12px; }
.av-kind legend { float: left; margin-right: 6px; padding: 0; font-size: 13px; }
.av-row input[type="text"] { width: min(100%, 380px); }
.av-search-side { flex: 0 1 150px; text-align: right; font-size: 12px; }
.av-search-side p { margin: 0 0 10px; }
.av-strip { margin: 8px 0 4px; font-size: 13px; }
.av-caps { font-variant: small-caps; font-weight: bold; text-transform: uppercase; font-size: 15px; letter-spacing: 0.5px; }
.av-rule { height: 0; margin: 4px 0; border: 0; border-top: 2px solid #003399; }
.av-cols { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 190px); gap: 18px; padding-top: 6px; }
.av-head { margin: 8px 0 6px; padding-bottom: 1px; border-bottom: 1px solid #cc9900; font: bold 15px "Times New Roman", Times, serif; font-variant: small-caps; text-transform: uppercase; letter-spacing: 0.5px; }
.av-mid h3 { margin: 10px 0 2px; font-size: 14px; }
.av-dir { margin: 0; padding: 0; list-style: none; }
.av-dir li { margin: 0 0 5px; font-weight: bold; }
.av-arrows, .av-plain { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.av-arrows li { position: relative; margin: 0 0 4px; padding-left: 16px; }
.av-arrows li::before { content: "\25B6\FE0E"; position: absolute; left: 0; top: 1px; color: #003399; font-size: 9px; }
.av-plain li { margin: 0 0 5px; }
.av-shop { width: 100%; margin-top: 4px; border-collapse: collapse; background: #ffffcc; border: 1px solid #cc9900; font: 13px Arial, Helvetica, sans-serif; }
.av-shop td { padding: 3px 5px; }
.av-try { margin: 0; font-size: 13px; }
.av-out:empty { display: none; }
.av-count { margin: 12px 0 4px; font-size: 14px; }
.av-results { margin: 0; padding: 0 0 6px; list-style: none; }
.av-results li { margin: 12px 0; }
.av-results a { font-weight: bold; font-size: 15px; }
.av-results p { margin: 1px 0; font-size: 13px; }
.av-url { font-size: 12px !important; color: #666; overflow-wrap: anywhere; }
.av-meta { font-size: 11px !important; color: #666; }
.av-legal { margin: 4px 0 0; text-align: center; }

/* ========================= Ask Jeeves ========================= */
#askjeeves { background: #fff; color: #000; font: 13px/1.3 "Times New Roman", Times, serif; }
#askjeeves a { color: #000; }
.aj { max-width: 490px; margin: 6px auto; }
.aj-topbar { height: 16px; background: #666699; border: 1px solid #999966; }
.aj-topbar span { display: block; width: 76%; height: 6px; margin: 4px 0 0 8px; border: 1px solid #9999cc; }
.aj-panel { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 6px; padding: 6px 6px 8px; background: #ffffcc; border: 1px solid #999966; border-top: 0; }
.aj-butler { width: 116px; height: auto; align-self: end; }
.aj-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; padding-right: 52px; }
.aj-logo { margin: 0; line-height: 1; white-space: nowrap; }
.aj-ask {
  display: inline-block; padding: 4px 12px 3px; border-radius: 50%; background: #cc0000; border: 2px solid #990000; transform: rotate(-10deg);
  font: italic bold 26px/1 Georgia, "Times New Roman", serif; color: #fff; box-shadow: 1px 2px 0 #7a0000;
}
.aj-jeeves { font: italic bold 25px/1 Georgia, "Times New Roman", serif; color: #000; letter-spacing: -1px; }
.aj-logo small { font: 9px Arial, sans-serif; vertical-align: bottom; }
.aj-promo { flex: 0 1 112px; margin: 0; padding: 3px 5px; border: 1px solid #999; background: #fff; font-size: 13px; text-align: center; }
.aj-say { margin: 8px 0 3px; text-align: center; }
.aj-row { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.aj-row input, .aj-row textarea { flex: 1 1 auto; min-width: 0; padding: 3px; border: 2px inset #ccc; font-size: 13px; }
.aj-row textarea { font: 13px/1.3 "Courier New", Courier, monospace; resize: none; }
.aj-btn {
  flex: none; padding: 2px 10px 3px; border: 2px solid #990000; border-radius: 14px; cursor: pointer;
  background: #cc0000; color: #fff; font: italic bold 15px Georgia, "Times New Roman", serif; box-shadow: 1px 1px 0 #600;
}
.aj-btn:active { transform: translate(1px, 1px); box-shadow: none; }
#askjeeves .aj-curl {
  position: absolute; top: 0; right: 0; width: 58px; height: 62px; padding: 6px 3px 0 8px; border-bottom-left-radius: 58px 54px;
  background: linear-gradient(225deg, #ffffcc 0 18%, #666699 18%); color: #fff; font: bold 9px/1.2 Arial, sans-serif;
  text-align: right; text-decoration: none;
}
.aj-answers:empty { display: none; }
.aj-answers { margin-top: 6px; padding: 8px 10px; background: #ffffcc; border: 1px solid #999966; }
.aj-answers h2 { margin: 0 0 6px; font: bold 15px "Times New Roman", Times, serif; color: #cc0000; }
.aj-answer { margin: 0 0 8px; padding: 6px 8px; background: #fff; border: 1px solid #cccc99; }
.aj-answer p { margin: 0 0 4px; }
.aj-answer .aj-q { font-weight: bold; }
#askjeeves .aj-go { display: inline-block; margin-top: 2px; padding: 1px 10px; text-decoration: none; }
.aj-recommends { display: grid; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; margin-top: 6px; background: #cccc99; border: 1px solid #999966; }
.aj-rec-head { grid-column: 1 / -1; margin: 0; padding: 2px 8px; background: #666699; color: #fff; font: bold 10px Arial, sans-serif; letter-spacing: 1px; }
.aj-recommends ul { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 10px; margin: 0; padding: 8px; list-style: none; }
.aj-recommends button {
  padding: 0; background: none; border: 0; cursor: pointer; color: #000; text-align: left; white-space: nowrap;
  font: bold 10px Arial, Helvetica, sans-serif;
}
.aj-recommends button::before { content: "\25CF"; margin-right: 4px; color: #cc0000; font-size: 9px; }
.aj-recommends button:hover { text-decoration: underline; }
#askjeeves .aj-kids { padding: 0 8px; color: #cc0000; font: italic bold 15px/1.15 Georgia, serif; text-align: center; text-decoration: none; }
.aj-bottom { margin: 0; padding: 2px 4px; background: #666699; color: #fff; text-align: center; font: bold 9px Arial, sans-serif; letter-spacing: 0.5px; }
#askjeeves .aj-bottom a { color: #fff; text-decoration: none; }
.aj-legal { margin: 30px 0 0; font-size: 10px; text-align: center; }

/* ========================== Winamp ========================== */
#winamp { background: #000; color: #fff; font: 13px/1.35 Arial, Helvetica, sans-serif; }
#winamp a, #winamp a:visited { color: #fff; }
.wa { max-width: 780px; margin: 0 auto; padding: 0 8px; }
.wa-banner { display: flex; align-items: center; justify-content: center; max-width: 468px; height: 60px; margin: 10px auto; background: linear-gradient(90deg, #1b1b1b, #3a3a3a, #1b1b1b); border: 1px solid #555; font: bold 22px Arial, sans-serif; text-align: center; }
#winamp .wa-banner a { color: #fff; text-decoration: none; }
.wa-frame { display: grid; grid-template-columns: 130px minmax(0, 1fr); border: 3px solid #78060e; }
.wa-nav { padding: 6px 6px 12px; background: #400000; border-right: 3px solid #78060e; }
.wa-nav h2 { margin: 10px 0 0; color: #ffd600; font: bold 13px Arial, Helvetica, sans-serif; }
.wa-nav h2:first-child { margin-top: 0; }
.wa-small { margin: 0 0 4px; color: #aaa; font-size: 10px; }
.wa-nav ul { margin: 4px 0 0 14px; padding: 0; list-style: none; font-size: 10px; line-height: 1.7; }
.wa-nav ul span { color: #aaa; }
.wa-main { min-width: 0; padding: 6px 10px 12px; }
.wa-about { margin: 0; color: #ffd600; font: bold 13px Arial, Helvetica, sans-serif; }
.wa-main > p { margin: 2px 0 12px; }
.wa-news { display: flex; align-items: stretch; margin: 0 0 10px; background: #400000; border: 1px solid #78060e; }
.wa-news h2 { flex: 1; margin: 0; padding: 8px 8px; font: bold 16px Arial, Helvetica, sans-serif; }
.wa-new { color: #ffd600; }
.wa-released { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 4px 10px; border-left: 1px solid #78060e; text-align: center; }
.wa-released span { color: #ffd600; font-size: 10px; letter-spacing: 3px; }
.wa-released b { font-size: 13px; }
.wa-player { margin: 0 0 16px; }
.wa-status { min-height: 1.3em; margin: 6px 0 0; text-align: center; color: #ffd600; }
.wa-legal { margin: 10px 0 0; text-align: center; color: #aaa; font-size: 10px; }

/* the player itself, after the classic Winamp 2 skin */
.amp, .amp-list { width: 100%; max-width: 412px; margin: 0 auto; }
.amp {
  padding: 0 0 6px; color: #00e800; background: linear-gradient(#45455f, #2a2a3c 60%, #232331);
  border: 1px solid #000; box-shadow: inset 1px 1px 0 #7d7d9c, inset -1px -1px 0 #14141d; font: 11px/1.2 Arial, Helvetica, sans-serif;
}
.amp-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; height: 16px; padding: 0 6px; }
.amp-bar span { height: 7px; background: repeating-linear-gradient(#d9b44a 0 1px, transparent 1px 3px); }
.amp-bar b { color: #f3e3a5; font: bold 9px/1 Arial, sans-serif; letter-spacing: 2px; }
.amp-screen { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px; margin: 2px 6px 6px; }
.amp-lcd { padding: 4px 6px; background: #000; border: 1px solid #000; box-shadow: inset 1px 1px 0 #333; }
.amp-time { font: bold 26px/1 "Courier New", Courier, monospace; color: #00e800; text-align: right; text-shadow: 0 0 3px #00a000; }
.amp-vis { display: block; width: 100%; height: 22px; margin-top: 5px; image-rendering: pixelated; }
.amp-info { min-width: 0; }
.amp-marquee { overflow: hidden; white-space: nowrap; padding: 3px 4px; background: #000; border: 1px solid #000; box-shadow: inset 1px 1px 0 #333; }
.amp-marquee span { display: inline-block; }
.amp.playing .amp-marquee span { padding-left: 100%; animation: amp-scroll 12s linear infinite; }
@keyframes amp-scroll { to { transform: translateX(-100%); } }
.amp-stats { margin-top: 5px; color: #c9c9d9; font-size: 9px; letter-spacing: 0.5px; }
.amp-stats span { display: inline-block; padding: 0 3px; background: #000; color: #00e800; font: bold 10px "Courier New", monospace; }
.amp-stats i { margin-left: 6px; color: #555; font-style: normal; }
.amp-stats b { color: #00e800; }
.amp-sliders { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.amp-vol { flex: 1; }
.amp-vol input { width: 100%; accent-color: #d9b44a; }
.amp-tiny { padding: 0 4px; cursor: pointer; background: linear-gradient(#5d5d77, #34344a); color: #9fe39f; border: 1px solid #111; font: bold 9px Arial, sans-serif; }
.amp-tiny[aria-pressed="true"] { color: #00ff00; text-shadow: 0 0 3px #00c000; }
.amp-seek { height: 8px; margin: 0 6px 6px; background: #14141d; border: 1px solid #000; box-shadow: inset 1px 1px 0 #000, 0 1px 0 #55556e; }
.amp-seek span { display: block; height: 100%; width: 0; background: linear-gradient(#e6d36a, #8f7a24); }
.amp-controls { display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.amp-controls button {
  width: 30px; height: 22px; padding: 0; cursor: pointer; color: #1a1a1a; background: linear-gradient(#d6d6de, #8d8d9c);
  border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff; font-size: 11px; line-height: 1;
}
.amp-controls button:active { box-shadow: inset -1px -1px 0 #fff; background: linear-gradient(#8d8d9c, #c6c6ce); }
.amp-controls button[aria-pressed="true"] { background: linear-gradient(#bfe8bf, #6fae6f); }
.amp-bolt { margin-left: auto; color: #e6c34a; font-size: 18px; }
.amp-list { margin-top: 0; background: #000; border: 1px solid #000; box-shadow: inset 1px 1px 0 #7d7d9c; }
.amp-list .amp-bar { background: linear-gradient(#45455f, #2a2a3c); }
.amp-list ol { margin: 0; padding: 3px 0; list-style: none; counter-reset: track; }
.amp-list li { counter-increment: track; }
.amp-list button {
  display: flex; width: 100%; gap: 6px; padding: 1px 6px; cursor: pointer; text-align: left;
  color: #00e800; background: none; border: 0; font: 11px/1.4 Arial, Helvetica, sans-serif;
}
.amp-list button::before { content: counter(track) "."; }
.amp-list button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amp-list button[aria-current="true"] { color: #fff; background: #0000c6; }

/* ========================== MapQuest ========================== */
#mapquest { background: #fff; color: #000; font: 11px/1.3 Arial, Helvetica, sans-serif; }
#mapquest a { color: #0000ff; }
#mapquest a:visited { color: #0000aa; }
.mq { max-width: 620px; margin: 0 auto; padding: 0 6px; }
.mq-top { display: grid; grid-template-columns: minmax(0, 1fr) 135px; gap: 4px; margin-top: 8px; }
.mq-banner {
  display: flex; align-items: center; justify-content: center; height: 58px; margin: 0; overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #c4d0e6 0 5deg, #dde5f2 5deg 10deg);
  border: 1px solid #9fb0cc;
}
#mapquest .mq-banner a {
  color: #cc1f00; text-decoration: none; font: 44px/1 "Luckiest Guy", "Arial Black", Impact, sans-serif; letter-spacing: 1px;
  -webkit-text-stroke: 3px #ffcc00; paint-order: stroke fill; text-shadow: 2px 3px 0 #7a1200; transform: rotate(-2deg);
}
#mapquest .mq-new { display: block; border: 1px solid #999; text-align: center; text-decoration: none; }
.mq-new b { display: block; padding: 3px 2px; background: #004477; color: #fff; font: bold 10px Arial, sans-serif; }
.mq-new span { display: block; padding: 6px 4px; color: #0000ff; text-decoration: underline; font-size: 10px; }
.mq-home { display: grid; grid-template-columns: 112px 180px minmax(0, 1fr); gap: 4px 6px; align-items: start; margin-top: 6px; }
.mq-links p { margin: 0 0 9px; font-size: 10px; }
#mapquest .mq-links a { color: #000066; font: bold 13px Arial, Helvetica, sans-serif; text-decoration: underline; }
.mq-small, .mq-tiny { font-size: 10px; }
.mq-compass { width: 180px; height: auto; }
.mq-traffic { margin: 4px 0 10px; padding: 3px; text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.mq-form { margin: 0 0 10px; border: 1px solid #004477; }
.mq-formhead { margin: 0; padding: 3px 6px; background: #004477; color: #fff; font: bold 13px Arial, Helvetica, sans-serif; }
.mq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 8px; }
.mq-fields fieldset { margin: 0; padding: 4px 8px 8px; border: 1px solid #99aabb; }
.mq-fields legend { color: #000066; font: bold 12px Arial, sans-serif; }
.mq-fields label { display: block; margin-top: 4px; font-size: 11px; }
.mq-fields input { width: 100%; font-size: 12px; }
.mq-fields input[readonly] { background: #eee; }
.mq-go { margin: 0 0 8px; text-align: center; }
.mq-results { margin: 0 0 12px; }
.mq-results h2 { margin: 0 0 4px; color: #000066; font: bold 16px Arial, Helvetica, sans-serif; }
.mq-summary { margin: 0 0 8px; font-size: 12px; }
.mq-map { display: block; width: 100%; height: auto; margin: 0 0 10px; border: 1px solid #004477; }
.mq-steps { width: 100%; border-collapse: collapse; font-size: 12px; }
.mq-steps th { padding: 3px 5px; background: #004477; color: #fff; text-align: left; font-size: 11px; }
.mq-steps td { padding: 5px; border-bottom: 1px solid #ccd6e0; vertical-align: top; }
.mq-steps td:first-child { width: 26px; font-weight: bold; }
.mq-steps td:last-child, .mq-steps th:last-child { width: 82px; text-align: right; white-space: nowrap; }
.mq-steps .mq-arrive td { font-weight: bold; color: #cc0000; }
.mq-total { margin: 6px 0; font-size: 12px; }
.mq-actions { margin: 8px 0 0; font-size: 12px; }
.mq-footbar { margin: 8px 0 0; padding: 3px; background: #004477; color: #fff; text-align: center; font: bold 10px Arial, sans-serif; }
#mapquest .mq-footbar a { color: #fff; text-decoration: none; }
.mq-legal { margin: 3px 0 0; text-align: center; font-size: 10px; }

/* ===================== big screens =====================
   In 1999 these pages filled most of an 800x600 monitor. Today's screens are
   two or three times wider, so the whole page is magnified, layout untouched,
   until it takes up the room it used to. Each step leaves space for a scrollbar. */
@media (min-width: 1040px) { body { zoom: 1.25; } }
@media (min-width: 1240px) { body { zoom: 1.5; } }
@media (min-width: 1440px) { body { zoom: 1.75; } }
@media (min-width: 1700px) { body { zoom: 2; } }
@media (min-width: 2100px) { body { zoom: 2.5; } }

/* ===================== phones (1999 never planned for these) ===================== */
@media (max-width: 640px) {
  .geo-buttons { grid-template-columns: 1fr; }
  .geo-cols { grid-template-columns: 1fr; }
  .geo-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #geocities, #geocities .geo-side-cell { font-size: 14px; }

  .av-cols { grid-template-columns: 1fr; gap: 0; }
  .av-search-side { text-align: left; flex-basis: 100%; }
  .av-search-side p { display: inline-block; margin-right: 14px; }

  .aj { margin: 6px auto; padding: 0 6px; }
  .aj-panel { grid-template-columns: 90px minmax(0, 1fr); }
  .aj-butler { width: 90px; }
  .aj-brand { padding-right: 0; }
  .aj-ask { font-size: 28px; }
  .aj-jeeves { font-size: 26px; }
  #askjeeves .aj-curl { display: none; }
  .aj-recommends { grid-template-columns: 1fr; }
  .aj-recommends ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #askjeeves .aj-kids { padding: 0 8px 8px; text-align: left; }

  .wa-frame { grid-template-columns: 1fr; }
  .wa-nav { order: 2; border-right: 0; border-top: 3px solid #78060e; }
  .wa-banner { font-size: 16px; }

  .mq-top { grid-template-columns: 1fr; }
  #mapquest .mq-banner a { font-size: 36px; }
  .mq-home { grid-template-columns: minmax(0, 1fr) 120px; }
  .mq-compass { grid-column: 2; grid-row: 1 / 3; width: 120px; }
  .mq-left { grid-column: 1; }
  .mq-right { grid-column: 1; }
  .mq-fields { grid-template-columns: 1fr; }
  #mapquest { font-size: 12px; }
  .mq-links p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .amp.playing .amp-marquee span { animation: none; padding-left: 0; }
}

/* MapQuest's whole point: print it and take it in the car */
@media print {
  body { zoom: 1; }
  .ow-back, .ow-ring, .mq-top, .mq-home, .mq-traffic, .mq-form, .mq-actions, .mq-footbar, .mq-legal { display: none !important; }
  .mq-steps th { background: none; color: #000; border-bottom: 2px solid #000; }
}