@font-face {
  font-family: YuzuPopA;
  src: url('Yuzu Pop A Light.ttf');
}

body {
  background-color:#DDD;
  margin:0;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

@media print {
  body { width:750px; }
  .noPrint { display:none; }
}

#header {
  background-color:#333;
}

#headcenter {
  background-color:#EEE;
  clear:both;
}

#center {
  background-color:#FFF;
  overflow: auto;
}

#center, #headcenter, #footer {
  width:750px;
  margin: 0 auto 0 auto;
  padding:10px;
}

#footer {
  margin-top:10px;
  font-size:12px;
  color:#555;
  text-align:center;
}

#japaneseinput {
  width:100%;
  min-width:100%;
  max-width:100%;
  height:50px;
  min-height:50px;
  float:left;
}

#ankiconnecterror {
  color:red;
  font-style:bold;
  font-size:16px;
  display:none;
}

h1 { margin:0 0 10px 0; font-size:36px; font-weight:500; }
h2 { margin: 15px 0 10px 0; }
h3 { padding: 15px 0 5px 0; margin: 0 0 0 0; }
h4 { margin: 15px 0 10px 0 }

hr { margin: 10px 0 10px 0; border: 0; border-top: 1px solid #eee; }

i { color:#777; }

.headertitle {
  font-weight:lighter;
  font-size:24px;
  color:#222;
  text-decoration:underline;
}

#navlinks {
  float:right;
  margin-right:10px;
}

#navlinks > a {
  text-decoration:none;
}

#navlinks > a:link { color:#333; }

#navlinks > a:visited { color:#969; }

#navlinks > a:hover { color:#C3C; }

.vsep {
  font-size:25px;
  color:#DDD;
  margin-left:8px;
  margin-right:8px;
}

