/* ============================================================
   desktop.css  ::  Pages 98
   ------------------------------------------------------------
   The third operating system. Windows 95/98: a teal desktop with
   icons on it, a taskbar along the bottom with a Start button
   and a clock, and windows you can drag, minimise and maximise.

   The window chrome itself is css/win98.css. This file is
   everything AROUND the windows.

   ------------------------------------------------------------
   WHAT MAKES A 98 DESKTOP LOOK RIGHT
   ------------------------------------------------------------

   1. THE TEAL. #008080, exactly. It is VGA colour 3, the default
      Windows desktop from 3.1 through 98, and it is the single
      most recognisable flat colour in computing. Not a gradient,
      not a photograph.

   2. THE TASKBAR IS 28 PIXELS and it is raised, not flat: a
      white top edge, a grey body, a black bottom. Same bevel as
      everything else.

   3. ICON LABELS ARE WHITE WITH A HARD SHADOW, and a selected
      icon gets a navy label box and a dithered blue wash over
      the picture. That wash is the detail nobody recreates.

   4. NOTHING IS ROUNDED AND NOTHING IS ANTIALIASED at the
      chrome level. Every edge is one pixel.

   Safari 7 rules: floats, no grid, no flexbox gap, prefixes.
   ============================================================ */


/* ================= THE FONT ====================================
   MS Sans Serif, the system UI face of Windows 3.1, 95, 98 and
   ME. This is the single biggest thing separating a 98 pastiche
   from a 98 desktop: the whole look was drawn around this face's
   metrics, and in anything else the chrome is subtly the wrong
   size everywhere at once.

   SCOPED TO THIS PAGE ONLY, deliberately. Pages Web is a Frutiger
   Aero site and Selawik is the correct face there. One machine,
   several partitions, and they do not share a system font.

   HOW THE SCOPING WORKS, because it is not obvious. css/chrome.css
   carries a universal rule:

       *, *:before, *:after { font-family: "Selawik", ... }

   A universal selector applies to every element DIRECTLY, so it
   beats an inherited value no matter how far up the tree that
   value was set. Setting the font on body alone would do nothing
   at all here. It has specificity zero though, so any selector
   carrying a single class outranks it, which is what
   body.pages98 * is doing. tools/pages.py puts that class on.

   This exact trap has bitten this project before: the whole BIOS
   and boot sequence rendered in a proportional face for the same
   reason. See css/boot.css.

   WOFF2 IS LISTED FIRST, and Safari 7 is fine with that. A browser
   walks the src list and takes the first entry whose format() it
   understands, SKIPPING the ones it does not. Safari 7 has never
   heard of woff2, so it steps over that entry and takes the woff
   underneath it. Everything newer takes the woff2 and downloads
   46KB instead of 81KB for the regular weight.

   This file had it the other way round for exactly one session,
   on the reasoning that the old format had to come first or
   Mavericks would get nothing. That is wrong: an unknown format
   is skipped, not fatal, and putting woff first only meant every
   modern browser fetched the larger file for no reason.
   ============================================================== */
/* The two @font-face blocks moved to css/win98.css, so that a 98
   window frame is lettered in MS Sans Serif on EVERY page that draws
   one, not only on the desktop. The terminal draws them too. */


body.pages98,
body.pages98 *,
body.pages98 *:before,
body.pages98 *:after {
  font-family: "MS W98 UI", Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
}

/* The one exception, same as everywhere else on the site: things
   that are meant to be monospaced stay monospaced. A DOS box and
   a code sample are not chrome. */
body.pages98 pre,
body.pages98 code,
body.pages98 kbd,
body.pages98 samp,
body.pages98 .w98__btn,
body.pages98 .ms__num {
  font-family: "Lucida Console", Consolas, Monaco, "Courier New", monospace;
}

/* MS Sans Serif was a BITMAP face. Its outline conversion still
   wants to be rendered crisply at small sizes rather than smoothed
   into grey mush, which is what a modern engine does by default. */
body.pages98 {
  -webkit-font-smoothing: none;
     -moz-osx-font-smoothing: grayscale;
}


