body { font-family: sans-serif; }
a { color: #4a8; }
a:visited { color: #084; }
h2 { clear: both; font-family: sans-serif; }
.display { float: left; margin-right: 1em; margin-bottom: 1em }
#canvases { border: solid thin black; padding: 0; width: 436px; height: 436px;
  position: relative; min-width: 109px; min-height: 109px; cursor: pointer }
#highlights { opacity: 0.5 }
#canvases > canvas { position: absolute; top: 0; left: 0; width: 100%;
  height: 100% }
#strokes, #paused { position: absolute; bottom: 0; font-weight: bold; }
#strokes { left: 1em; }
#paused { right: 1em; }
#resize_handle { width: 32px; height: 32px; position: absolute; right: 0;
  bottom: 0; }
#resize_handle canvas { width: 100%; height: 100%; visibility: hidden }
#resize_handle:hover canvas { visibility: visible }
#info { border-collapse: collapse; }
#info tr:nth-child(odd) { background: #eee; }
#info tr td:first-child, #info .def { padding-right: 0.5em;
  font-weight: bold; white-space: nowrap }
td.char { font-size: 200% }
#info td { padding: 0.4em; }
#info ul { margin: 0; padding: 0 }
#info ul:not(.words), #info ul:not(.words) li { display: inline; }
#info ul:not(.words) li:after { content: ", "; }
#info ul:not(.words) li:last-child:after { content: ""; }
#info tr li:hover, li.hl { background-color: #ffd; }
#info tr li:hover a { color: #4a8; }
#info tr li:hover a:visited { color: #084; }
#info .count { font-size: smaller; padding-left: 0.5em; text-align: right; }
#data { display: none }
#transport_bar { margin-top: 1em; position: relative; }
#stroke_display { position: absolute; padding: 4px; line-height: 28px;
  background-color: #eef; }
#help_button { position: absolute; right: 0px }
.done { text-decoration: line-through; }
.progress { font-style: italic; }
.progress:after { content: " (in progress)" }
#back { position: absolute; top: 1em; right: 1em; }
#help { -moz-column-count: 3; -webkit-column-count: 3; clear: both;
  font-family: serif }
img.small { height: 1em; }
.words { list-style-type: none; }
.word.r, .word.lookup { font-size: small; }
.word.chars { display: none; }
.word.k a { color: black; }

#_top_banner { background-color: #4a8 }
#_logo { background-image: url("/static/img/shewolf_orange.png"); }
#canvas_warning { background-color: #f00; color: white; margin: -2em -2em 2em -2em;
  padding: .5em 2em; font-weight: bold; }
.warning { background-color: #f80; color: white; margin: -2em -2em 2em -2em;
  padding: .5em 2em; font-weight: bold; }
.more_less { color: #4a8; cursor: pointer; font-size: smaller;
  font-weight: bold; }
.others tr { background-color: white !important; }
.others td { padding-bottom: 2em !important; }