body {
    /* Don't let the buttons wrap. */
    white-space: pre;
    text-align: center;
}

/* Normalize Mozilla button styles. */
/* Also, remove the ugly dashed border on the text of buttons in Mozilla when clicked. */
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

button {
    width: 97px;
    margin: 3px;
    padding: 10px 0;
    font-size: 16px;
    
    border: 1px solid #8EC1DA;
    
    border-radius: 4px;
    
    background-color: rgba(0,0,200,.05);
    
    box-shadow: inset 0 1px 3px rgba(255,255,255,.5), inset 0 -15px 3px rgba(0,0,200,.05);
    
    color: #3985A8;
    
    text-shadow: 0 1px #FFF;
    
    outline: 0;
    
    cursor: pointer;

    /* Fade the background color on mouse down. */
    -webkit-transition: background-color .2s;
            transition: background-color .2s;
}

button:hover {
    background-color: rgba(0,0,200,.07);
}

/**
 * Emulate button pressing.
 */
button:active {
    padding: 10px 0 10px 2px;
    background-color: rgba(0,0,200,.12);
}

.showing_answer {
    background-color: rgba(0,0,200,.12)!important;
    font-weight: bold;
}