/* ================= BORDER BOX ==================================
   WHY THIS EXISTS, because it fixed a real and visible bug rather
   than being tidiness.

   Windows on this desktop are given a size in pixels, and the
   things inside them are sized with height: 100% and then given
   padding and a border on top. Under the default content-box
   rule, padding and border are added OUTSIDE the declared size,
   so a body declared as 100% tall inside a 330px window came out
   346px tall: 100% plus 8px of padding at each end. The app body
   hung out through the bottom of the window frame, and the
   Notepad text area pushed through the right hand border the same
   way. That is the content visibly leaking out of its window.

   border-box makes a declared size mean the whole box, padding
   and border included, which is what every one of these rules
   already assumed. One line, and every fixed size on the page
   becomes honest.

   AND THE REST OF THE SITE ALREADY DOES THIS. css/style.css opens
   with * { box-sizing: border-box }, so every page with the
   normal site chrome has always behaved this way. Pages 98 and
   the terminal are BARE pages: they deliberately do not load
   style.css, because they take over the whole window and want
   none of the site layout. They lost the reset along with it, and
   nobody noticed until a window body was asked to be 100% tall
   with padding on top of that.

   So this is not a new convention, it is the site's existing one
   finally reaching a page that was missing it.

   THE TERMINAL IS STILL CONTENT-BOX and is deliberately left that
   way. css/tty.css does its own border-box reset for the parts
   that need it, and the rest of that page is built around
   character cells measured to the pixel. Flipping the box model
   under it to tidy up an inconsistency would risk a layout that
   currently works, for no gain.

   Safari 7 needs the -webkit- prefix here. Safari only dropped it
   at version 9, so the unprefixed property alone would do nothing
   on the machine this site is built for, which is the entire
   point of writing it out twice.
   ============================================================== */
body.pages98,
body.pages98 *,
body.pages98 *:before,
body.pages98 *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/* THE PAGE RESET.

   This used to target html.desktop-root and body.desktop-body,
   and neither class has ever existed anywhere in the project:
   tools/pages.py puts logon-root on <html> and pages98 on <body>.
   So the whole rule was dead, and the 98 desktop was running on
   the browser default: an 8px body margin, overflow visible and a
   transparent background.

   Nothing looked wrong, because .dt and .dt__bar are both
   position:fixed and ignore the body box completely. It was a
   trap rather than a bug: the first element on this page that is
   NOT fixed would have picked up the 8px offset, and a single
   over-wide child would have given a desktop operating system a
   scrollbar.

   The font is deliberately NOT set here. The MS Sans Serif rule
   at the top of this file owns that now, and naming Selawik here
   as well is how the two would eventually disagree. */
html.logon-root,
body.pages98 {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #008080;
  font-size: 12px;
}


