/* ============================================================
   paint98.css  ::  MS Paint, the Windows 98 one
   ------------------------------------------------------------
   Everything js/paint.js puts inside its window. Every class is
   prefixed pt__ so none of it can reach anything else on the
   site, and nothing already defined elsewhere is touched: the
   two bevel helpers the tool buttons use, dt__raised and
   dt__sunk, are borrowed from css/desktop.css exactly as they
   are, because the pressed tool needs the same bevel as every
   other pressed thing on this desktop and a second copy of it
   here would be one to keep in step.

   WHAT MAKES THE PAINT WINDOW LOOK RIGHT

   1. THE TOOLBOX IS TWO COLUMNS. Not one, not a strip along the
      top. Small square buttons in a block down the left, and the
      pressed one is sunken. That block is the shape people
      picture when they picture Paint.

      Real Paint had sixteen of them in a 2 by 8 block. This has
      ten in a 2 by 5, because the two selection tools, the
      magnifier, text, curve and polygon are not implemented and
      are dropped rather than shown as dead buttons. Every square
      in this box does something.

   2. THE OPTIONS PANEL UNDER IT IS ALWAYS THERE, sunken, and
      often empty. Paint did not move the canvas about when you
      picked the pencil, it just left the panel blank.

      It shows ONE thing at a time: line widths, or fill styles,
      or nothing. Never two stacked, which overflowed the panel
      and made two of the three fill styles unclickable. See the
      note in selectTool in js/paint.js.

   3. THE PALETTE IS TWO ROWS OF FOURTEEN with the foreground
      and background colours shown to their left as two squares,
      overlapping, foreground in front.

   4. THE PAGE IS WHITE, IN A SUNKEN WELL, ON GREY. The grey
      field around it is not the page. Making the whole window
      white is the mistake that gives the game away.

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

   Safari 7 rules: no custom properties, no grid, no flexbox, no
   clamp, floats and absolute positioning, prefixes alongside
   the unprefixed properties.
   ============================================================ */

/* The frame. Every region inside is positioned against this one,
   so the window can be maximised and the picture stays put while
   the grey field around it grows. */
