body {
    color: black;
    background-color: #f3f3f3;
}

#ready {
    text-decoration: none;
    font-size: xx-large;
    color: yellow;
    background-color: green;
    padding: .5em 1.5em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    border-radius: .8em;
}

.board {
    font-size: xx-large;
    text-align: center;
    line-height: 2;
    width: 18em;
}
.board > * {
    display: inline-block;
    width: 2em;
    height: 2em;
    margin: .1em;
    padding: .1em;
    border: 2px solid #333;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    background-color: #ccc;
    text-decoration: none;
}
/*
.board > * {
    display: block;
    float: left;
}
.board > *:nth-of-type(7n+1) {
    clear: left;
}
*/
.board > *:hover {
    border-color: #f96;
    background-color: #fec;
}
.board > *.open {
    border-color: #ccc;
    background-color: #eee;
    cursor: auto;
}
.board > *.used {
    cursor: auto;
}

.board > *.won {
    color: #060;
    background-color: #eef3ee;
}
.board > *.lost {
    color: #900;
    background-color: #eeeaee;
}
.board > *.used.won {
    border-color: #9f9;
    background-color: #cfc;
}
.board > *.used.lost {
    border-color: #c9c;
    background-color: #fcf;
}