html {
/*     font-family: sans; */
}

@media only screen and (min-device-width: 480px) {
    #content {
        border: 1px solid gray;
        height: 600px;
        width: 1024px;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        min-width: 20%;
        max-width: 99%;
        min-height: 20%;
        max-height: 99%;
        padding: 10px;
        resize: both;
        overflow: auto;
    }

    #answerbuttons button {
        min-width: 7em;
    }
}

@media only screen and (max-device-width: 480px) {
    #content {
        left: 5px;
        right: 5px;
        bottom: 5px;
        top: 5px;
        position: fixed;
        overflow: auto;
    }
}

#review-page, #save-page {
    display: none;
}

#question, #answer {
    text-align: center;
    margin: 10px;
}

#flashcard {
    min-height: 8em;
}


#statusbar {
    display: table;
/*     table-layout: fixed; */
    width: 100%;
}

.statusbarleft {
    display: table-cell;
   text-align: left;
   vertical-align: middle;
}

.statusbarright {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

#sketch-border {
    border: 1px solid gray;
    position: relative;
}

#sketch {
    cursor: url(cursor.png) 6 6, auto;

}

#sketch-overlay {
    position:absolute;
    top:20px;
    left: 20px;
    z-index:-100;
}

#clearbutton {
    text-align: right;
}

#answerbuttons {
    margin-left: auto;
    margin-right: auto;
}

#answerbuttons td {
    text-align: center;
}