.pt {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #c0c0c0;
  color: #000000;
  font-family: "Selawik", "Segoe UI", Tahoma, "MS Sans Serif", sans-serif;
  font-size: 12px;

  /* dragging out a selection across a paint program is never
     what anybody meant to do */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pt a {
  color: #000000;
  text-decoration: none;
  cursor: url("../img/cursors/normal.png") 0 0, default;
}
.pt a:hover { text-decoration: none; color: #000000; }


/* ---------- the menu bar ---------------------------------------
   Twenty pixels and a single grey rule under it. The underlined
   first letter is period correct: 98 drew those all the time,
   the setting that hid them until you pressed Alt arrived later.
   Alt itself does nothing here. */
.pt__menu {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20px;
  padding: 0 2px;
  line-height: 20px;
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
}

/* Each menu title carries its own raised bevel, matching the
   Notepad menu bar over in css/desktop.css. Windows drew these
   flat until you touched them; carrying the bevel all the time is
   a deliberate departure, so that on a page full of things that
   are not pressable these read as things that are. */
.pt__menutop {
  display: inline-block;
  height: 18px;
  margin: 1px 1px 0 0;
  padding: 0 6px;
  line-height: 16px;
  vertical-align: top;
  background: #c0c0c0;

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

/* An open or hovered menu title goes navy and flat, which is what
   the real one did once the menu was actually down. */
.pt__menutop:hover,
.pt__menutop.is-on {
  background: #000080;
  color: #ffffff;
  border-color: #000080;
}
.pt__menutop:hover { color: #ffffff; }

.pt__menutop:active {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 0 5px 0 7px;
}


/* ---------- the drop downs --------------------------------------
   Built once and hidden, one shown at a time. The hard grey
   shadow under them is the 98 shadow: offset, opaque, no blur. */
.pt__drop {
  position: absolute;
  top: 21px;
  left: 0;
  z-index: 40;
  display: none;
  min-width: 132px;
  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 0 rgba(0,0,0,.35);
          box-shadow:
    inset 1px 1px 0 #dfdfdf,
    inset -1px -1px 0 #808080,
    2px 2px 0 rgba(0,0,0,.35);
}

.pt__drop.is-open { display: block; }

.pt__cmd {
  display: block;
  padding: 3px 22px 3px 18px;
  white-space: nowrap;
}
.pt__cmd:hover { background: #000080; color: #ffffff; }

.pt__sep {
  height: 0;
  margin: 3px 1px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
}


/* ---------- the toolbox -----------------------------------------
   Two columns of small square buttons. The width of the box is
   what puts two on a row and nothing else does, so it is not a
   number to change casually: 52 is two buttons of 22 plus their
   borders and their margins. */
.pt__tools {
  position: absolute;
  left: 2px;
  top: 24px;
  width: 52px;
}

.pt__tool {
  display: block;
  float: left;
  width: 22px;
  height: 20px;
  margin: 1px;
  background: #c0c0c0;
}

/* The selected tool is pressed in: the bevel comes from
   dt__sunk, and the face lightens. The real one dithered white
   into the face; a flat light grey reads the same at this size,
   which is the same trade the desktop icons make. */
.pt__tool.is-on { background: #dfdfdf; }

.pt__ico {
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px auto 0;

  /* the click belongs to the button, not to the drawing inside
     it, and this saves every handler having to walk back up */
  pointer-events: none;
}

/* a pressed button moves its face down and right one pixel */
.pt__tool.is-on .pt__ico {
  position: relative;
  left: 1px;
  top: 1px;
}


/* ---------- the tool options ------------------------------------
   Sunken, fixed, and empty for the pencil, the bucket and the
   eyedropper, which is exactly what Paint showed for those
   three. */
.pt__opts {
  position: absolute;
  left: 2px;
  top: 150px;
  width: 50px;
  height: 54px;
  overflow: hidden;
  background: #c0c0c0;

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

.pt__sizes,
.pt__styles { padding: 2px; }

.pt__size {
  display: block;
  height: 9px;
  padding: 1px 3px;
  margin-bottom: 1px;
}
.pt__size i {
  display: block;
  background: #000000;
}

/* Selected is drawn with an inset shadow and no border, on
   purpose: a border here would be two pixels the row does not
   have and every option under it would jump down when clicked. */
.pt__size.is-on,
.pt__style.is-on {
  background: #dfdfdf;
  -webkit-box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
          box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

.pt__style {
  display: block;
  height: 13px;
  padding: 1px 3px;
  margin-bottom: 1px;
}
.pt__sty {
  display: block;
  width: 20px;
  height: 9px;
  margin: 1px auto 0;
  border: 1px solid #000000;
}
.pt__sty--0 { background: #ffffff; }   /* outline only */
.pt__sty--1 { background: #c0c0c0; }   /* outline over the other colour */
.pt__sty--2 { background: #000000; }   /* solid, no outline */


/* ---------- the field the page sits on --------------------------- */
.pt__stage {
  position: absolute;
  left: 56px;
  top: 24px;
  right: 2px;
  bottom: 62px;
  overflow: auto;
  background: #c0c0c0;

  /* the well is an inline block, and an inline block sits on a
     text baseline, which would leave a few pixels of grey under
     it that look like a mistake */
  font-size: 0;
}

/* The sunken well. One pixel of padding so the inner black line
   of the bevel has somewhere to land: with no padding the canvas
   covers it and the well reads as a plain grey border. */
.pt__well {
  display: inline-block;
  margin: 5px;
  padding: 1px;
  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;
}

/* The two canvases are stacked here, exactly on top of one
   another: the committed picture underneath and the rubber band
   preview on top. The size is written in by paint.js, on the
   element and on the canvas attributes both, because if those
   two disagree the browser scales the bitmap and every
   coordinate lands somewhere else. */
.pt__paper {
  position: relative;
  font-size: 0;
  cursor: url("../img/cursors/precision.png") 15 16, crosshair;
}

.pt__cv {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.pt__cv--base { background: #ffffff; }


/* ---------- the colour palette -----------------------------------
   Two rows of fourteen, with the current pair to their left. */
.pt__pal {
  position: absolute;
  left: 0; right: 0;
  bottom: 22px;
  height: 40px;
  padding: 0 4px;
  background: #c0c0c0;
}

/* The foreground and background pair, overlapping, foreground in
   front. The two squares are the only readout of which colour
   each mouse button is holding. */
.pt__pair {
  position: relative;
  float: left;
  width: 28px;
  height: 28px;
  margin: 5px 10px 0 2px;
  background: #c0c0c0;

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

.pt__fgsq,
.pt__bgsq {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid #000000;
}
.pt__fgsq { left: 3px; top: 3px; background: #000000; }
.pt__bgsq { left: 11px; top: 11px; background: #ffffff; }

/* Fourteen swatches of seventeen pixels including their margins
   is 238, and that width is what breaks the rows. The clearing
   div in the middle of the list is what starts the second one. */
.pt__swatches {
  float: left;
  width: 238px;
  padding-top: 3px;
}

.pt__sw {
  display: block;
  float: left;
  width: 13px;
  height: 13px;
  margin: 1px;
  border: 1px solid #808080;
}

.pt__break {
  clear: both;
  height: 0;
  overflow: hidden;
}


/* ---------- the status bar ---------------------------------------
   Help on the left, the pointer position next, the size of
   whatever is being dragged on the right. Sunken cells on a grey
   strip. */
.pt__status {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 20px;
  padding: 1px 2px;
  background: #c0c0c0;
  font-size: 11px;
}

.pt__cell {
  display: block;
  height: 16px;
  padding: 1px 5px;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
  background: #c0c0c0;

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

.pt__cell--pos,
.pt__cell--size {
  float: right;
  width: 52px;
  margin-left: 2px;
}