.mincho, .fixedmincho { font-family:"HiraMinProN-W3", "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "MS Mincho", serif; }
.gothic, .fixedgothic { font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif; }
.handwritten, .fixedhandwritten { font-family: YuzuPopA; }
.fixedhandwritten { font-size:24px; }

.grid-container {
  grid-template-columns: repeat(30,15px) auto [grid-end];
  grid-template-rows: repeat(6,15px);
  -ms-grid-columns: 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 300px;
  -ms-grid-rows: 15px 15px 15px 15px 15px 15px;
  height:90px;
  grid-auto-flow: column;
}

.grid-container2 {
  grid-template-columns: repeat(18,15px) 95px [grid-end];
  grid-template-rows: repeat(6,15px);
  -ms-grid-columns: 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 95px;
  -ms-grid-rows: 15px 15px 15px 15px 15px 15px;
  height:90px;
  grid-auto-flow: column;
}

.grid-container3 {
  grid-template-columns: repeat(12,15px) [grid-end];
  grid-template-rows: repeat(5,15px);
  -ms-grid-columns: 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px;
  -ms-grid-rows: 15px 15px 15px 15px 15px;
  height:75px;
  grid-auto-flow: row;
}

.grid-container, .grid-container2, .grid-container3 {
  display: grid;
  grid-gap: 0px;
  padding:1px;
  border-bottom: 1px dotted rgba(0,0,0,0.3);
  border-right: 1px dotted rgba(0,0,0,0.3);
  page-break-inside: avoid;
  overflow:hidden;
  float:left;
}

.grid-container > div, .grid-container2 > div, .grid-container3 > div {
  text-align: center;
  padding:1px;
  align-items: center;
  border-top: 1px dotted rgba(0,0,0,0.3);
  border-left: 1px dotted rgba(0,0,0,0.3);
  /* color:rgba(0,0,0,0.2); */
}

.lcell {
  grid-column-end: span 6; -ms-grid-column-span: 6;
  grid-row-end: span 6; -ms-grid-row-span: 6;
  font-size:84px;
  line-height:88px;
}

.mcell {
  grid-column-end: span 3; -ms-grid-column-span: 3;
  grid-row-end: span 3; -ms-grid-row-span: 3;
  font-size:39px;
  line-height:43px;
}

.sline {
  grid-column-end: grid-end; /* maybe auto will work here for IE11? */
  grid-row-end: span 2; -ms-grid-row-span: 2;
  font-size:26px; 
  text-align: left !important;
  line-height:28px;
}

.grid-container3 .sline { 
  grid-column-start:1;
  -ms-grid-column-span:12;
}

.lcell img { height:88px; width:88px; }
.mcell img { height:43px; width:43px; }
.sline img { height:28px; width:28px; }

.strokediagram { opacity:0.6; }
.characterholder { opacity:0.2; }

/* Strict positioning fallback for IE10-11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .grid-container, .grid-container2, .grid-container3 { display: -ms-grid; }

  .grid-container .lcell:nth-child(1) { -ms-grid-column:1; -ms-grid-row:1; }
  .grid-container .lcell:nth-child(2) { -ms-grid-column:7; -ms-grid-row:1; }
  .grid-container .mcell:nth-child(3) { -ms-grid-column:13; -ms-grid-row:1; }
  .grid-container .mcell:nth-child(4) { -ms-grid-column:13; -ms-grid-row:4; }
  .grid-container .mcell:nth-child(5) { -ms-grid-column:16; -ms-grid-row:1; }
  .grid-container .mcell:nth-child(6) { -ms-grid-column:16; -ms-grid-row:4; }
  .grid-container .mcell:nth-child(7) { -ms-grid-column:19; -ms-grid-row:1; }
  .grid-container .mcell:nth-child(8) { -ms-grid-column:19; -ms-grid-row:4; }
  .grid-container .mcell:nth-child(9) { -ms-grid-column:22; -ms-grid-row:1; }
  .grid-container .mcell:nth-child(10) { -ms-grid-column:22; -ms-grid-row:4; }
  .grid-container .mcell:nth-child(11) { -ms-grid-column:25; -ms-grid-row:1; }
  .grid-container .mcell:nth-child(12) { -ms-grid-column:25; -ms-grid-row:4; }
  .grid-container .mcell:nth-child(13) { -ms-grid-column:28; -ms-grid-row:1; }
  .grid-container .mcell:nth-child(14) { -ms-grid-column:28; -ms-grid-row:4; }
  .grid-container .sline:nth-child(15) { -ms-grid-column:31; -ms-grid-row:1; }
  .grid-container .sline:nth-child(16) { -ms-grid-column:31; -ms-grid-row:3; }
  .grid-container .sline:nth-child(17) { -ms-grid-column:31; -ms-grid-row:5; }

  .grid-container2 .lcell:nth-child(1) { -ms-grid-column:1; -ms-grid-row:1; }
  .grid-container2 .mcell:nth-child(2) { -ms-grid-column:7; -ms-grid-row:1; }
  .grid-container2 .mcell:nth-child(3) { -ms-grid-column:7; -ms-grid-row:4; }
  .grid-container2 .mcell:nth-child(4) { -ms-grid-column:10; -ms-grid-row:1; }
  .grid-container2 .mcell:nth-child(5) { -ms-grid-column:10; -ms-grid-row:4; }
  .grid-container2 .mcell:nth-child(6) { -ms-grid-column:13; -ms-grid-row:1; }
  .grid-container2 .mcell:nth-child(7) { -ms-grid-column:13; -ms-grid-row:4; }
  .grid-container2 .mcell:nth-child(8) { -ms-grid-column:16; -ms-grid-row:1; }
  .grid-container2 .mcell:nth-child(9) { -ms-grid-column:16; -ms-grid-row:4; }
  .grid-container2 .sline:nth-child(10) { -ms-grid-column:19; -ms-grid-row:1; }
  .grid-container2 .sline:nth-child(11) { -ms-grid-column:19; -ms-grid-row:3; }
  .grid-container2 .sline:nth-child(12) { -ms-grid-column:19; -ms-grid-row:5; }

  .grid-container3 .mcell:nth-child(1) { -ms-grid-column:1; -ms-grid-row:1; }
  .grid-container3 .mcell:nth-child(2) { -ms-grid-column:4; -ms-grid-row:1; }
  .grid-container3 .mcell:nth-child(3) { -ms-grid-column:7; -ms-grid-row:1; }
  .grid-container3 .mcell:nth-child(4) { -ms-grid-column:10; -ms-grid-row:1; }
  .grid-container3 .sline:nth-child(5) { -ms-grid-column:1; -ms-grid-row:4; }
}