html {
  color: #000000;
  background: #ddddff;
}

body {
  color: #000000;
  background: #ddddff;
  font-family: serif;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  font-weight: bold;
}

a:link {
  color: #000088;
  background: none;
}

a:visited {
  color: #550088;
  background: none;
}

a:active {
  color: #000088;
  background: none;
}

a:hover {
  color: #0000cc;
  background: none;
  text-decoration: underline;
}

a.invert {
  text-decoration: none;
  font-weight: bold;
}

a.invert:link {
  color: #9999ff;
  background: none;
}

a.invert:visited {
  color: #aa88ff;
  background: none;
}

a.invert:active {
  color: #bbbbff;
  background: none;
}

a.invert:hover {
  color: #bbbbff;
  background: none;
  text-decoration: underline;
}

/* headers */
h1 {
  font-family: sans-serif;
  font-weight: bold;
  font-size: large;
  letter-spacing: 0.75em;
  text-align: center;
  margin: 0;
  padding: 0;
}
h3 {
  color: #ddddff;
  background: #000099;
  font-family: sans-serif;
  font-variant: small-caps;
  text-align: center;
  margin: 0;
  padding: 0.125em;
}
h4 {
  font-family: sans-serif;
  font-weight: bold;
  font-size: small;
  text-align: left;
  margin: 0.125em 0.25em;
  padding: 0;
}
h5 {
  font-family: sans-serif;
  font-weight: bold;
  font-size: small;
  text-align: left;
  margin: 0em;
  padding: 0;
}
h6 {
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  margin: 0.5em;
}
h6.trivia {
  color: #666666;
  background: inherit;
  font-weight: normal;
}
h6.footer {
  clear: left;
  width: 100%;
  text-align: right;
}

div#main {
  width: 59em;
  margin: auto;
}
div#leftcol {
  width: 12em;
  float: left;
  margin: 0.25em;
  padding: 0;
}
div#maincol {
  width: 45em;
  float: left;
  margin: 0.25em;
  padding: 0;
}
div#footer {
  width: 57.5em;
  clear: left;
  margin: 0.25em 0;
  padding: 0;
}

div.col {
  color: #000000;
  background: #bbbbff;
  border-style: solid;
  border-color: #000099;
  border-width: 1px;
  width: 100%;
  margin: 0.25em;
  padding: 0;
}
div.bottom {
  margin: 0.25em;
  padding: 0;
}

/* tables */
table#body {
  margin: auto;
  border-collapse: separate;
  border-spacing: 0.5em;
}
td {
  vertical-align: top;
  margin: 0;
  padding: 0;
}
td.col {
  color: #000000;
  background: #bbbbff;
  border-style: solid;
  border-color: #000099;
  border-width: 1px;
  border-radius: 5px;
  width: 20em;
  margin: 0;
  padding: 0;
}
td.bottom {
  clear: left;
  text-align: center;
}

/* blocks */
div {
}
div.test {
  font-size: small;
  text-align: center;
  margin: 1em 0;
}
div.thumb {
  text-align: center;
  padding: 0;
  margin: 0;
}
div.chart {
  text-align: center;
  padding: 0;
  margin: 0.5em;
}

/* lists */
ul {
  margin: 0.25em 0;
  padding: 0 0.5em;
}
li {
  list-style-position: inside;
  list-style-type: square;
  margin: 0;
  padding: 0;
}
dl.news {
  color: inherit;
  background: #ddddff;
  vertical-align: top;
  margin: 0.5em;
  padding: 0;
}
dt.news {
  vertical-align: top;
  font-weight: bold;
  display: table-cell;
  width: 6em;
  margin: 0;
  padding: 0;
}
dd.news {
  margin: 0;
  padding: 0;
  display: table-cell;
}


/* images */
img {
  border: 0;
  vertical-align: middle;
}
img.thumb {
  background: #dddddd;
  color: inherit;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  margin: 0;
  padding: 3px;
}

/* misc */
pre.code {
  font-weight: bold;
  text-align: center;
  color: #00ff00;
  background: #000000;
  margin: 0;
  padding: 1em;
}

/* jpn */
div.j_link {
  width: 20em;
  color: #000000;
  background: #bbbbff;
  border-style: solid;
  border-color: #000099;
  border-width: 1px;
  min-width: 20em;
  margin: 0.25em;
  padding: 0;
  float: left;
}
h2.jpn {
  font-weight: bold;
  font-family: sans-serif;
}
dl.j_link {
  vertical-align: top;
  margin: 0.5em;
  padding: 0;
}
dt.j_link {
  vertical-align: top;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
dd.j_link {
  margin: 0 0 1em 0;
  padding: 0 0 0 2em;
  font-size: smaller;
}


/* kanji */
div.kanji_list {
  color: #000000;
  background: #bbbbff;
  
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  
  margin: 0.25em;
  padding: 0;
  
  float: left;
  clear: left;
  
  page-break-inside: avoid;
}

div.kanji_title {
  text-align: center;

  font-size: large;
  font-weight: bold;

  padding: 0;
  margin: 0.5em 0 0;
}

table.kanji {
  border-style: solid;
  border-color: #000099;
  border-width: 1px;
  border-collapse: collapse;
  
  background: #ddddff;
  
  font-weight: normal;

  margin: 0.5em;
  padding: 0.5em;
}

td.kanji {
  border-style: solid;
  border-color: #000099;
  border-width: 1px;
  
  text-align: center;
  vertical-align: middle;

  margin: 0;
  padding: 0.25em 1em;
}

td.kanji_kanji {
  width: 2em;
  font-size: xx-large;
}

td.kanji_yomi {
  width: 13em;
  text-align: left;
  vertical-align: top;
}

/* Kana */
div.kana_list {
  color: #000000;
  background: #bbbbff;
  
  border-style: solid;
  border-color: #000099;
  border-width: 1px;
  
  margin: 0.25em;
  padding: 0;
  
  float: left;
}

div.kana_title {
  text-align: center;
  font-variant: small-caps;

  font-size: large;
  font-weight: bold;

  padding: 0;
  margin: 0.5em 0 0;
}

div.kana_list table {
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  background: #ddddff;
  border-collapse: collapse;

  font-weight: normal;

  margin: 0.5em;
  padding: 0.5em;
}

div.kana_list td {
  border-style: solid;
  border-color: #000099;
  border-width: 1px;
  
  margin: 0;
  padding: 0.1em 0.5em;

  text-align: left;
  vertical-align: middle;
}

td.kana {
  width: 2.5em;
  height: 2.5em;
  padding: 0.1em;
  
  text-align: center;
}

div#keiken {
  margin: 0 auto;
  padding: 0;
  width: 150px;
  height: 240px;
}

