button {
    border:1px solid #464c54;
    margin-bottom:2px;
    padding:2px;
}

button:hover {
    border:2px solid #464c54;
    padding:1px;
}

.tile {
    padding:1px;
    font-family:monospace;
    color:white;
    line-height:1.6;
}

.bucket {
    margin:2px;
}

.river {
    margin:2px;
    padding:4px;
}

.tile_n {
    background-color:hsl(240,50%,37.5%);
}

.tile_e {
    background-color:hsl(330,50%,37.5%);
}

.tile_w {
    background-color:hsl(150,50%,37.5%);
}

.tile_s {
    background-color:hsl(60,50%,37.5%);
}

.tile_hidden {
    background-color:#404040;
}

.delimiter {
    border:solid rgba(192,192,192,0.25);
    margin:0px 8px;
    border-width:0px 1px;
}

.outcome {
    margin:2px;
    padding:8px;
}

.replay {
    padding:8px;
    font-size:xx-small;
    line-height:0.1;
    color:#ccc;
}

.profile {
    position:absolute;
    right:0;
    margin-right:15px;
    color:white;
    font-family:sans-serif;
    font-weight:700;
    font-size:larger;
    overflow:hidden;
}

.score {
    font-family:monospace;
}

#cheatsheet {
    background-color:#dddddd;
    border:1px solid #464c54;
    margin-bottom:2px;
    padding:8px;
    position:absolute;
    right:8px;
    z-index:1;
}

#rule {
    background-color:#f8f8f8;
    border:1px solid #464c54;
    padding:8px;
}

#cheatsheet:hover {
    border:2px solid #464c54;
    padding:7px;
}