/* 123ofnet.com: the 2001 look, modern underneath. See DESIGN.md.
   Palette taken from the archived 2001 homepage (archive/raw/123ofnet.com). */

:root {
  --blue: #3366FF;      /* top bar */
  --nav: #99CCFF;       /* link strip */
  --orange: #FF9900;    /* tagline strip + footer */
  --red-orange: #FF6633;/* "News" header */
  --cream: #FFFFCC;
  --mint: #CCFFCC;
  --peach: #FFCC99;
  --lilac: #CCCCFF;
  --pink: #FF99FF;
  --lemon: #FFFF99;
  --sky: #99CCFF;
  --link: #0000CC;
  --visited: #551A8B;
  --head-text: #0000FF;
  --hot: #FF0066;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #FFFFFF;
  color: #000;
  font: 15px/1.45 Verdana, Arial, Helvetica, sans-serif;
}
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: #FF0000; }
img { max-width: 100%; height: auto; }

.skip, .sr { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--lemon); padding: 4px; z-index: 9; }

.page { max-width: 980px; margin: 0 auto; }

/* ---------- top bar ---------- */
.topbar {
  background: var(--blue);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 10px 12px;
}
.logo {
  font: 38px/1 Impact, "Arial Black", "Haettenschweiler", sans-serif;
  color: #FFFFFF !important; text-decoration: none; letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000066;
}
.logo span { color: var(--lemon); }
.logo small { font-size: 22px; color: var(--sky); }
.search { display: flex; gap: 4px; flex: 1 1 320px; max-width: 520px; }
.search input {
  flex: 1; min-width: 0; font: 15px Verdana, Arial, sans-serif; padding: 5px 6px;
  border: 2px inset #C0C0C0;
}
button, .btn {
  font: bold 14px Verdana, Arial, sans-serif; color: #000; text-decoration: none;
  background: #E0E0E0; border: 2px outset #C0C0C0; padding: 4px 12px; cursor: pointer;
  display: inline-block;
}
button:active, .btn:active { border-style: inset; }
.btn.hot { background: var(--lemon); }
.btn[aria-disabled="true"] { color: #808080; cursor: not-allowed; }

.navstrip {
  background: var(--nav); text-align: center; padding: 4px 8px;
  font: bold 12px Verdana, Arial, sans-serif; line-height: 1.9;
}
.navstrip a { color: #000099; }

.strap {
  margin: 0; background: var(--orange); color: #000033; padding: 3px 10px;
  font: 13px Verdana, Arial, sans-serif; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
}
.strap-r { font-style: italic; }

/* ---------- 3-column portal ---------- */
.portal { display: grid; grid-template-columns: 200px minmax(0, 1fr) 230px; gap: 0 10px; padding: 8px 6px; }
.col { min-width: 0; }

.box { margin: 0 0 12px; }
.box > h2, .box > h3, .bar {
  margin: 0; padding: 2px 6px; text-align: center;
  font: bold 15px Verdana, Arial, sans-serif; color: var(--head-text);
}
.box .in { padding: 6px 6px 2px; font-size: 13px; }
.box ul { margin: 0; padding: 0; list-style: none; }
.box li { margin: 0 0 7px; }

.c-peach { background: var(--peach); } .c-mint { background: var(--mint); }
.c-lilac { background: var(--lilac); } .c-pink { background: var(--pink); }
.c-lemon { background: var(--lemon); } .c-sky { background: var(--sky); }
.c-cream { background: var(--cream); }
.c-news { background: var(--red-orange); color: var(--lemon) !important; }
.c-blue { background: #0099FF; color: var(--lemon) !important; }
.c-green { background: #66CC99; color: var(--lemon) !important; }

.hero {
  background: var(--cream); border: 1px solid #CCCC99; padding: 10px 14px; margin: 0 0 12px; text-align: center;
}
.hero h1 { font: 30px/1.1 Impact, "Arial Black", sans-serif; color: var(--head-text); margin: 4px 0 6px; letter-spacing: .5px; }
.hero h1 em { color: var(--hot); font-style: normal; }
.hero p { margin: 4px 0; }

/* DMOZ-style category grid */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; padding: 8px 4px; }
.cats a.cat { font: bold 16px Verdana, Arial, sans-serif; }
.cats .sub { font-size: 12px; }
.cats .sub a { color: var(--link); }

/* tool listings */
.listing { border-bottom: 1px dotted #999; padding: 8px 2px; }
.listing:last-child { border-bottom: 0; }
.listing h3 { margin: 0; font: bold 16px Verdana, Arial, sans-serif; }
.listing p { margin: 2px 0 0; font-size: 14px; }
.listing .url { color: #008000; font-size: 12px; }
.listing.featured { background: var(--lemon); border: 2px solid var(--orange); padding: 8px; }
.tag { font: bold 10px Verdana, sans-serif; color: #FFF; background: var(--hot); padding: 1px 4px; vertical-align: middle; }
.new { color: #FF0000; font: bold 10px Verdana, sans-serif; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

/* pricing tables */
table.plans { width: 100%; border-collapse: collapse; border: 2px outset #C0C0C0; font-size: 14px; }
table.plans th { background: var(--blue); color: #FFF; padding: 6px; }
table.plans td { border: 1px solid #C0C0C0; padding: 8px; vertical-align: top; text-align: center; }
table.plans td.feat { text-align: left; }
.price { font: 28px Impact, "Arial Black", sans-serif; color: var(--hot); }

.content { padding: 10px 14px 20px; max-width: 820px; margin: 0 auto; }
.content h1 { font: 30px/1.1 Impact, "Arial Black", sans-serif; color: var(--head-text); margin: 10px 0; }
.content h1 em { color: var(--hot); font-style: normal; }
.content h2 { font: bold 18px Verdana, Arial, sans-serif; color: #000; background: var(--sky); padding: 3px 8px; margin: 22px 0 8px; }

.note { background: var(--cream); border: 1px dashed #999; padding: 8px 10px; font-size: 13px; }
.small { font-size: 12px; }
.center { text-align: center; }

form.mini input[type=email] { width: 100%; padding: 4px; border: 2px inset #C0C0C0; font: 13px Verdana, sans-serif; margin: 4px 0; }

.badge88 {
  display: inline-block; width: 88px; height: 31px; border: 1px solid #000; background: var(--blue);
  color: #FFF; font: bold 9px/1.1 Verdana, sans-serif; text-align: center; padding-top: 4px; text-decoration: none;
}
.badge88 b { color: var(--lemon); font-size: 11px; display: block; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.shots figure { margin: 0; border: 2px outset #C0C0C0; background: #EEE; }
.shots figcaption { font-size: 12px; padding: 4px; text-align: center; }

.footbar { background: var(--orange); text-align: center; padding: 3px 6px; font: 11px Verdana, sans-serif; margin-top: 8px; }
.footbar a { color: #000099; }
.copy { text-align: center; font-size: 11px; color: #555; }

mark { background: var(--lemon); }
[hidden] { display: none !important; }

@media (max-width: 860px) {
  .portal { grid-template-columns: 1fr; }
  .portal .left { order: 2; } .portal .center { order: 1; } .portal .right { order: 3; }
}
@media (max-width: 520px) {
  .logo { font-size: 32px; }
  .navstrip { font-size: 11px; }
  .strap-r { display: none; }
}
@media (prefers-reduced-motion: reduce) { .new { animation: none; } }