body {
  font-family: 'Amaranth', sans-serif; 
  margin: 0;
}

.questionOuter {
  background: #a0a0a0;
  width: 100%;
}

#question {
  padding-top: 40px;
  font-size: 40px;
  text-shadow: 2px 2px 4px #808080;
  padding-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  display: table;
}

#input {
  background: #eee;
  width: 100%;
}

#answer {
  width: 100%;
  background: #eee;
  border: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 30px;
  margin-left: auto;
  margin-right: auto;
  display: table;
  text-align: center;
}

#response {
  width: 100%;
}

#message {
  width: 100%;
}

#message > div {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
}

.correct,
.incorrect {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 30px;
  width: 100%;
  text-align: center;
}

.correct {
  background: #8f8;
}

.incorrect {
  background: #f88;
}

div#history,
div#explanation {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

table.syllabary {
  border-collapse: collapse;
}

table.syllabary td {
  padding: 12px;
  font-size: 14px;
  color: gray;
  border: 1px solid gray;
  text-align: center;
  width: 32px;
  height: 32px;
}

table.syllabary td div:first-child {
  color: black;
  font-size: 24px;
}

table.syllabary td.empty {
  background: #eee;
}

.answer-correct {
  color: red;
}

.answer-wrong {
  color: blue;
}

div#history table {
  border-collapse: collapse;
}

div#history table th,
div#history table td {
  padding: 8px;
  border: 1px solid gray;
}:

div#history table th {
  text-align: left;
}

/* Tooltip from http://jsfiddle.net/AndreaLigios/jtLbpy62/ */

[tooltip]:before {
  /* needed - do not touch */
  content: attr(tooltip);
  position: absolute;
  opacity: 0;
  
  /* customizable */
  transition: all 0.15s ease;
  color: #333;
  font-size: 12px;
background: yellow;
}

[tooltip]:hover:before {
  /* needed - do not touch */
  opacity: 1;
  
  /* customizable */
  margin-top: -20px;
}

[tooltip]:not([tooltip-persistent]):before {
  pointer-events: none;
}