/**
 * Style a dice using UTF-8 characters.
 */
.dice-utf8 .dice-1::after { content: "\2680"; }
.dice-utf8 .dice-2::after { content: "\2681"; }
.dice-utf8 .dice-3::after { content: "\2682"; }
.dice-utf8 .dice-4::after { content: "\2683"; }
.dice-utf8 .dice-5::after { content: "\2684"; }
.dice-utf8 .dice-6::after { content: "\2685"; }

.dice-utf8 {
    font-size: 32px;
}

/**
 * CSS sprite for a dice with six faces.
 */
.dice-sprite {
    display: inline-block;
    padding: 0;
    margin: 0 4px 0 0;
    width: 32px;
    height: 32px;
    background: url(dice-faces.jpg) no-repeat;
}

.dice-sprite.dice-1 { background-position: -160px 0; }
.dice-sprite.dice-2 { background-position: -128px 0; }
.dice-sprite.dice-3 { background-position: -96px 0; }
.dice-sprite.dice-4 { background-position: -64px 0; }
.dice-sprite.dice-5 { background-position: -32px 0; }
.dice-sprite.dice-6 { background-position: 0 0; }