table {
    border-collapse: collapse;
}

td {
    width: 18px;
    height: 18px;
    border: 1px solid #a0a0a0;
    font-size: 0.5em;
    text-align: center;
    vertical-align: center;
}

td.highlighted {
    background-color: #ce567e;
    color: #fff;
}

td.stat0 {
    background-color: #fff;
    color: #404040;
  }
  td.stat10 {
    background-color: #e6b6cc;
    color: #fff;
  }
  td.stat20 {
    background-color: #d4a0b8;
    color: #fff;
  }
  td.stat30 {
    background-color: #c48ca6;
    color: #fff;
  }
  td.stat40 {
    background-color: #b47893;
    color: #fff;
  }
  td.stat50 {
    background-color: #a36481;
    color: #fff;
  }
  td.stat60 {
    background-color: #93506e;
    color: #fff;
  }
  td.stat70 {
    background-color: #833c5c;
    color: #fff;
  }
  td.stat80 {
    background-color: #73284a;
    color: #fff;
  }
  td.stat90 {
    background-color: #621437;
    color: #fff;
  }
  td.stat100 {
    background-color: #520025;
    color: #fff;
  }