.box {
  float: left;
  width: 15px;
  height: 15px;
  margin: 5px;
  border-radius: 5px;
  display: inline;
  float: left;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.black{
    background: #000;
    color: #fff;
}
.grey {
    background: #ccc;
}

.highlight-blue {
    -webkit-box-shadow: inset 0 0 10px #00f;
    -moz-box-shadow: inset 0 0 10px #00f;
    box-shadow: inset 0 0 10px #00f;
}

.highlight-red {
    -webkit-box-shadow: inset 0 0 10px #f00;
    -moz-box-shadow: inset 0 0 10px #f00;
    box-shadow: inset 0 0 10px #f00;
}

.card-base
{
    border-radius: 25px;
    min-height: 50px;
    width: 60px;
    padding: 10px;
    margin: 2px;
    border: 2px solid black;
    box-sizing: content-box;
    font-family: 'Roboto', sans-serif;
}

.card-open
{
    cursor: pointer;
}

.card-open:hover
{
    -webkit-box-shadow: inset 0 0 20px #aaa;
    -moz-box-shadow: inset 0 0 20px #aaa;
    box-shadow: inset 0 0 20px #aaa;
}