/* ============================================================
   win98.css  ::  a draggable Windows 98 window
   ------------------------------------------------------------
   Used by the terminal when it needs to say something that does
   not belong on a terminal, which in practice means explaining
   why SMS and email are not on offer.

   WHAT MAKES A WINDOWS 98 WINDOW LOOK RIGHT

   The chrome is not rounded, not shadowed and not gradient
   filled. It is four one pixel borders faking a bevel:

       outer top/left  : #ffffff   the light catching the edge
       inner top/left  : #dfdfdf
       inner bottom/rt : #808080
       outer bottom/rt : #000000

   That exact stack is the whole look. Get the order wrong and it
   reads as a modern card with grey borders instead.

   The title bar is the one gradient in the whole thing, navy to
   a lighter blue, left to right. Buttons are the same bevel
   inverted when pressed.

   Safari 7 rules apply here too: no grid, no flexbox gap.
   ============================================================ */


@font-face {
  font-family: "MS W98 UI";
  src: url("../fonts/msw98ui-regular.woff2") format("woff2"),
       url("../fonts/msw98ui-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MS W98 UI";
  src: url("../fonts/msw98ui-bold.woff2") format("woff2"),
       url("../fonts/msw98ui-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}


/* MS SANS SERIF, NOT SELAWIK.

   Selawik is the Segoe UI substitute, which is the Windows 7 and
   Vista interface font. It is correct on the Aero side and wrong
   inside a 98 window frame, and the frame follows win98.js
   wherever it goes: the Command Prompt the terminal opens is drawn
   by this file too, so the private wing had an XP console in a 98
   chrome lettered in a Windows 7 face. Three eras in one title bar.

   `.w98 *` AND NOT JUST `.w98`, which is the whole reason this is
   its own rule. css/chrome.css sets the site font with a universal
   selector, and a universal selector applies to every element
   DIRECTLY, so it beats an inherited value no matter where that
   value was set. Putting the font on .w98 alone did nothing at
   all: the title bar text is a child, and the child got Selawik
   straight from `*`. Naming the descendants gives this a class in
   the selector, and any class outranks specificity zero.

   This project has now hit that trap three times: the BIOS screen,
   the 98 desktop, and here. See css/boot.css and css/desktop.css. */
.w98,
.w98 * {
  font-family: "MS W98 UI", Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
}

/* Things that are meant to be monospaced still are. */
.w98 pre,
.w98 code,
.w98 .w98__btn,
.w98 .ms__num,
.w98con,
.w98con * {
  font-family: "Lucida Console", Consolas, Monaco, "Courier New", monospace;
}


.w98 {
  position: fixed;
  z-index: 200;
  min-width: 320px;
  padding: 3px;

  background: #c0c0c0;
  color: #000000;
  font-size: 12px;
  line-height: 1.45;

  /* the four border bevel, outer pair then inner pair */
  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 6px rgba(0,0,0,.5);
          box-shadow:
    inset 1px 1px 0 #dfdfdf,
    inset -1px -1px 0 #808080,
    2px 2px 6px rgba(0,0,0,.5);
}

.w98.is-hidden { display: none; }


/* ---------- title bar ------------------------------------------ */
.w98__bar {
  padding: 3px 3px 3px 4px;
  color: #ffffff;
  font-weight: bold;
  background-image: -webkit-linear-gradient(left, #000080, #1084d0);
  background-image: linear-gradient(to right, #000080, #1084d0);
  cursor: url("../img/cursors/move.png") 15 15, move;

  /* dragging a window should not select its title */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.w98__title {
  display: inline-block;
  vertical-align: middle;
}
.w98__title img {
  vertical-align: -3px;
  margin-right: 5px;
}

.w98__btns { float: right; }

.w98__btn {
  display: inline-block;
  width: 16px;
  height: 14px;
  margin-left: 2px;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  line-height: 12px;
  /* NOT Marlett. Marlett is the Windows symbol font the real
     buttons were drawn from, but its close glyph lives on the
     letter r, not x, so asking for an x got the wrong symbol
     back. It also does not exist on a Mac, which is what this
     site is built for, so the stack would have fallen apart
     there in the other direction. A plain lowercase x in a
     monospace face is what a small close box looked like, and it
     looks the same everywhere. */
  font-family: "Lucida Console", Consolas, Monaco, monospace;
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  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;
          box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  cursor: url("../img/cursors/normal.png") 0 0, default;
}
/* pressed inverts the bevel, which is the whole trick */
.w98__btn:active {
  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;
}


/* ---------- body ----------------------------------------------- */
.w98__body {
  padding: 14px 14px 10px;
}
/* Own clearfix. This page uses the bare shell and never loads
   style.css, so the site wide .group helper does not exist here
   and the floated icon would fall out of the body without it. */
.w98__body:after {
  content: "";
  display: table;
  clear: both;
}

.w98__row { margin-bottom: 12px; }

/* the classic icon plus text layout of a message box */
.w98__icon {
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 14px 10px 0;
  text-align: center;
  line-height: 32px;
  font-size: 26px;
  color: #000080;
}

.w98__text { overflow: hidden; }
.w98__text p { margin: 0 0 9px; }
.w98__text p:last-child { margin-bottom: 0; }
.w98__text b { font-weight: bold; }
.w98__text code {
  font-family: "Lucida Console", Consolas, monospace;
  font-size: 11px;
  background: #ffffff;
  border: 1px solid #808080;
  padding: 0 3px;
}
.w98__text a { color: #0000c0; }

/* a sunken well, the way 98 framed lists and read only text */
.w98__well {
  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;
  -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;
}
.w98__well ul { margin: 0; padding-left: 18px; }
.w98__well li { margin-bottom: 4px; }
.w98__well li:last-child { margin-bottom: 0; }


/* ---------- footer buttons -------------------------------------- */
.w98__foot {
  padding: 4px 14px 12px;
  text-align: center;
}

.w98__push {
  display: inline-block;
  min-width: 84px;
  margin: 0 4px;
  padding: 4px 12px;
  font-size: 12px;
  color: #000000;
  text-align: center;
  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;
          box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  cursor: url("../img/cursors/normal.png") 0 0, default;
}
.w98__push:hover { text-decoration: none; color: #000000; }
.w98__push:active {
  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;
  padding: 5px 11px 3px 13px;    /* the label shifts down and right */
}

/* the default button carries an extra dark outline */
.w98__push--default {
  -webkit-box-shadow:
    inset 1px 1px 0 #dfdfdf,
    inset -1px -1px 0 #808080,
    0 0 0 1px #000000;
          box-shadow:
    inset 1px 1px 0 #dfdfdf,
    inset -1px -1px 0 #808080,
    0 0 0 1px #000000;
}