body {
  background-color: #DDD;
}

span.perms {
  cursor: pointer;
}

tr.toggle th {
  cursor: pointer;
}

tr.toggle th:hover {
  color: #FF0 !important;
}

tr.toggle table {
  display: none;
}

.rtp_progcontainer {
  margin: 0 auto;
}

.rtp_progressbar {
  width: 500px;
  border: 1px solid #000;
  padding: 5px;
  margin: 0 auto;
  text-align: left;
  background-color: #FFF;
}

.rtp_progressbar div {
  background-color: #0A0;
  height: 20px;
}

.rtp_progcontainer h1 {
  font-size: 1.5em;
  color: #00F;
}

.question {
  font-size: 10em;
  text-align: center !important;
}

.jpkeyboard {
  border: 1px solid #000;
  -moz-box-shadow: 1px 1px 2px #000;
  -webkit-box-shadow: 1px 1px 2px #000;
  box-shadow: 1px 1px 2px #000;
  border-collapse: collapse;
  background-color: #DDD;
}

.jpkeyboard td,.jpkeyboard th {
  border: 1px solid #000;
  border-collapse: collapse;
  font-size: 2em;
  padding: 2px 5px;
  min-width: 75px;
  text-align: center;
}

.jpkeyboard td {
  cursor: pointer;
  background-color: #FFF;
}

.jpkeyboard th {
  background-color: #AAA;
  padding: 2px 5px;
}

tr.answerrow td {
  text-align: center !important;
  font-size: 2.5em !important;
}

tr.answerrow div {
  display: none;
  color: #0000FF;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

tr.romanizedrow td {
  text-align: center !important;
  font-size: 1em !important;
  font-style: italic;
}

.tabletraining tbody th {
  font-size: 4em;
  vertical-align: middle;
}

.tabletraining tr td:nth-child(2) {
  font-style: italic;
  vertical-align: middle;
}

.tabletraining tr td:nth-child(3) {
  font-size: 2.5em;
  vertical-align: middle;
}