#stenoTable  { background: #eeeeee; }
.stenoLetter { background: #cccccc; }

.stenoLetter.pressed             { background: #ee0000; }
.stenoLetter.pressed.currPressed { background: red; }

.stenoLetter.shouldPress                     { background: blue; color: white; }
.stenoLetter.pressed.currPressed.shouldPress { background: lightgreen; }

.stenoLetter.pressed.prevPressed { background: lightgreen; }


#wpmDiv .ui-slider-range { background: #ef2929; }

#wpm { float: none }

.part { display: inline }

#wordTable {
    border: 1px solid black;
    text-align: center;
}

.stenoTable {
    text-align: center;
}

.activeStenoWord {
    background: #dddddd;
}

.activeStenoPart {
    background: lightgreen;
}

.okSpeed, .badSpeed, .slowSpeed {
    height: 0.5em;
    width: 0.5em;
    border: 1px solid black;
}

.okSpeed   { background: lightgreen; }
.badSpeed  { background: red; }
.slowSpeed { background: yellow; }


#stenoDiv div span.stenoAsIs {
    display: none;
}

#stenoDiv {
    position: absolute;
    top: 9.5em;
    bottom: 0em;
    overflow: auto;
}

#stenoDiv div.typable {
    display: inline-table;
    text-align: center;
    border: solid 0.1em;
    padding: 0.1em;
}

#stenoDiv div.typable.autogen {
    background: #eeeeee;
}

#stenoDiv div.typable.active {
    background: yellow;
    padding: 0em;
}

#stenoDiv div.typable.done {
    background: lightgreen;
}

#stenoDiv div.typable span.word, #stenoDiv div.typable span.steno, #stenoDiv div.typable span.xsteno {
    display: table-row;
}

.rndWord {
    background: #ddffdd;
}

#stenoDiv div.typable span.steno span.done, #stenoDiv div.typable span.xsteno span.done {
    color: green;
}

#stenoDiv div.typable span.steno span.part.active, #stenoDiv div.typable span.xsteno span.part.active {
    padding: 0.1em;
    margin: 0.3em;
    background: lightblue;
    font-weight: bold;
}


span.word, span.steno, span.xsteno { white-space: nowrap; }

/* note: remove this rule to make a separate xsteno part visible */
#stenoDiv div.typable span.xsteno {
    display: none;
}