body {
  font-family: helvetica;
  font-size: .7em;
  color: #222; }

ul, li {
  margin: 0px;
  padding: 0px; }

ul {
  margin-left: 22px;
  line-height: 1.3em; }

.block {
  margin: 20px 0 0 20px;
  width: 350px;
  height: 250px; }
  .block h3 {
    text-align: center; }

td {
  position: relative;
  z-index: 0;
  font-size: .5em; }
  td:hover {
    z-index: 100; }
  td svg {
    overflow: visible;
    width: 50px;
    height: 50px; }
  td text {
    -moz-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
    -webkit-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear;
    font-size: 3em;
    cursor: pointer; }
    td text.hidden {
      opacity: 0; }
  td circle {
    position: absolute;
    cursor: pointer;
    -moz-transition: r 0.3s ease-out, fill 0.3s ease-out 0s;
    -o-transition: r 0.3s ease-out, fill 0.3s ease-out 0s;
    -webkit-transition: r 0.3s ease-out, fill 0.3s ease-out 0s;
    transition: r 0.3s ease-out, fill 0.3s ease-out 0s; }
  td:hover circle {
    r: 40; }
  td.danger circle {
    fill: #d9534f;
    stroke: #d43f3a; }
  td.danger:hover circle {
    fill: #f4cecd; }
  td.danger text {
    fill: #d43f3a; }
  td.warning circle {
    fill: #f0ad4e;
    stroke: #eea236; }
  td.warning:hover circle {
    fill: #fceedb; }
  td.warning text {
    fill: #eea236; }
  td.safe circle {
    fill: #5cb85c;
    stroke: #4cae4c; }
  td.safe:hover circle {
    fill: #c7e6c7; }
  td.safe text {
    fill: #4cae4c; }

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