@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html {
  height: 100%; }

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: 'Open Sans', sans-serif;
  font-size: 14pt;
  height: 100%;
  margin: 0px; }

#nav-container {
  background-color: #ddd; }
  #nav-container #nav {
    margin: auto;
    max-width: 770px;
    padding-left: 10px;
    padding-right: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100px; }

#main-container {
  background-color: #eee;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
  #main-container #main {
    margin: auto;
    max-width: 770px;
    padding-left: 10px;
    padding-right: 10px; }

#foot-container {
  background-color: #000; }
  #foot-container #foot {
    margin: auto;
    max-width: 770px;
    padding-left: 10px;
    padding-right: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    color: white;
    height: 100px; }

#sidebar {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  width: 400px;
  box-sizing: border-box; }
  #sidebar #sidebar-contents {
    position: relative;
    height: 100%;
    overflow: auto; }

@media screen and (max-width: 1250px) {
  #sidebar {
    display: none; } }

/* $menu-font-size: 80px */
/* $menu2-font-size: 50px */
/* $tagline-font-size: 20px */
/* $button1-font-size: 30px */
/* $button2-font-size: 20px */
/* $score-font-size: 50px */
/* $puzzle-box-font-size: 30px */
/* $puzzle-box2-font-size: 80px */
/* $checkmark-font-size: 40px */
/* $hud-font-size: 25px */
/* $record-font-size: 40px */
/* #glub */
/*   text-align: center */
/*   border: 2px solid black */
/*   width: 400px */
/*   height: 400px */
#render {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 98%;
  box-sizing: border-box; }

/* canvas */
/*   outline: none */
/* .layover-screen */
/*   @include center */
/*   position: absolute */
/*   width: 600px */
/*   height: 600px */
/*   background: white */
/*   opacity: 0.8 */
.glub {
  height: 100%;
  width: 100%;
  max-width: 700px;
  background: #f8f8f8;
  padding: 10px;
  font-family: monospace;
  outline: none; }

.menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.overlay {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  left: 0px;
  top: 0px;
  /* width: 600px */
  /* height: 600px */
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.8; }

.menu-puzzles {
  height: 100%;
  width: 100%; }

.menu-main {
  height: 100%;
  width: 100%; }
  .menu-main .menu-title {
    font-size: 40px;
    font-weight: bold;
    color: purple;
    padding: 50px; }
  .menu-main .tagline {
    text-align: center;
    font-size: 10px;
    font-style: italic;
    padding-bottom: 50px; }
  .menu-main .button {
    font-weight: bold;
    font-size: 15px;
    padding: 10px; }

.overlay-pause .button, .overlay-gameover .button, .overlay-victory .button {
  font-size: 10px; }

.overlay-pause .menu-score, .overlay-gameover .menu-score, .overlay-victory .menu-score {
  font-size: 25px;
  padding-bottom: 20px; }

.overlay-pause .menu-title {
  font-size: 40px;
  font-weight: bold;
  padding-bottom: 20px; }

.overlay-gameover .menu-title {
  color: red;
  font-size: 40px;
  font-weight: bold;
  padding-bottom: 20px; }

.overlay-victory .menu-title {
  color: green;
  font-size: 40px;
  font-weight: bold;
  padding-bottom: 20px; }

.overlay-lifelost .menu-title {
  color: black;
  font-size: 40px;
  font-weight: bold;
  padding-bottom: 20px; }

.overlay-lifelost .lives-remaining {
  font-size: 25px; }

.overlay-lifelost .lives-count {
  color: blue; }

.overlay-lifelost .lives-count.lives-count-0 {
  color: red; }

.button {
  cursor: pointer; }

.button:hover {
  color: purple;
  text-decoration: underline; }

.puzzle-boxes {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: monospace;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }

.puzzle-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  cursor: pointer;
  width: 100px;
  height: 100px;
  font-weight: bold;
  font-size: 15px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 20px;
  border: 8px solid #f8f8f8;
  background: #808;
  color: white; }

.puzzle-box.enabled:hover {
  position: relative;
  /* border: 8px solid #808 */
  /* background: #a0a */
  border: 0px;
  width: 116px;
  height: 116px;
  color: white;
  font-size: 40px; }

.puzzle-box.disabled {
  background-color: #aaa; }

.puzzle-box.beaten:after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  content: "✓";
  font-size: 20px;
  color: #0f0; }

.play-screen {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }

.play-area-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: middle;
  -webkit-align-items: middle;
      -ms-flex-align: middle;
          align-items: middle; }
  .play-area-container canvas {
    background: white; }

.hud {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  font-size: 12px; }

.hud.points {
  padding-bottom: 10px; }

.hud.controls {
  padding-top: 10px; }

.stat {
  font-family: monospace;
  margin-left: 50px; }

.stat > :first-child:after {
  content: ":";
  margin-right: 20px; }

.stat > :first-child {
  font-weight: bold; }

.stat.glubs > :first-child {
  color: orange; }

.stat.lives > :first-child {
  color: blue; }

.stat.score > :first-child {
  color: green; }

.zeroes {
  color: #ccc; }

.spacer {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.menu-highscores {
  height: 100%;
  width: 100%; }
  .menu-highscores .menu-title {
    font-weight: bold;
    font-size: 25px;
    color: purple; }
  .menu-highscores table {
    width: 70%;
    font-size: 15px;
    /* padding-top: 20px */
    padding-bottom: 20px;
    /* margin: auto */
    /* td.hs-name */
    /*   width: 50% */ }
    .menu-highscores table td.hs-score, .menu-highscores table td.nothing-score {
      /* width: 50% */
      text-align: right; }
    .menu-highscores table td.hs-score {
      color: blue;
      font-weight: bold; }
  .menu-highscores .button-hs, .menu-highscores .button-hlhs {
    display: inline-block;
    padding: 20px; }
  .menu-highscores .button-hlhs {
    font-weight: bold; }

.new-record, .new-high-score {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center; }
  .new-record .title, .new-high-score .title {
    font-size: 20px; }

.player-name {
  font-size: 15px;
  margin-bottom: 30px; }
  .player-name input.change-name {
    width: 200px; }

input.change-name {
  font-size: 15px;
  border: 0px;
  outline: 0px;
  border-bottom: 2px solid black;
  padding: 5px; }

.new-record .title {
  color: green;
  font-weight: bold; }

.new-high-score .title {
  color: purple;
  font-weight: bold; }

.control-buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 140px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.control-buttons-ud {
  height: 100%;
  width: 33%; }

.control-button {
  box-sizing: border-box;
  border: 2px solid black;
  font-size: 30px;
  /* width: 70px */
  /* height: 70px */ }

.left-button {
  background: cyan;
  height: 100%;
  width: 33%; }

.right-button {
  background: green;
  height: 100%;
  width: 33%; }

.up-button {
  background: pink;
  height: 50%; }

.down-button {
  background: yellow;
  height: 50%; }