/* ---------- the desktop ---------------------------------------- */
.dt {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: 28px;                    /* the taskbar owns the rest */
  overflow: hidden;
  background-color: #008080;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* A wallpaper, when one is set. The teal shows through until then
   and is a perfectly good answer on its own. */
.dt.has-paper { background-color: #004040; }


/* ---------- icons ----------------------------------------------
   THE ICON GRID IS POSITIONED BY JAVASCRIPT, not by this file.

   Windows filled the left column from the top and started a new
   column beside it when it ran out of screen. CSS columns do
   exactly that on paper, and the first version of this used them,
   but column-fill:auto is what makes a column FILL before the
   next one starts, and that is the one part of multi-column that
   Safari 7 does not have. Chrome also only honours it when the
   element carries an explicit height rather than a top and a
   bottom. Between the two, the icons came out in a single row
   straight across the top of the screen.

   dtLayoutIcons in js/desktop.js measures the desktop and places
   each icon, which behaves identically in both browsers and
   re-runs when the window is resized. The numbers there and the
   cell size here have to agree.

   This container is only a positioning context now, so it covers
   the whole desktop rather than one 86px strip. It has no
   background and never eats a click. */
.dt__icons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* A FIXED CELL, not a stack of boxes that grow with their label.
   Windows put icons on a grid, so a two line name never pushed the
   one below it down. Without the fixed height the gaps here came
   out 95px, 75px, 95px and the column looked hand placed.

   THE CELL SIZE IS SHARED WITH js/desktop.js. DT_STEP_X and
   DT_STEP_Y there are this width and height plus their gaps, and
   that file does the positioning, so the two have to agree. */
.dt__icon {
  position: absolute;
  display: block;
  width: 74px;

  /* 85px OUTER, which is 77px of content plus the 4px of padding
     at each end. It used to say 77 and mean 77 of content, but
     border-box further up this file changed what a declared
     height means, and every two line label started hanging 4px
     out of the bottom of its cell. Same arithmetic, stated the
     way the box model now reads it. */
  height: 85px;
  overflow: hidden;

  margin: 0;
  padding: 4px 2px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  cursor: url("../img/cursors/normal.png") 0 0, default;

  /* dragging a selection across icons is not a thing here */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dt__icon img {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 3px;
}

.dt__icon span {
  display: inline-block;
  max-width: 100%;
  padding: 1px 2px;
  line-height: 1.25;

  /* A LABEL THAT IS ONE LONG WORD HAS TO BREAK.

     "My Computer" and "Server Core" wrap at the space and behave.
     "Minesweeper" has nowhere to wrap, so it ran straight out of
     its 74px cell and was cut off mid word by the overflow rule
     on the parent. Windows solved this by breaking the word.
     word-wrap is the old spelling and the one Safari 7 knows;
     overflow-wrap is the current name for the same thing. */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* THE HARD SHADOW. A 98 icon label had no antialiasing to lean
     on, so it was given a one pixel black offset instead, and
     that is what keeps white text readable on any wallpaper. */
  text-shadow: 1px 1px 0 rgba(0,0,0,.9);
}

/* SELECTED. The label goes navy and the picture takes a blue
   wash. Windows dithered that wash; a flat alpha is the closest
   a browser gets and it reads the same at this size. */
.dt__icon.is-on span {
  background: #000080;
  text-shadow: none;
}
.dt__icon.is-on img {
  /* a blue veil over the icon, done with a box-shadow inset so
     no extra element is needed */
  -webkit-box-shadow: inset 0 0 0 32px rgba(0,0,128,.45);
          box-shadow: inset 0 0 0 32px rgba(0,0,128,.45);
}


/* ---------- the taskbar ----------------------------------------- */
.dt__bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  padding: 2px;
  background: #c0c0c0;

  /* raised: light on top, dark underneath */
  border-top: 1px solid #ffffff;
  -webkit-box-shadow: inset 0 1px 0 #dfdfdf;
          box-shadow: inset 0 1px 0 #dfdfdf;

  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* the shared raised bevel, used by the Start button and the
   window buttons */
.dt__raised {
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
          box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}

.dt__sunk {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  -webkit-box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
          box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
}


.dt__start {
  float: left;
  height: 22px;
  margin-right: 4px;
  padding: 3px 7px 0 5px;
  font-weight: bold;
  font-size: 12px;
  color: #000000;
  text-decoration: none;
  background: #c0c0c0;
  cursor: url("../img/cursors/normal.png") 0 0, default;
}
.dt__start img {
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin-right: 3px;
}


/* ---------- the flag, at button size -----------------------------
   THE SAME LOGO AS THE SPLASH, because it should be.

   The Start button used to carry img/logo-32.png, which is the
   site's own orb: correct on Pages Web, wrong here. Pages 98 spends
   its first two seconds showing you a four pane flag and the words
   Pages 98, and then the desktop underneath it was badged with a
   completely different mark. An operating system uses one logo.

   It is built the same way .s98__flag is, out of four skewed
   coloured blocks, rather than exported as a PNG. Two reasons. The
   colours are then defined once, so changing the splash changes the
   button and they cannot drift apart. And at sixteen pixels a
   photograph of a flag is mush, while four flat rectangles are
   exactly as crisp as the era's icons were.

   Safari 7 rules: skewX needs the prefix, and the panes are
   positioned rather than laid out, so there is no grid or flexbox
   anywhere near this. */
.flag98 {
  display: inline-block;
  vertical-align: -3px;
  position: relative;
  width: 17px;
  height: 15px;
  margin-right: 4px;

  -webkit-transform: skewX(-14deg);
     -moz-transform: skewX(-14deg);
          transform: skewX(-14deg);
}

.flag98 i {
  position: absolute;
  display: block;
  width: 7px;
  height: 6px;
  font-style: normal;      /* it is an <i> for brevity, not italics */

  /* The same top left highlight the splash panes carry, at one
     pixel instead of two because the pane is a sixth of the size. */
  -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,.40);
          box-shadow: inset 1px 1px 0 rgba(255,255,255,.40);
}

/* the same four colours as .s98__pane, kept in step by hand */
.flag98 .flag98--r { left: 0; top: 0; background: #f04a3c; }
.flag98 .flag98--g { left: 9px; top: 0; background: #63c14e; }
.flag98 .flag98--b { left: 0; top: 8px; background: #2f7fe0; }
.flag98 .flag98--y { left: 9px; top: 8px; background: #f5c518; }

/* The Start button is the one place the flag sits on grey rather
   than on black, so it needs a hairline or the yellow pane melts
   into the taskbar. */
.dt__start .flag98 i {
  outline: 1px solid rgba(0, 0, 0, .30);
}
.dt__start:hover { text-decoration: none; color: #000000; }


/* ---------- the window buttons ---------------------------------- */
.dt__tasks {
  float: left;
  height: 22px;
  overflow: hidden;
}

.dt__task {
  float: left;
  width: 148px;
  height: 22px;
  margin-right: 3px;
  padding: 3px 6px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  color: #000000;
  text-decoration: none;
  background: #c0c0c0;
  cursor: url("../img/cursors/normal.png") 0 0, default;
}
.dt__task:hover { text-decoration: none; color: #000000; }

/* the window's icon, in front of its name */
.dt__task img {
  float: left;
  margin: 0 4px 0 0;
  width: 16px;
  height: 16px;
}
.dt__tasklab {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The active window's button is pressed IN and its label is bold,
   which is how you told at a glance which of six identical grey
   rectangles you were actually looking at. */
.dt__task.is-on {
  font-weight: bold;
  padding: 4px 5px 0 7px;
}


/* ---------- the tray -------------------------------------------- */
.dt__tray {
  float: right;
  height: 22px;
  padding: 3px 8px 0;
  font-size: 11px;
  color: #000000;
  background: #c0c0c0;
}


/* ---------- the Start menu --------------------------------------
   A raised panel with a vertical band down the left edge carrying
   the product name sideways. That band is the thing that makes it
   read as the Start menu rather than as any other grey box.
   ----------------------------------------------------------- */
.dt__menu {
  position: fixed;
  left: 2px;
  bottom: 28px;
  width: 210px;
  display: none;
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080,
                      2px 2px 5px rgba(0,0,0,.4);
          box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080,
                      2px 2px 5px rgba(0,0,0,.4);
  z-index: 400;
}
.dt__menu.is-open { display: block; }

/* the sideways band. rotated text, which Safari 7 can do with a
   prefixed transform. */
.dt__band {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 22px;
  background-image: -webkit-linear-gradient(top, #000080, #1084d0);
  background-image: linear-gradient(to bottom, #000080, #1084d0);
}
.dt__band span {
  position: absolute;
  bottom: 8px;
  left: 3px;
  width: 200px;
  text-align: left;
  font-weight: bold;
  font-size: 15px;
  color: #ffffff;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.dt__band b { font-weight: normal; }

.dt__items {
  margin: 0;
  padding: 2px 0;
  list-style: none;
  margin-left: 22px;
}

.dt__items li { margin: 0; }

.dt__items a {
  display: block;
  padding: 5px 10px;
  color: #000000;
  text-decoration: none;
  cursor: url("../img/cursors/normal.png") 0 0, default;
}
.dt__items a img {
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin-right: 7px;
}
.dt__items a:hover {
  background: #000080;
  color: #ffffff;
  text-decoration: none;
}

.dt__sep {
  height: 1px;
  margin: 3px 6px 3px 28px;
  background: #808080;
  border-bottom: 1px solid #ffffff;
}


/* ---------- the right click menu --------------------------------
   RIGHT CLICK IS NOT BLOCKED HERE, and that is deliberate.

   The terminal suppresses it, which is correct there: it is a
   console and there is nothing to point at. A desktop is the
   opposite. Blocking the context menu on a fake desktop is the
   one place it would be actively wrong, because right clicking
   the desktop is a thing everybody who has used Windows does
   within about ten seconds of seeing one.
   ----------------------------------------------------------- */
.dt__ctx {
  position: fixed;
  display: none;
  min-width: 150px;
  padding: 2px;
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080,
                      2px 2px 5px rgba(0,0,0,.4);
          box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080,
                      2px 2px 5px rgba(0,0,0,.4);
  z-index: 500;
}
.dt__ctx.is-open { display: block; }

.dt__ctx a {
  display: block;
  padding: 4px 22px 4px 12px;
  font-size: 12px;
  color: #000000;
  text-decoration: none;
}
.dt__ctx a:hover { background: #000080; color: #ffffff; text-decoration: none; }
.dt__ctx a.is-off { color: #808080; }
.dt__ctx a.is-off:hover { background: transparent; color: #808080; }


/* ---------- what goes inside the windows ------------------------ */

/* THE WINDOW BODY ITSELF.

   This is now the ONLY rule for .w98__raw in the project.

   css/shell.css used to carry one too, but that file belonged to
   the Command Prompt on Server Core and went with it when the
   Command Prompt was removed. It was never loaded on this page
   anyway, which is why this rule had to exist separately: without
   it the body of every window here had no styling whatsoever, no
   clipping and a background inherited from the frame. Nine
   windows in js/desktop.js and one in js/paint.js are opened with
   raw:true, so this rule is load bearing for all of them.

   overflow:hidden is the backstop. border-box further up means
   nothing SHOULD overflow any more, but a window is a frame and a
   frame that lets its contents hang out through the side is the
   one thing it must never do. If some future app miscalculates,
   it gets clipped instead of spilling across the desktop. */
.w98__raw {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #c0c0c0;
}

.w98app {
  padding: 8px;
  height: 100%;
  overflow: auto;
  background: #c0c0c0;
  font-size: 12px;
}

/* a sunken white field, for lists and text areas */
.w98field {
  background: #ffffff;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  -webkit-box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf;
          box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #dfdfdf;
}

/* Notepad: a plain textarea that fills its window */
/* Pinned to all four edges of the window body, starting just
   below the 20px menu bar. NOT height:100%: a percentage height
   resolves against the whole body and knows nothing about the bar
   above it, so the box came out a menu bar too tall and pushed
   out through the bottom of the window frame. Positioning from
   the bottom edge cannot make that mistake. */
.w98pad {
  position: absolute;
  top: 21px;              /* the bar, plus its one pixel rule */
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  margin: 0;
  padding: 3px 4px;
  border: 0;
  outline: none;
  resize: none;
  background: #ffffff;
  color: #000000;
  font-family: "Lucida Console", Consolas, Monaco, monospace;
  font-size: 12px;
  line-height: 1.35;
}

/* a menu strip along the top of an application window */
/* ---------- the menu bar ----------------------------------------
   A FIXED HEIGHT, and that is load bearing rather than cosmetic.

   The text area under this bar used to be height:100%, which
   resolves against the window body and therefore ignores the bar
   sitting on top of it. The text area came out taller than the
   space left for it and pushed through the bottom of the window.
   A menu bar of known height lets everything below it be
   positioned from the bottom instead, so the sum is always right
   no matter what the font does. 20px is what the real one was.

   RAISED BORDERS ON THE ITEMS. Windows 98 drew File and Edit as
   flat text until you touched them, and then gave them the bevel.
   Carrying the bevel all the time is a deliberate departure: it
   makes them read as things you can press, which on a page full
   of things that are not pressable is worth more than matching
   the original exactly. Pressed inverts the bevel, the same trick
   every other button on this desktop uses. */
.w98menu {
  position: relative;
  height: 20px;
  padding: 0 2px;
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;

  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.w98menu a {
  display: inline-block;
  height: 18px;
  margin: 1px 1px 0 0;
  padding: 0 6px;
  line-height: 16px;
  vertical-align: top;
  color: #000000;
  text-decoration: none;
  background: #c0c0c0;

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

/* Hovering fills it navy the way an open menu title was filled,
   and the bevel goes away underneath, because a highlighted menu
   title in 98 was flat. */
.w98menu a:hover {
  background: #000080;
  color: #ffffff;
  text-decoration: none;
  border-color: #000080;
}

.w98menu a:active {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  background: #c0c0c0;
  color: #000000;
  padding: 0 5px 0 7px;    /* the label shifts right, as it did */
}

/* the button grid inside My Buttons */
.w98grid { padding: 4px; }
.w98grid a { display: inline-block; margin: 2px; }
.w98grid img {
  display: block;
  width: 88px; height: 31px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}


/* ============================================================
   MINESWEEPER
   ------------------------------------------------------------
   A sunken score panel over a sunken grid of raised buttons.
   Every cell is 16x16, which is what it always was, and the
   numbers carry their fixed colours: 1 blue, 2 green, 3 red and
   so on. Anybody who played it knows those without knowing they
   know them.
   ============================================================ */
.ms { padding: 4px; }

.ms__top {
  margin-bottom: 5px;
  padding: 3px 5px;
  background: #c0c0c0;
  text-align: center;
}
.ms__top:after { content: ""; display: table; clear: both; }

/* The red seven segment counters. A real one used a bitmap of
   LED digits; a monospace face in the same red on the same black
   reads identically at this size. */
.ms__num {
  display: inline-block;
  padding: 1px 3px;
  background: #000000;
  color: #ff0000;
  font-family: "Lucida Console", Consolas, monospace;
  font-size: 15px;
  letter-spacing: 1px;
}
.ms__top .ms__num:first-child { float: left; }
.ms__top .ms__num:last-child { float: right; }

.ms__face {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 3px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  background: #c0c0c0;
}
.ms__face:hover { text-decoration: none; color: #000000; }

.ms__grid {
  padding: 3px;
  background: #c0c0c0;
  font-size: 0;              /* kills the gaps between inline cells */
}

.ms__break { clear: both; height: 0; }

.ms__cell {
  display: inline-block;
  width: 18px;
  height: 18px;
  padding: 1px 0 0;
  text-align: center;
  vertical-align: top;
  font-family: "Lucida Console", Consolas, monospace;
  font-size: 13px;
  font-weight: bold;
  line-height: 15px;
  color: #000000;
  text-decoration: none;
  background: #c0c0c0;
}
.ms__cell:hover { text-decoration: none; }

/* An opened cell is FLAT with a single grey line above and left.
   Not sunken: the grid is sunken, the unopened buttons are
   raised, and an opened one is simply the floor. Getting this
   wrong is what makes a recreation look like a spreadsheet. */
.ms__cell--open {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  padding: 0 0 0 0;
  line-height: 17px;
}

.ms__flag { color: #ff0000; font-weight: bold; }
.ms__boom { background: #ff0000; color: #000000; }

.ms__msg {
  margin-top: 6px;
  padding: 4px;
  text-align: center;
  font-size: 11px;
}


/* ================= THE PAGES 98 SPLASH =========================
   Windows 98 put a still image on a black screen with one moving
   thing on it: a bar at the bottom that swept a lighter band left
   to right, forever, telling you nothing about progress. That is
   deliberate here too. A splash with a real percentage on it is a
   progress bar; a splash with a sweeping band is a machine saying
   "working", which is what this is.

   Hidden by default. js/desktop.js shows it only when the page
   was reached from the operating system menu, so the markup
   being present is never the same as the splash running.

   Safari 7: prefixed gradients and animations, no CSS variables,
   no flexbox gap.
   ============================================================== */
.s98 {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9000;          /* over the desktop, under the CRT glass */
  background: #000000;
  cursor: wait;   /* no hourglass in img/cursors, so the real one */
  overflow: hidden;

  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

html.dt-splash .s98 { display: block; }

/* The desktop is not interactive while the splash is up. Windows
   was not either: the shell had not started yet. */
html.dt-splash .dt,
html.dt-splash .dt__bar { visibility: hidden; }

.s98__mid {
  position: absolute;
  top: 42%;
  left: 0; right: 0;
  margin-top: -60px;
  text-align: center;
  white-space: nowrap;
}

/* ---- the flag ----
   Four panes, skewed as a block. Each pane is skewed BACK by the
   same amount it is rotated so the panes stay rectangular inside
   a slanted flag, which is what makes it read as a flag rather
   than as four parallelograms. */
.s98__flag {
  display: inline-block;
  vertical-align: middle;
  width: 92px;
  height: 78px;
  margin-right: 26px;
  position: relative;

  -webkit-transform: skewX(-14deg);
     -moz-transform: skewX(-14deg);
          transform: skewX(-14deg);
}

.s98__pane {
  position: absolute;
  width: 42px;
  height: 35px;
  display: block;

  /* the soft top left highlight every one of those panes had */
  -webkit-box-shadow: inset 2px 2px 0 rgba(255,255,255,.35);
          box-shadow: inset 2px 2px 0 rgba(255,255,255,.35);
}

.s98__pane--r { left: 0;    top: 0;    background: #f04a3c; }
.s98__pane--g { left: 50px; top: 0;    background: #63c14e; }
.s98__pane--b { left: 0;    top: 43px; background: #2f7fe0; }
.s98__pane--y { left: 50px; top: 43px; background: #f5c518; }

.s98__words {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  color: #ffffff;
}

.s98__small {
  font-size: 34px;
  line-height: 1;
  letter-spacing: .5px;
}

.s98__big {
  font-size: 62px;
  line-height: 1;
  font-weight: bold;
  letter-spacing: -1px;
}

/* ---- the sweeping bar ---- */
.s98__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22px;
  background: #000000;
  overflow: hidden;
}

.s98__blip {
  position: absolute;
  top: 0; bottom: 0;
  width: 34%;
  left: -34%;

  background: #1a4fb4;
  background: -webkit-linear-gradient(left,
              rgba(0,0,80,0) 0%, #1a4fb4 45%, #6ea8ff 78%, rgba(0,0,80,0) 100%);
  background: linear-gradient(to right,
              rgba(0,0,80,0) 0%, #1a4fb4 45%, #6ea8ff 78%, rgba(0,0,80,0) 100%);

  -webkit-animation: s98sweep 2.4s linear infinite;
          animation: s98sweep 2.4s linear infinite;
}

@-webkit-keyframes s98sweep {
  from { left: -34%; }
  to   { left: 100%; }
}
@keyframes s98sweep {
  from { left: -34%; }
  to   { left: 100%; }
}

/* Motion off: the bar stops sweeping and simply sits there filled.
   Keyed off html.motion-off rather than the media query, so the
   on page switch can overrule an operating system wide setting.
   See js/motion.js. */
html.motion-off .s98__blip {
  -webkit-animation: none;
          animation: none;
  left: 0;
  width: 100%;
  opacity: .55;
}

.s98__skip {
  position: absolute;
  right: 10px; bottom: 28px;
  color: #6f6f6f;
  font-size: 11px;
}


/* ================= THE RUBBER BAND =============================
   The dotted rectangle you drag across the desktop.

   A DOTTED border, not a solid one, and that is the whole look:
   Windows drew this as a one pixel XOR pattern, so it appeared as
   a fine dotted outline over whatever was behind it. A solid blue
   rectangle with a translucent fill is the modern convention and
   reads as completely the wrong decade.

   pointer-events:none matters. The band sits under the cursor for
   the whole drag, and without this the mouseup at the end lands
   on the band instead of on the desktop.
   ============================================================== */
.dt__rubber {
  display: none;
  position: fixed;
  z-index: 90;
  border: 1px dotted #ffffff;
  pointer-events: none;
}
.dt__rubber.is-on { display: block; }


/* ================= WHAT THE NEW WINDOWS ARE MADE OF =============
   Small shared pieces, so an app is a few lines of html rather
   than a pile of inline styles.
   ============================================================== */

/* the shelf of gifs in My Pictures. Each one at its own size,
   because these are twenty year old ornaments of every shape
   there is and scaling them to a grid turns a collection into
   wallpaper. */
.w98shelf { padding: 2px; }
.w98shelf__it {
  display: inline-block;
  margin: 3px;
  padding: 3px;
  vertical-align: middle;
  background: #ffffff;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
.w98shelf__it img {
  display: block;
  max-width: 200px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}

/* ---------- the guestbook window --------------------------------
   An entry signed on this machine and not posted yet. Sunk into
   the window the way a read only field was, so it reads as a
   record of something rather than as something you can still edit.

   The note underneath is not styled down into quiet grey. It is
   the sentence that stops somebody thinking their message is
   published when it is not, so it stays legible. */
.gb98__entry {
  margin: 6px 0;
  padding: 5px 7px;
  background: #ffffff;

  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.gb98__head { margin-bottom: 3px; }
.gb98__when { color: #606060; margin-left: 5px; }
.gb98__head a { margin-left: 6px; }

.gb98__body {
  margin-bottom: 4px;
  word-wrap: break-word;
}

.gb98__note {
  color: #7a0000;
  border-top: 1px dotted #c0c0c0;
  padding-top: 3px;
}

.gb98__say { margin-left: 8px; }
.gb98__say--bad { color: #7a0000; }


/* ---------- saved paintings, in the Open dialog -----------------
   A thumbnail, its name and the time it was saved, laid out the way
   a Windows 98 file listing in Thumbnails view was: a fixed cell,
   the picture sunk into it, the caption underneath.

   Fixed cells rather than the natural sizes .w98shelf uses, because
   every one of these is the same 424x264 canvas, so ragged sizing
   would be noise with no information in it.

   No flexbox and no grid: inline-block cells and a fixed width,
   which is what Safari 7 wants anyway. */
.ptfiles {
  max-height: 244px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px;
  margin-bottom: 8px;
  background: #ffffff;

  /* the sunken frame a file list sat in */
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.ptfiles__it {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 128px;
  margin: 3px;
  padding: 3px;
  text-align: center;
  cursor: url("../img/cursors/link.png") 0 0, pointer;
}

.ptfiles__it:hover {
  background: #000080;
  color: #ffffff;
}

.ptfiles__it img {
  display: block;
  width: 118px;
  height: 74px;
  margin: 0 auto 3px;
  background: #ffffff;
  border: 1px solid #808080;
}

.ptfiles__n {
  display: block;
  font-size: 11px;
  font-weight: bold;

  /* Long names truncate rather than wrapping the cell taller than
     its neighbours and breaking the row. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ptfiles__d {
  display: block;
  font-size: 10px;
  color: #606060;
}

.ptfiles__it:hover .ptfiles__d { color: #c0c0c0; }

/* THE DELETE CROSS. Top right of the cell, and only on hover,
   because a row of crosses reads as a warning and this is a
   picture browser. Hover is enough here: Pages 98 is desktop only
   by design, so there is no touch case with no hover state. */
.ptfiles__x {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: none;
  width: 14px;
  height: 14px;
  line-height: 13px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
}

.ptfiles__it:hover .ptfiles__x { display: block; }
.ptfiles__x:hover { background: #d4d0c8; text-decoration: none; }
.ptfiles__x:active {
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}


/* a sunken well with a link in it */
.w98well {
  margin: 10px 0;
  padding: 8px 10px;
  background: #ffffff;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
.w98well a { color: #0000c0; }

/* ---- Control Panel ----------------------------------------------
   One row per setting: the name, the sentence saying what it does,
   and its current state on a button at the right hand end.

   Floated rather than flexed. The row is a label and a control on
   one line, which is the oldest layout problem there is, and float
   with a clearing :after is the version of the answer that Safari 7
   and everything after it agree on.
   ------------------------------------------------------------------ */
.w98cp { margin: 0; padding: 0; list-style: none; }

.w98cp li {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #d4d0c8;
}
.w98cp li:last-child { border-bottom: 0; }

/* the row has a floated child, so it has to close over it */
.w98cp li:after { content: ""; display: block; clear: both; }

.w98cp__btn {
  float: right;
  min-width: 84px;
  margin: 0 0 6px 12px;
}

.w98cp__name { display: block; font-weight: bold; }

.w98cp__why {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #404040;
}

/* a setting whose backing file is not on this page */
.w98cp li.is-off .w98cp__name,
.w98cp li.is-off .w98cp__why { color: #808080; }


/* ---- the Shut Down dialog ----------------------------------------
   Four choices in a sunken group, which is how 98 drew a radio
   list inside a dialog.
   ------------------------------------------------------------------ */
.w98shut p { margin: 0 0 10px; }

.w98radios {
  padding: 8px 10px;
  background: #c0c0c0;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.w98radio {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  cursor: default;
}
.w98radio:last-child { margin-bottom: 0; }

/* The native control, left alone. 98's radio and this one are the
   same shape, and a drawn replacement would lose the keyboard
   behaviour that makes the list work at all. */
.w98radio input {
  margin: 0 5px 0 0;
  vertical-align: -1px;
}

/* The accelerator underline. One pixel, tight to the letter, and
   NOT a link: Windows drew these on menu and dialog labels and
   they were never clickable text. */
.w98radio u {
  text-decoration: none;
  border-bottom: 1px solid #000000;
}


/* the small grey note under a control */
.w98dim { color: #404040; }

/* an empty folder message, centred in its field */
.w98empty {
  padding: 30px 10px;
  text-align: center;
  color: #808080;
}

/* text inputs, sunken the way every 98 field was */
.w98txt {
  width: 100%;
  padding: 3px 4px;
  background: #ffffff;
  color: #000000;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  font-size: 12px;
}
.w98txt--big { height: 70px; resize: none; }

/* a push button inside an app body, as opposed to the ones in a
   dialog footer, which are .w98__push over in win98.css */
.w98btn {
  display: inline-block;
  min-width: 74px;
  margin-right: 6px;
  padding: 3px 12px;
  text-align: center;
  color: #000000;
  text-decoration: none;
  font-size: 12px;
}
.w98btn:hover { text-decoration: none; color: #000000; }
.w98btn:active {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 4px 11px 2px 13px;
}