html { padding:0; }
body { margin:0; background:#AAAAAA; }
h1 { background:#7777AA; font-size:110%; font-family:sans-serif; color:#CCCCFF; margin-top:0; padding:0.2em; }
table { }
input, select { font-size:inherit; }

#blackboard { height:100%; /*border:medium solid grey;*/ padding:0; position:relative; }
div.blackboard { background:#225522; color:white; font-size:10mm; font-family:"Bradley Hand", Chalkduster, SteveHand, Purisa, "MarkerFelt-Thin", "Comic Sans MS", cursive; }
div.paper { background:white; color:black; font-size:10mm; font-family:"Times New Roman", serif; }
div.blackboard > * > * > #tacto-cursor { border-right:medium solid yellow; }
div.paper      > * > * > #tacto-cursor { border-right:medium solid blue; }
div.blackboard > * > * > .tacto-item[selected] { outline:1px dashed #77CC77; color:#FFAAFF; }
div.paper      > * > * > .tacto-item[selected] { outline:1px dashed #777777; color:#AA00AA; }
div.blackboard > #formula-display { color:#CCC; }
div.paper      > #formula-display { color:#CCC; }

div.palette { font-size:6mm; font-family:sans-serif; margin-bottom:0.2em; display:inline-block; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; }
div.palette > table { border-spacing:0; border-collapse:collapse; font-size:inherit; }
div.palette > table td { padding:0; margin:0; border:0; }
div.palette input { width:3em; height:2em; }

#formula-display { font-size:14pt; font-family:monospace; overflow:hidden; position:absolute; top:0; bottom:0; left:0; right:0; }
#formula-display > hr { border:thin solid grey; color:grey; }
#formula-display > div > math { font-size:200%; }

#palettes { display:inline; bottom:0; right:0; }
@media all and (orientation:portrait) {
    #palettes { max-width:100%; }
}
@media all and (orientation:landscape) {
    #palettes { display:inline-block; text-align:right; }
    #palettes > * { display:block; margin-bottom:0.5em; }
}
@media handheld {
    h1 { display:none; }
}
@media print {
    h1 { display:none !important; }
    div.controls, div.palette, #tacto-cursor { display:none !important; }
}