*,
*::before,
*::after, {
  box-sizing: border-box;
}

canvas {
  cursor: crosshair;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
}

#badge-creator {
  background: url('../img/gutter.png');
}

.wrapper { width: 490px; margin: 40px auto; }

.toolbar {
  width: 50px;
  color: #9e9e9e;
  float: right;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  background-color: #212121;
}

.toolbar li {
  cursor: pointer;
  line-height: 50px;
  display: block;
  text-align: center;
  transition: all .2s ease-in-out;
}

.toolbar li:hover,
.toolbar li.active {
  color: #fff;
}

table {
  width: 420px;
  margin-top: 10px;
  border-collapse: collapse;
}

td {
  width: 15px;
  height: 15px;
  cursor: pointer;
}