/* ============================================================
   bsod.css  ::  the blue screen
   ------------------------------------------------------------
   Used for two things:

     404.html          a page that does not exist is a fault
     window.onerror    a JavaScript crash, drawn by js/bsod.js

   The 404 was the only screen on the site still breaking
   character. It shared the home shell, so a missing page quietly
   produced a normal web page with an apology on it. On a site
   pretending to be a machine, a missing file should be a fault.

   ------------------------------------------------------------
   GETTING IT RIGHT
   ------------------------------------------------------------

   This is the Windows 2000 and XP stop screen, not the Windows 9x
   one. The 9x version was a mostly empty blue screen with a
   centred bar of text and "Press any key to continue". The NT one
   is a wall of left aligned text, and that is the one everybody
   pictures.

   The details that matter:

     1. THE BLUE IS #0000AA, not #0000FF. It is VGA colour 1, a
        dark navy. Pure blue is the single most common mistake and
        it makes the whole thing look like a web page painted
        blue.

     2. THE TEXT IS #FFFFFF, and there is no other colour on the
        screen. No highlights, no red, no headings.

     3. IT IS 80 COLUMNS OF MONOSPACE, left aligned, with generous
        blank lines between blocks. Not centred. Centring it is
        the second most common mistake.

     4. NO BORDERS, NO ROUNDING, NO SHADOWS. The graphics driver
        has just died. There is nothing left to draw them with.

   Safari 7 rules apply.
   ============================================================ */

.bsod {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;          /* above even the monitor overlay */
  overflow: auto;

  background: #0000aa;     /* VGA colour 1. NOT #0000ff */
  color: #ffffff;

  font-family: "Lucida Console", Consolas, Monaco, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.45;

  cursor: url("../img/cursors/normal.png") 0 0, default;
}

/* the 404 uses the bare shell, so it owns the body outright */
body.bsod-body {
  margin: 0;
  padding: 0;
  background: #0000aa;
  overflow: hidden;
}

.bsod__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 9vh 24px 40px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bsod__block { margin: 0 0 1.6em; }
.bsod__block:last-child { margin-bottom: 0; }


/* The way back. A joke that traps you is not a joke, so this is
   deliberately a real link and deliberately obvious. Underlined
   because on a screen with exactly one colour, underline is the
   only affordance left. */
.bsod__out {
  margin-top: 2.4em;
}
.bsod__out a {
  color: #ffffff;
  text-decoration: underline;
}
.bsod__out a:hover {
  background: #ffffff;
  color: #0000aa;
  text-decoration: none;
}


/* The blinking underscore at the end, which the real one had
   while it sat there dumping. */
.bsod__cursor {
  display: inline-block;
  width: .6em;
  height: 2px;
  vertical-align: baseline;
  background: #ffffff;
  -webkit-animation: bsodblink 1.06s steps(1) infinite;
          animation: bsodblink 1.06s steps(1) infinite;
}
@-webkit-keyframes bsodblink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes bsodblink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}


  html.motion-off .bsod__cursor {
    -webkit-animation: none !important;
            animation: none !important;
    opacity: 1;
  }


/* ---------- THE MACHINE, STOPPED -----------------------------
   What js/power.js puts on the screen after Shut Down, and the
   dark beat it puts there during a Restart.

   IN THIS FILE RATHER THAN css/boot.css, WHICH IS WHERE IT WAS
   WRITTEN FIRST. boot.css is loaded on three pages: index.html,
   pages/desktop.html and pages/private.html. The Shut Down button
   is in the sidebar of all twenty, so on the other seventeen the
   off screen appeared with no styling at all: black text on white,
   full width, over the top of the page.

   This file is the right home because it is already the one that
   ships on every page for exactly this reason. A blue screen and a
   powered off screen are the same kind of thing: a full window
   takeover that any page might need and most will never show.
   ----------------------------------------------------------- */
.poweroff {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100000;
  background: #000000;
  opacity: 0;
  text-align: center;

  /* Not interactive until it is on, so the fraction of a second
     between appending it and lighting it does not swallow a
     click meant for the page underneath. */
  visibility: hidden;
}

.poweroff.is-on {
  opacity: 1;
  visibility: visible;
}

/* The fade is the monitor giving up rather than a transition
   effect, so it is slow and one way. */
.poweroff {
  -webkit-transition: opacity .45s linear;
          transition: opacity .45s linear;
}

/* A restart is not meant to be looked at, so it does not fade. */
.poweroff.is-quiet {
  -webkit-transition: none;
          transition: none;
}

html.motion-off .poweroff {
  -webkit-transition: none;
          transition: none;
}

.poweroff__box {
  position: absolute;
  top: 50%; left: 0; right: 0;
  margin-top: -46px;
}

/* AMBER ON BLACK IN THE VGA FONT. The real one was drawn by the
   firmware after Windows had already gone, so it was text mode,
   and it was this colour. */
.poweroff--98 .poweroff__big {
  font-family: "VGA", "Lucida Console", Consolas, Monaco, monospace;
  font-size: 30px;
  line-height: 1.5;
  color: #ffa000;
  text-shadow: 0 0 14px rgba(255,160,0,.55);
}

.poweroff__word {
  font: normal 26px/1.3 "Selawik Light", "Selawik", "Segoe UI", sans-serif;
  color: #e8f2f8;
}

.poweroff__dim {
  margin-top: 26px;
  font: normal 11px/1.5 "Selawik", "Segoe UI", Tahoma, sans-serif;
  color: #5d6a74;
}

/* Nothing behind a stopped machine takes a key or a click. */
html.power-off body { overflow: hidden; }