/** Dialog **/
.dialog { position: absolute; background: lightyellow; border: solid 1px black; padding: 10px; z-index: 100; display: none; }
.dialog h2 { margin: -10px -10px 0 -10px; border-bottom: solid 1px black; background: lightblue; padding: 2px 10px; }
.dialog .controls { text-align: right; }
.dialog div { margin-top: 0.5em; }
#modalBackdrop { z-index: 50; position: absolute; width: 100%; top: 0; left: 0; background: white; opacity: 0.7; filter:alpha(opacity=70);}
#modalMessage { position: absolute; text-align: center; top: 30%; left: 15%; width: 70%; font-size: 14pt;
	font-weight: bold; padding: 1em; background: white; border: solid 1px red; }
.dialog input[type=text] { width: 80%; margin-left: 10%; }
.dialog textarea { width: 80%; margin-left: 10%; display: block; height: 3em; }
.dialog select { width: 80%; margin-left: 10%; }

#check { display: none; }
.question { float: left; width: 5em; text-align: right; padding-right: 0.7em; }
.answer { float: left; margin-bottom: 1em; }
.computedAnswer { float: left; margin-left: 1em; color: green; font-weight: bold; }
.correct { color: green; }
.incorrect { color: red; }
.problem br { clear: left; }
.wordStatus { color: rgb(128,128,128); }
#stats { margin: auto; margin-bottom: 20px; display: none; width: 15em; border: solid 1px green; padding: 1em; background: rgb(128,255,128); }
#stats .val { display: inline; }
#stats label { width: 10em; display: -moz-inline-box; display: inline-block; }
#stats.statsFinished { font-weight: bold; border: solid 2px green; }
#stats br { clear: left; }
#generate { margin-bottom: 1em; }
#gameArea { margin: auto; border-collapse: collapse; margin-bottom: 2em; }
#gameArea td { padding: 0; }
#gameSetup { background: rgb(238,238,255); }
#gameArea #playGameHeader { border-bottom: solid 1px blue; padding: 0 1em; }
#playGameHeader a { text-decoration: none; }
#playGameHeader a:hover { color: green; font-weight: bold; }
.introNotes { width: 20em; margin: 1em auto; border: solid 1px orange; padding: 0.5em;
	background: rgb(255,241,202); }
#trainingArea { visibility: hidden; text-align: center; font-size: 18pt; }
#trainingArea #inResponse { font-size: 18pt; width: 10em; }
#problemMessage { font-size: 20pt; height: 2em; margin-top: 15px; text-align: center; }
.runningStatsGraphRow { height: 30px; }
.graphBar { position: absolute; bottom: 0; background: #f00; width: 5px; overflow: hidden; }
.graphBar.alt { background: #f77; }
.barSeparator { width: 1px; background: #000; }
#runningStats { display: none; }
#runningStats table { margin: auto; }
.runningGraph { position:relative; height: 22px; width: 70px; border-bottom: solid 1px #aaa; }
.runningStatsGraphRow td { vertical-align: bottom; }

#edeyeAttribution { text-align: right; font-style: italic; position: absolute; top: 5px; right: 5px; }