body.pls {
  background-color: #202020;
  background: linear-gradient(to right, #101030, #303030, #101030);
}

/* -------------------------------------------------------------------------- *
 * Drawing the Game Grid
 * ---------------------
 *
 * pls-game: Game grid
 *
 * pls-sq5: One square in 5x5 grid
 *
 * pls-total: Result in top-left corner
 *
 * pls-attempt: Blue writing
 * pls-fixed: Grey writing in place of blue for single-square groups
 * pls-attempt5: Blue sizing info for 5x5 grid
 * pls-attempt4: Blue sizing info for 4x4 grid
 * pls-attempt3: Blue sizing info for 3x3 grid
 *
 * pls-note: One note in grid square
 * pls-note-wht: Hidden note in grid square
 * pls-note-grn: Green note in grid square
 * pls-note-red: Red note in grid square
 * -------------------------------------------------------------------------- */

div.pls-game {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 400px;
  height: 400px;
  border: none;
}

div.pls-sq5 {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 1px solid #404040;
  background-color: #404040;
}

div.pls-sq50x { top:    0px; }
div.pls-sq51x { top:   80px; }
div.pls-sq52x { top:  160px; }
div.pls-sq53x { top:  240px; }
div.pls-sq54x { top:  320px; }
div.pls-sq5x0 { left:   0px; }
div.pls-sq5x1 { left:  80px; }
div.pls-sq5x2 { left: 160px; }
div.pls-sq5x3 { left: 240px; }
div.pls-sq5x4 { left: 320px; }

div.pls-total {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 70px;
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  font-family: sans-serif;
  text-align: left;
  border: none;
  background-color: transparent;
  color: #e0e0e0;
  z-index: 2;
}

div.pls-attempt {
  position: absolute;
  width: 74px;
  height: 74px;
  line-height: 74px;
  margin: 1px;
  border: none;
  font-size: 36px;
  font-family: sans-serif;
  color: #8080ff;
  text-align: center;
  background-color: transparent;
}

div.pls-fixed {
  color: #c0c0c0;
}

div.pls-helpattempt {
  position: absolute;
  width: 74px;
  height: 74px;
  line-height: 74px;
  margin: 1px;
  border: none;
  font-size: 36px;
  font-family: sans-serif;
  color: #8080ff;
  text-align: center;
  background-color: transparent;
}

div.pls-helpsquare {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 1px solid #404040;
  background-color: #404040;
  z-index: 2;
}

/* -------------------------------------------------------------------------- *
 * pls-note
 * -------------------------------------------------------------------------- */
div.pls-note {
  position: absolute;
  width: 20px;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  font-family: sans-serif;
  text-align: left;
  border: none;
  background-color: transparent;
  z-index: 2;
}

div.pls-note-wht { color: #808080; visibility: hidden; }
div.pls-note-grn { color: #80ff80; visibility: visible; }
div.pls-note-red { color: #ff8080; font-style: italic; visibility: visible; }
div.pls-note50   { top: 52px; left: 4px; }
div.pls-note51   { top: 52px; left: 28px; }
div.pls-note52   { top: 52px; left: 52px; }
div.pls-note53   { top: 64px; left: 16px; }
div.pls-note54   { top: 64px; left: 40px; }

/* -------------------------------------------------------------------------- *
 * pls-numbers
 * -------------------------------------------------------------------------- */
div.pls-numbers {
  position: absolute;
  top: 43px;
  left: 470px;
  width: 80px;
  height: 400px;
  border: none;
}

div.pls-num-frame {
  position: absolute;
  width: 68px;
  height: 68px;
  line-height: 68px;
  border: 2px solid #101010;
  border-radius: 10px;
}

div.pls-num-frame0 { top:   0px; }
div.pls-num-frame1 { top:  80px; }
div.pls-num-frame2 { top: 160px; }
div.pls-num-frame3 { top: 240px; }
div.pls-num-frame4 { top: 320px; }

div.pls-num-btn {
  position: absolute;
  width: 66px;
  height: 66px;
  line-height: 66px;
  margin: 1px;
  border-radius: 10px;
  overflow: hidden;
  border: none;
  font-size: 36px;
  font-family: sans-serif;
  text-align: center;
  background-color: #404040;
  color: #e0e0e0;
}

div.pls-bkg-wht         { background-color: #404040; }
div.pls-bkg-fixed       { background-color: #a0a0a0; }
div.pls-bkg-impossible  { background-color: #a04000; }
div.pls-bkg-blumain     { background-color: #0000c0; }
div.pls-bkg-blugroup    { background-color: #000050; }
div.pls-bkg-grn         { background-color: #004000; }
div.pls-bkg-red         { background-color: #500000; }
div.pls-bkg-grn-wht     { background-image: url("img/grn-wht.png"); }
div.pls-bkg-grn-wht-red { background-image: url("img/grn-wht-red.png"); }
div.pls-bkg-wht-red     { background-image: url("img/wht-red.png"); }
div.pls-bkg-red-wht     { background-image: url("img/red-wht.png"); }
div.pls-bkg-red-wht-grn { background-image: url("img/red-wht-grn.png"); }
div.pls-bkg-wht-grn     { background-image: url("img/wht-grn.png"); }

/* -------------------------------------------------------------------------- *
 * pls-help
 * -------------------------------------------------------------------------- */
div.pls-help {
  position: absolute;
  font-family: sans-serif;
  border: none;
  display: none;
  overflow: hidden;
}

div.pls-commentblock {
  position: absolute;
  top: 40px;
  left: 680px;
  width: 300px;
  height: 370px;
  border: none;
  display: none;
  overflow: hidden;
}

span.pls-commentheading {
  font-family: sans-serif;
  font-size: 18px;
  color: #e0e0e0;
}

span.pls-comment {
  font-family: sans-serif;
  font-size: 14px;
  color: #e0e0e0;
}

span.pls-comment-narrow {
  width: 240px;
  display: inline-block;
}

a {
  color: #e0e0ff;
}

div.pls-tool-btn {
  position: absolute;
  overflow: hidden;
  left: 580px;
  width: 50px;
  height: 50px;
  margin: 0px;
  border: 2px solid #101010;
  border-radius: 10px;
}

div.pls-blupen-btn {
  top: 43px;
  background-image: url("img/icon-blue.png");
}

div.pls-bluoff-btn {
  top: 43px;
  background-image: url("img/icon-blue-deselected.png");
}

div.pls-grnpen-btn {
  top: 110px;
  background-image:url("img/icon-green.png");
}

div.pls-grnoff-btn {
  top: 110px;
  background-image:url("img/icon-green-deselected.png");
}

div.pls-redpen-btn {
  top: 177px;
  background-image: url("img/icon-red.png");
}

div.pls-redoff-btn {
  top: 177px;
  background-image: url("img/icon-red-deselected.png");
}

div.pls-undo-btn {
  top: 244px;
  background-image: url("img/icon-undo.png");
}

div.pls-undo-disabled-btn {
  top: 244px;
  background-image: url("img/icon-undo-disabled.png");
}

div.pls-redo-btn {
  top: 311px;
  background-image: url("img/icon-redo.png");
}

div.pls-redo-disabled-btn {
  top: 311px;
  background-image: url("img/icon-redo-disabled.png");
}

div.pls-reset-btn {
  top: 378px;
  background-image:url("img/icon-reset.png");
}

div.pls-help-btn {
  top: 43px;
  left: 930px;
  z-index: 10;
  background-image:url("img/icon-help.png");
}

img.notes-img {
  margin-top: 5px;
}

div.pls-border-t { border-top: 2px solid #101010; }
div.pls-border-l { border-left: 2px solid #101010; }
div.pls-border-b { border-bottom: 2px solid #101010; }
div.pls-border-r { border-right: 2px solid #101010; }

div.pls-border-tlr { border-top-left-radius: 10px; }
div.pls-border-trr { border-top-right-radius: 10px; }
div.pls-border-blr { border-bottom-left-radius: 10px; }
div.pls-border-brr { border-bottom-right-radius: 10px; }