main.css

body {
    font-family: tahoma;
    background: url("http://subtlepatterns.com/patterns/ps_neutral.png");
}

table {
    margin: auto;
    background: #FFF;
    border-collapse: collapse;
    background: #FFF;
}

tr:first-child {
    background: linear-gradient(to bottom, #FFF 50%, #f1f1f1);
}

th {
    padding: .5em 1em;
    white-space: nowrap;
}

th:nth-of-type(1) {
    border-top: .25em solid black;
}
th:nth-of-type(2) {
    color: green;
    border-top: .25em solid green;
}
th:nth-of-type(3) {
    color: orange;
    border-top: .25em solid orange;
}
th:nth-of-type(4) {
    color: red;
    border-top: .25em solid red;
}
th:nth-of-type(5),
th:nth-of-type(6),
th:nth-of-type(7) {
    color: blue;
    border-top: .25em solid blue;
}
th:nth-of-type(6),
th:nth-of-type(7) {
    color: lightblue;
    border-color: #99F;
}
th:nth-of-type(7) {
    border-color: #CCF;
}
th:nth-of-type(8) {
    color: #333;
    border-top: .25em solid #333;
}

td:nth-of-type(2) {
    color: green;
    background: rgb(250, 255, 250);
}
td:nth-of-type(3) {
    color: orange;
    background: rgb(255, 255, 250);
}
td:nth-of-type(4) {
    color: red;
    background: rgb(255, 250, 250);
}
td:nth-of-type(5),
td:nth-of-type(6),
td:nth-of-type(7) {
    color: blue;
    background: rgb(250,250,255);
}
td:nth-of-type(6),
td:nth-of-type(7) {
    color: lightblue;
}
td:nth-of-type(8) {
    color: #666;
    background: rgb(250,250,250);
}

td {
    border-right: 1px solid rgba(0,0,0,.05);
}

td:first-child, td:last-child {
    border-right: none;
}

td {
    width: 4em;
    padding: .5em 1em;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

td:first-child {
    width: auto;
    text-align: left;
}

input {
    display: block;
    margin: 1em auto;
    text-align: center;
}

p {
    font-size: .5em;
    text-align: center;
}