body,
html {
  margin: 0px;
  font-family: Verdana, tahoma, arial, helvetica, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  display: none;
}

#container {
  position: absolute;
  top: 42px;
  width: 700px;
  height: 556px;
  border: 1px solid black;
  overflow: hidden;
}

#draw-grid, #test-grid {
  position: absolute;
  width: 253px;
  height: 245px;
  /*    background-color: #ffaaaa; */
  background-image: url(grid_pink.png);
  text-align: center;
  padding-top: 11px;
  padding-left: 1px;
  overflow: hidden;
  /*    border: 4px solid #ffc9cb; */
  border-radius: 6px;
}

.flat#draw-grid, .flat#test-grid {
  position: absolute;
  width: 253px;
  height: 245px;
  /*    background-color: #ffaaaa; */
  background-image: url(grid_pink_flat.png);
  text-align: center;
  padding-top: 11px;
  padding-left: 1px;
  overflow: hidden;
  /*    border: 4px solid #ffc9cb; */
  border-radius: 6px;
}

#draw-message, #challenge-message {
  position: absolute;
  width: 276px;
  height: 34px;
  color: #000;
  font-size: 20px;
  text-align: center;
}

#speech {
  position: absolute;
  left: 48px;
  top: 16px;
  width: 580px;
  height: 72px;
  color: #000;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 8px;
  font-size: 26px;
  text-align: center;
  border: 1px solid black;
  border-radius: 18px;
}

#speech-link-back {
  position: absolute;
  margin-left: 412px;
  margin-top: 97px;
  width: 0;
  height: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 14px 0 14px;
  border-color: #000000 transparent transparent transparent;
}

#speech-link-front {
  position: absolute;
  margin-left: 412px;
  margin-top: 94px;
  width: 0;
  height: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 14px 0 14px;
  border-color: #ffffff transparent transparent transparent;
}

#challenge-message {
  left: 126px;
  top: 430px;
}

#draw-message {
  left: 432px;
  top: 430px;
}

#test-grid {
  left: 64px;
  top: 158px;
}

#draw-grid {
  left: 382px;
  top: 160px;
}

#draw-grid.blank {
  background: none;
}

#draw-grid.patterns {
  left: 42px;
  top: 88px;
}

#pattern-grid {
  position: absolute;
  left: 336px;
  top: 54px;
  width: 328px;
  height: 328px;
  background-color: #ffaaaa;
  border: 2px solid #ffc9cb;
}

#pattern-frame {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 65px;
  height: 65px;
  border: 1px solid #000;
}

.polyplot {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ffbbbb;
  text-align: center;
  border: 1px solid #eeadaa;
  border-radius: 6px;
}

.polyplot.on {
  background-color: #ffeebb;
}

#adversarial-monkey {
  position: absolute;
  left: 344px;
  top: 88px;
  width: 328px;
  height: 328px;
  background-image: url(adversarial_monkey_outlined.png);
  overflow: hidden;
}

#adversarial-monkey.unsure {
  background-image: url(adversarial_monkey_outlined_2.png);
}

#adversarial-monkey.proof {
  background-image: url(adversarial_monkey_outlined_3.png);
}

#adversarial-monkey.final {
  background-image: url(adversarial_monkey_outlined_4.png);
}

#adversarial-monkey.generosity {
  background-image: url(adversarial_monkey_outlined_5.png);
}

.row {
  float: left;
  width: 250px;
  height: 48px;
}

.cell {
  float: left;
  width: 37px;
  height: 37px;
  /*	background-color: #777; */
  margin-top: 1px;
  margin-left: 10px;
  border: 0.5px solid #444;
  border-radius: 20px;
}

.cell.secret {
  /*    background-color: #ee0202; */
  border: 0.5px solid #882222;
}

.cell.incorrect.v1 {
  background-image: url(cell_blue_1.png);
}

.cell.incorrect.v2 {
  background-image: url(cell_blue_2.png);
}

.cell.incorrect.v3 {
  background-image: url(cell_blue_3.png);
}

.cell.incorrect.v4 {
  background-image: url(cell_blue_4.png);
}

.cell.incorrect.v5 {
  background-image: url(cell_blue_5.png);
}

.cell.incorrect.v6 {
  background-image: url(cell_blue_6.png);
}

.cell.correct.v1 {
  background-image: url(cell_yellow_1.png);
}

.cell.correct.v2 {
  background-image: url(cell_yellow_1.png);
}

.cell.correct.v3 {
  background-image: url(cell_yellow_1.png);
}

.cell.correct.v4 {
  background-image: url(cell_yellow_1.png);
}

.cell.correct.v5 {
  background-image: url(cell_yellow_1.png);
}

.cell.correct.v6 {
  background-image: url(cell_yellow_1.png);
}

.cell.secret:hover {
  background: radial-gradient(#ff7799, #fa738d);
}

#draw-grid .cell.correct:hover {
  background: radial-gradient(#dd6600, #ffcc00);
}

#draw-grid .cell.selected {
  background: radial-gradient(#ff7799, #fa738d);
}

.tick {
  width: 37px;
  height: 37px;
  background-image: url(tick.png);
}

.cross {
  width: 37px;
  height: 37px;
  background-image: url(cross.png);
}

#instructions {
  position: absolute;
  left: 182px;
  top: 430px;
  width: 292px;
  height: 108px;
  padding-top: 8px;
  padding-left: 20px;
  padding-right: 20px;
  border: 0.5px solid #444;
  border-radius: 4px;
  font-size: 20px;
  background-color: #d4d4e8;
}

#instructions.short {
  height: 38px;
  text-align: center;
}

#restart-button, #guess-ready, #guess-confirm, #guess-cancel, #guess-button {
  position: absolute;
  width: 210px;
  height: 38px;
  padding-top: 12px;
  padding-left: 18px;
  font-size: 20px;
  border: 1px solid #020;
  border-radius: 14px;
  background-color: #7ec343;
  background-color: #a9db80;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a9db80), to(#96c56f));
  background-image: -webkit-linear-gradient(top, #a9db80, #96c56f);
  background-image: -moz-linear-gradient(top, #a9db80, #96c56f);
  background-image: -ms-linear-gradient(top, #a9db80, #96c56f);
  background-image: -o-linear-gradient(top, #a9db80, #96c56f);
  background-image: linear-gradient(to bottom, #a9db80);
}

#restart-button:hover, #guess-ready:hover, #guess-confirm:hover, #guess-button:hover {
  background-color: #5ea323;
}

#guess-button {
  left: 562px;
  top: 460px;
  width: 78px;
}

#guess-cancel {
  left: 64px;
  top: 460px;
  width: 44px;
  border: 1px solid #200;
  border-radius: 14px;
  background-color: #e4726e;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#db8980), to(#e4726e));
  background-image: -webkit-linear-gradient(top, #db8980, #e4726e);
  background-image: -moz-linear-gradient(top, #db8980, #e4726e);
  background-image: -ms-linear-gradient(top, # #db8980, #e4726e);
  background-image: -o-linear-gradient(top, # #db8980, #e4726e);
  background-image: linear-gradient(to bottom, #db8980);
}

#guess-cancel:hover {
  background-color: #c4524e;
}

#guess-confirm {
  left: 572px;
  top: 460px;
  width: 50px;
}

#guess-ready {
  left: 558px;
  top: 460px;
  width: 76px;
}

#restart-button {
  left: 540px;
  top: 460px;
  width: 118px;
}

#selection-box {
  position: absolute;
  border: 4px dashed #dd2;
  border-radius: 4px;
}

/*# sourceMappingURL=styles.css.map */