/* ---------------------------------------------------------------------
   Windows XP + Firefox 2, at 1280x800 (WXGA)

   What a Sony VAIO VGN-FE670G was showing in the summer of 2006 -- a
   15.4" widescreen panel, 16:10. Every dimension below is the real one
   for that resolution: 30px taskbar, 28px title bar, 20px menu bar,
   25px tab strip, 22px status bar, plus 6px of internal borders. What
   is left for the page is 1280x636 -- measured, not computed, and
   genuinely all the room the site had.

   The frameset was fluid in the original (`*` for the main column), so
   the extra width costs nothing: the middle column simply gets wider,
   exactly as it would have on the day.

   The wallpaper is an original composition. It is deliberately NOT the
   XP "Bliss" photograph, which is someone else's copyrighted work; this
   evokes the era without reproducing it.
   --------------------------------------------------------------------- */

.lcd {
  position: absolute;
  left: 0; top: 0;
  width: 1280px;
  height: 800px;
  transform-origin: 0 0;
  overflow: hidden;
  font: 11px/1.4 Tahoma, "Segoe UI", Verdana, sans-serif;
  color: #000;
  user-select: none;
}

/* ---------- wallpaper ---------- */
.wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 42% at 26% 96%, #7db83f 0%, #6aa833 46%, transparent 72%),
    radial-gradient(ellipse 96% 40% at 72% 104%, #63a02f 0%, #55912a 52%, transparent 78%),
    radial-gradient(ellipse 120% 30% at 50% 112%, #4e8a26 0%, #3f7a20 60%, transparent 85%),
    radial-gradient(circle at 78% 16%, #ffffff 0%, rgba(255,255,255,0.55) 5%, transparent 26%),
    linear-gradient(to bottom, #2a6ec4 0%, #4b93dd 34%, #8dc4ec 62%, #cfe6f7 78%, #9fd06a 79%, #6aa833 100%);
}
/* a couple of soft clouds */
.wallpaper::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 16% 5% at 22% 22%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(ellipse 11% 4% at 33% 17%, rgba(255,255,255,0.70), transparent 70%),
    radial-gradient(ellipse 20% 5% at 63% 12%, rgba(255,255,255,0.60), transparent 70%);
}

/* ---------- desktop icons ---------- */
.desk-icons {
  position: absolute;
  left: 8px; top: 8px;
  width: 84px;
  display: flex; flex-direction: column; gap: 14px;
}
.desk-icon { text-align: center; color: #fff; font-size: 11px; text-shadow: 1px 1px 2px rgba(0,0,0,0.85); }
.desk-icon .glyph {
  width: 32px; height: 32px; margin: 0 auto 3px;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.45);
}
.desk-icon .glyph.bin   { background: linear-gradient(160deg,#dfe6ee,#9aa8b8); border-radius: 3px 3px 6px 6px; }
.desk-icon .glyph.ie    { background: radial-gradient(circle at 38% 34%, #9fd3ff, #1d6fc4 62%, #10457e); border-radius: 50%; }
.desk-icon .glyph.docs  { background: linear-gradient(160deg,#ffe9a8,#e5b74a); }
.desk-icon .glyph.ffx   { background: radial-gradient(circle at 36% 32%, #ffcc66, #e8721a 58%, #8c3a06); border-radius: 50%; }

/* ---------- the Firefox 2 window, maximised ---------- */
.win {
  position: absolute;
  left: 0; top: 0;
  width: 1280px;
  height: 770px;              /* 800 - 30px taskbar */
  display: flex;
  flex-direction: column;
  background: #ece9d8;
  box-shadow: 0 0 0 1px #0831d9;
}

/* Luna blue title bar */
.win-title {
  flex: 0 0 28px;
  display: flex; align-items: center;
  padding: 0 2px 0 5px;
  background: linear-gradient(to bottom,
    #0058ee 0%, #3f8cf3 8%, #0054e3 42%, #0054e3 88%, #0946bd 100%);
  color: #fff;
  font: bold 12px/1 Tahoma, sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.55);
}
.win-title .ficon {
  width: 16px; height: 16px; margin-right: 5px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffcc66, #e8721a 58%, #8c3a06);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  flex: 0 0 16px;
}
.win-title .label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win-title .btns { display: flex; gap: 2px; }
.win-title .btns i {
  width: 21px; height: 21px;
  display: flex; align-items: center; justify-content: center;
  font: bold 11px/1 Marlett, Tahoma, sans-serif; font-style: normal;
  border-radius: 3px;
  background: linear-gradient(to bottom, #4b96f3, #1866d6 52%, #0d4fb4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25);
  color: #fff;
}
.win-title .btns i.close { background: linear-gradient(to bottom, #f08a5c, #d5461b 52%, #a92f0d); }

/* menu bar */
.win-menu {
  flex: 0 0 20px;
  display: flex; align-items: center; gap: 1px;
  padding: 0 4px;
  background: #ece9d8;
  font-size: 11px;
}
.win-menu span { padding: 2px 7px; border-radius: 2px; }
.win-menu span u { text-decoration: underline; }

/* navigation toolbar */
.win-nav {
  flex: 0 0 33px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 5px;
  background: linear-gradient(to bottom, #f6f4ec 0%, #e6e2d2 55%, #d8d3c0 100%);
  border-bottom: 1px solid #b3ab90;
}
.win-nav .nb {
  width: 26px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #33322c; border-radius: 3px;
}
.win-nav .nb.off { color: #a9a695; }
.win-nav .url {
  flex: 1; height: 20px;
  display: flex; align-items: center; gap: 5px;
  background: #fff;
  border: 1px solid #7f9db9;
  padding: 0 5px;
  font-size: 11px;
}
.win-nav .url .fav {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px;
  background: radial-gradient(circle at 36% 32%, #ffcc66, #e8721a 58%, #8c3a06);
}
.win-nav .url .scheme { color: #7a7a7a; }
.win-nav .go {
  height: 22px; padding: 0 9px;
  display: flex; align-items: center;
  font-size: 11px;
  background: linear-gradient(to bottom, #fbfaf4, #e2ded0);
  border: 1px solid #9b937c; border-radius: 3px;
}
.win-nav .search {
  width: 150px; height: 20px;
  display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid #7f9db9;
  padding: 0 5px; font-size: 11px; color: #9a9a9a;
}

/* Firefox 2 tab strip */
.win-tabs {
  flex: 0 0 25px;
  display: flex; align-items: flex-end; gap: 1px;
  padding: 3px 4px 0;
  background: linear-gradient(to bottom, #d3cebb, #c6c0ab);
  border-bottom: 1px solid #8e876e;
}
.win-tabs .tab {
  display: flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 9px;
  font-size: 11px; color: #3a382e;
  background: linear-gradient(to bottom, #e2ddc9, #cec8b2);
  border: 1px solid #8e876e; border-bottom: none;
  border-radius: 4px 4px 0 0;
  max-width: 200px;
}
.win-tabs .tab.on {
  background: linear-gradient(to bottom, #fbfaf4, #f1eee1);
  font-weight: bold;
  margin-bottom: -1px;
  padding-bottom: 1px;
}
.win-tabs .tab .fav {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px;
  background: radial-gradient(circle at 36% 32%, #ffcc66, #e8721a 58%, #8c3a06);
}
.win-tabs .tab .x { color: #8a8371; font-size: 10px; }

/* the page itself */
.win-view {
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  position: relative;
}

/* status bar */
.win-status {
  flex: 0 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px;
  background: linear-gradient(to bottom, #f2efe2, #ddd8c6);
  border-top: 1px solid #b3ab90;
  font-size: 11px; color: #3a382e;
}
.win-status .lock {
  width: 11px; height: 11px; border-radius: 2px;
  background: linear-gradient(to bottom, #ffd964, #d9a419);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ---------- taskbar ---------- */
.taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  display: flex; align-items: stretch;
  background: linear-gradient(to bottom,
    #3f8cf3 0%, #2f7ae8 8%, #245edb 42%, #1f55cf 90%, #1741a8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.taskbar .start {
  display: flex; align-items: center; gap: 6px;
  padding: 0 18px 0 9px;
  background: linear-gradient(to bottom, #57a83c 0%, #3f9430 10%, #2f8226 45%, #24721e 90%, #1b5c17 100%);
  border-radius: 0 9px 9px 0;
  color: #fff;
  font: italic bold 15px/1 Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.55);
}
.taskbar .start .flag {
  width: 16px; height: 16px; border-radius: 3px;
  background:
    linear-gradient(135deg, #f45b4b 0 50%, #63c14e 50% 100%),
    linear-gradient(135deg, #4aa3f0 0 50%, #f7d144 50% 100%);
  background-size: 100% 50%;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.taskbar .tasks { flex: 1; display: flex; align-items: center; gap: 3px; padding: 0 5px; }
.taskbar .task {
  display: flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; max-width: 190px;
  background: linear-gradient(to bottom, #4b96f3, #2a72e0 55%, #1f5ec6);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  color: #fff; font-size: 11px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.taskbar .task.on { background: linear-gradient(to bottom, #1a54bd, #2a72e0 55%, #3f8cf3); }
.taskbar .task .fav {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px;
  background: radial-gradient(circle at 36% 32%, #ffcc66, #e8721a 58%, #8c3a06);
}
.taskbar .tray {
  display: flex; align-items: center; gap: 7px;
  padding: 0 9px 0 11px;
  background: linear-gradient(to bottom, #21a2e8 0%, #1690dc 12%, #0f83d4 50%, #0d75c4 100%);
  box-shadow: inset 1px 0 0 rgba(0,0,0,0.18), inset 2px 0 0 rgba(255,255,255,0.25);
  color: #fff; font-size: 11px;
}
.taskbar .tray .ico { width: 12px; height: 12px; border-radius: 2px; opacity: 0.92; }
.taskbar .tray .ico.vol { background: linear-gradient(160deg,#dfe9f6,#9fb6d4); }
.taskbar .tray .ico.net { background: linear-gradient(160deg,#cfe0f4,#6f9ad0); }
.taskbar .tray .clock { font-size: 11px; letter-spacing: 0.01em; }

/* ---------------------------------------------------------------------
   Windowed instead of maximised.

   At 1280x800 almost everyone browsed maximised -- screen space was
   scarce -- so that is the default. This shows the desktop behind it
   instead, which makes the machine read as XP at a glance.
   Toggle with Ctrl+Shift+M.
   --------------------------------------------------------------------- */
html[data-window="float"] .win {
  left: 58px;
  top: 34px;
  width: 1164px;
  height: 700px;
  box-shadow: 0 0 0 1px #0831d9, 3px 3px 14px rgba(0,0,0,0.45);
}
html[data-window="float"] .win-title { border-radius: 6px 6px 0 0; }