ソースの表示

■ CSSpento.htm ■
<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート ペントミノ パズル</TITLE>

<STYLE TYPE="text/css">
<!--

@keyframes rotate1 {
  from {
    --rotate:-90deg;
  }
  to {
    --rotate:0deg;
  }
}

@keyframes rotate2 {
  from {
    --rotate:0deg;
  }
  to {
    --rotate:90deg;
  }
}

@keyframes rotate3 {
  from {
    --rotate:90deg;
  }
  to {
    --rotate:180deg;
  }
}

@keyframes rotate4 {
  from {
    --rotate:180deg;
  }
  to {
    --rotate:270deg;
  }
}

@property --mirror {
  syntax:'<number>';
  inherits:true;
  initial-value:0;
}

@property --rotate {
  syntax:'<angle>';
  inherits:true;
  initial-value:0deg;
}

body {
  text-align:center;
  background-color:#CCFFFF;
  user-select:none;
}

#title {
  color:#CC0000;
  font-weight:bold;
}

#rect-1, #rect-2, #rect-3, #rect-4 {
  margin-right:0;
}

.mirror, .rotate, .move {
  display:none;
}

#back {
  position:relative;
  width:481px;
  height:361px;
  margin-left:auto;
  margin-right:auto;
  background-color:white;
  border:solid 40px #F0F0F0;
  overflow:clip;
  overflow-clip-margin:40px;
}

#rect {
  position:absolute;
  background:linear-gradient(to bottom, gray 1px, transparent 1px 20px) 0 0 / 401px 20px repeat-y,
             linear-gradient(to right,  gray 1px, transparent 1px 20px) 0 0 / 20px 120px repeat-x;
}

#rect-1:checked ~ #back #rect {
  left:140px;
  top:120px;
  width:201px;
  height:121px;
}
#rect-2:checked ~ #back #rect {
  left:120px;
  top:120px;
  width:241px;
  height:101px;
}
#rect-3:checked ~ #back #rect {
  left:100px;
  top:140px;
  width:301px;
  height:81px;
}
#rect-4:checked ~ #back #rect {
  left:40px;
  top:140px;
  width:401px;
  height:61px;
}

/* 位置取得用 */
.cell {
  /* visibility で制御すると，非表示に戻したときマウスを動かすまでペントミノの :hover が発生しない */
  display:none;
  position:absolute;
  width:20px;
  height:20px;
  z-index:1;
}

.cx-00 {
  left:0;
}
.cx-01 {
  left:20px;
}
.cx-02 {
  left:40px;
}
.cx-03 {
  left:60px;
}
.cx-04 {
  left:80px;
}
.cx-05 {
  left:100px;
}
.cx-06 {
  left:120px;
}
.cx-07 {
  left:140px;
}
.cx-08 {
  left:160px;
}
.cx-09 {
  left:180px;
}
.cx-10 {
  left:200px;
}
.cx-11 {
  left:220px;
}
.cx-12 {
  left:240px;
}
.cx-13 {
  left:260px;
}
.cx-14 {
  left:280px;
}
.cx-15 {
  left:300px;
}
.cx-16 {
  left:320px;
}
.cx-17 {
  left:340px;
}
.cx-18 {
  left:360px;
}
.cx-19 {
  left:380px;
}
.cx-20 {
  left:400px;
}
.cx-21 {
  left:420px;
}
.cx-22 {
  left:440px;
}
.cx-23 {
  left:460px;
}

.cy-00 {
  top:0;
}
.cy-01 {
  top:20px;
}
.cy-02 {
  top:40px;
}
.cy-03 {
  top:60px;
}
.cy-04 {
  top:80px;
}
.cy-05 {
  top:100px;
}
.cy-06 {
  top:120px;
}
.cy-07 {
  top:140px;
}
.cy-08 {
  top:160px;
}
.cy-09 {
  top:180px;
}
.cy-10 {
  top:200px;
}
.cy-11 {
  top:220px;
}
.cy-12 {
  top:240px;
}
.cy-13 {
  top:260px;
}
.cy-14 {
  top:280px;
}
.cy-15 {
  top:300px;
}
.cy-16 {
  top:320px;
}
.cy-17 {
  top:340px;
}

/* ペントミノ */
.pent {
  position:absolute;

  transition:left 0s 10000s, top 0s 10000s;
}

#pent-F {
  left:40px;
  top:60px;
}
#pent-I {
  left:120px;
  top:40px;
}
#pent-L {
  left:180px;
  top:60px;
}
#pent-N {
  left:260px;
  top:60px;
}
#pent-P {
  left:340px;
  top:60px;
}
#pent-T {
  left:420px;
  top:60px;
}
#pent-U {
  left:40px;
  top:300px;
}
#pent-V {
  left:140px;
  top:300px;
}
#pent-W {
  left:200px;
  top:280px;
}
#pent-X {
  left:280px;
  top:280px;
}
#pent-Y {
  left:340px;
  top:280px;
}
#pent-Z {
  left:420px;
  top:280px;
}

/* ペントミノ形状 */
.shape {
  position:absolute;
  left:calc(var(--off-x) * -1);
  top: calc(var(--off-y) * -1);
  width:101px;
  height:101px;
  background-color:black;
  transform-origin:calc(var(--off-x) + 10.5px) calc(var(--off-y) + 10.5px);
  /* scale() でなく scale3d() を使っているのは，Opera で clip-path のエッジがぼけるのを防ぐため */
  transform:rotate(var(--rotate)) scale3d(var(--mirror), 1, 2);
  transition:--mirror 200ms;
  animation:200ms forwards;
}

.shape::before {
  position:absolute;
  left:0;
  top:0;
  width:101px;
  height:101px;
  content:"";
}

#shape-F {
  clip-path:polygon(20px 0, 61px 0, 61px 21px, 41px 21px, 41px 61px,
                    20px 61px, 20px 41px, 0 41px, 0 20px, 20px 20px);

  --off-x:20px;
  --off-y:20px;
}

#shape-F::before {
  background-color:#FF9999;

  clip-path:polygon(21px 1px, 60px 1px, 60px 20px, 40px 20px, 40px 60px,
                    21px 60px, 21px 40px, 1px 40px, 1px 21px, 21px 21px);
}

#shape-I {
  clip-path:polygon(0 0, 21px 0, 21px 101px, 0 101px);

  --off-x:0px;
  --off-y:40px;
  --mirror:1;
}

#shape-I::before {
  background-color:#99FF99;

  clip-path:polygon(1px 1px, 20px 1px, 20px 100px, 1px 100px);
}

#shape-L {
  clip-path:polygon(0 0, 21px 0, 21px 60px, 41px 60px, 41px 81px, 0 81px);

  --off-x:0px;
  --off-y:40px;
}

#shape-L::before {
  background-color:#FFFF99;

  clip-path:polygon(1px 1px, 20px 1px, 20px 61px, 40px 61px, 40px 80px, 1px 80px);
}

#shape-N {
  clip-path:polygon(0 0, 21px 0, 21px 40px, 41px 40px, 41px 81px, 20px 81px, 20px 61px, 0 61px);

  --off-x:0px;
  --off-y:40px;
}

#shape-N::before {
  background-color:#9999FF;

  clip-path:polygon(1px 1px, 20px 1px, 20px 41px, 40px 41px, 40px 80px, 21px 80px, 21px 60px, 1px 60px);
}

#shape-P {
  clip-path:polygon(0 0, 41px 0, 41px 41px, 21px 41px, 21px 61px, 0 61px);

  --off-x:0px;
  --off-y:20px;
}

#shape-P::before {
  background-color:#FF99FF;

  clip-path:polygon(1px 1px, 40px 1px, 40px 40px, 20px 40px, 20px 60px, 1px 60px);
}

#shape-T {
  clip-path:polygon(0 0, 61px 0, 61px 21px, 41px 21px, 41px 61px, 20px 61px, 20px 21px, 0 21px);

  --off-x:20px;
  --off-y:20px;
  --mirror:1;
}

#shape-T::before {
  background-color:#99FFFF;

  clip-path:polygon(1px 1px, 60px 1px, 60px 20px, 40px 20px, 40px 60px, 21px 60px, 21px 20px, 1px 20px);
}

#shape-U {
  clip-path:polygon(0 0, 21px 0, 21px 20px, 40px 20px, 40px 0, 61px 0, 61px 41px, 0 41px);

  --off-x:20px;
  --off-y:20px;
  --mirror:1;
}

#shape-U::before {
  background-color:#FFCC99;

  clip-path:polygon(1px 1px, 20px 1px, 20px 21px, 41px 21px, 41px 1px, 60px 1px, 60px 40px, 1px 40px);
}

#shape-V {
  clip-path:polygon(40px 0, 61px 0, 61px 61px, 0 61px, 0 40px, 40px 40px);

  --off-x:40px;
  --off-y:40px;
  --mirror:1;
}

#shape-V::before {
  background-color:#99CCFF;

  clip-path:polygon(41px 1px, 60px 1px, 60px 60px, 1px 60px, 1px 41px, 41px 41px);
}

#shape-W {
  clip-path:polygon(40px 0, 61px 0, 61px 41px, 41px 41px, 41px 61px,
                    0 61px, 0 40px, 20px 40px, 20px 20px, 40px 20px);

  --off-x:20px;
  --off-y:20px;
  --mirror:1;
}

#shape-W::before {
  background-color:#FF99CC;

  clip-path:polygon(41px 1px, 60px 1px, 60px 40px, 40px 40px, 40px 60px,
                    1px 60px, 1px 41px, 21px 41px, 21px 21px, 41px 21px);
}

#shape-X {
  clip-path:polygon(20px 0, 41px 0, 41px 20px, 61px 20px, 61px 41px, 41px 41px,
                    41px 61px, 20px 61px, 20px 41px, 0 41px, 0 20px, 20px 20px);

  --off-x:20px;
  --off-y:20px;
  --mirror:1;
  --rotate:0deg;
}

#shape-X::before {
  background-color:#99FFCC;

  clip-path:polygon(21px 1px, 40px 1px, 40px 21px, 60px 21px, 60px 40px, 40px 40px,
                    40px 60px, 21px 60px, 21px 40px, 1px 40px, 1px 21px, 21px 21px);
}

#shape-Y {
  clip-path:polygon(0 0, 21px 0, 21px 20px, 41px 20px, 41px 41px, 21px 41px, 21px 81px, 0 81px);

  --off-x:0px;
  --off-y:20px;
}

#shape-Y::before {
  background-color:#CC99FF;

  clip-path:polygon(1px 1px, 20px 1px, 20px 21px, 40px 21px, 40px 40px, 20px 40px, 20px 80px, 1px 80px);
}

#shape-Z {
  clip-path:polygon(0 0, 41px 0, 41px 40px, 61px 40px, 61px 61px, 20px 61px, 20px 21px, 0 21px);

  --off-x:20px;
  --off-y:20px;
}

#shape-Z::before {
  background-color:#CCFF99;

  clip-path:polygon(1px 1px, 40px 1px, 40px 41px, 60px 41px, 60px 60px, 21px 60px, 21px 20px, 1px 20px);
}

.mirror-s, .rotate-s, .move-h {
  position:absolute;
  width:19px;
  height:19px;
  transform:scale(var(--mirror), 1) rotate(calc(var(--rotate) * -1));
  visibility:hidden;
}

/* 反転アイコン */
.mirror-s {
  background-image:url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAPElEQVR42mNgGAAwnxhFTNS0kQWH+H8k\
NiMR4tR32ahho4bhAMiJ9j+JejES8NDwJiMR6vGqoarLBi8AAPsYBMXsC/rSAAAAAElFTkSuQmCC");
}

#shape-F .mirror-s {
  left:21px;
  top:1px;
}
#shape-L .mirror-s {
  left:1px;
  top:1px;
}
#shape-N .mirror-s {
  left:1px;
  top:1px;
}
#shape-P .mirror-s {
  left:1px;
  top:1px;
}
#shape-Y .mirror-s {
  left:1px;
  top:1px;
}
#shape-Z .mirror-s {
  left:1px;
  top:1px;
}

/* 回転アイコン */
.rotate-s {
  display:none;
  background-image:url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAqUlEQVR42mNgoBNwAWJBSg0BGTATiP8D\
8RkgVqLEoDNQg2D4LiUGukANQDbwDCVexubCDkrCDuS1d2gG4vUuMx6591DsiyT2A4j3UOJC5PC7i08h\
ExGGrUbzOs6IwOVNkAZtIJaCYhckuXtQmhMaDESB3QyogY+OXYg1COa6uzgMKifFIOQwQk8eM8kxCAZc\
kAzajU8hMxGGgQL8B9SVrlA2xYDszD7wAAA8UDmuW56Z8QAAAABJRU5ErkJggg==");
}

#shape-F .rotate-s {
  left:41px;
  top:1px;
}
#shape-I .rotate-s {
  left:1px;
  top:1px;
}
#shape-L .rotate-s {
  left:1px;
  top:21px;
}
#shape-N .rotate-s {
  left:1px;
  top:21px;
}
#shape-P .rotate-s {
  left:21px;
  top:1px;
}
#shape-T .rotate-s {
  left:1px;
  top:1px;
}
#shape-U .rotate-s {
  left:1px;
  top:1px;
}
#shape-V .rotate-s {
  left:41px;
  top:1px;
}
#shape-W .rotate-s {
  left:41px;
  top:1px;
}
#shape-Y .rotate-s {
  left:21px;
  top:21px;
}
#shape-Z .rotate-s {
  left:21px;
  top:1px;
}

/* 現在の回転状態に対応する回転アイコンを表示 */
.rotate-1:indeterminate                 ~ .shape label:nth-of-type(2),
.rotate-1:checked                       ~ .shape label:nth-of-type(2),
.rotate-2:checked                       ~ .shape label:nth-of-type(3).rotate-s,
.rotate-3:checked                       ~ .shape label:nth-of-type(4),
.pent input:nth-last-of-type(1):checked ~ .shape label:nth-of-type(1) {
  display:revert;
}

/* 移動アイコン */
.move-h {
  left:calc(var(--off-x) + 1px);
  top: calc(var(--off-y) + 1px);
  background-image:url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAbklEQVR42mNgoDPYD8UUg3og/g/F9ZQY\
ZI9kEAzb49PAiEfuPxl6CAKYqwgCJhxeI8YCvF5GDmxCLsMbKfsZMAObWAxPNkwMNAJU8yYM2JNgGN4I\
wAWIThpUTbT4IsCBSDGiAdUyOgxQrQgaOAAA7ow4SffZ5zIAAAAASUVORK5CYII=");
}

.shape:hover :is(.mirror-s, .rotate-s, .move-h) {
  visibility:visible;
}

:is(.mirror-s, .rotate-s, .move-h):hover {
  background-color:#00000020;
}

.mirror:not(:checked) ~ .shape {
  --mirror:1;
}
.mirror:checked ~ .shape {
  --mirror:-1;
}

.rotate-1:indeterminate ~ .shape {
  --rotate:0deg;
}

.rotate-1:checked ~ .shape {
  animation-name:rotate1;
}
.rotate-2:checked ~ .shape {
  animation-name:rotate2;
}
.rotate-3:checked ~ .shape {
  animation-name:rotate3;
}
.rotate-4:checked ~ .shape {
  animation-name:rotate4;
}

.mask {
  position:absolute;
  left:-100vw;
  top:-100vh;
  width:200vw;
  height:200vh;
  z-index:1;
  visibility:hidden;
}

:is(.mirror, .rotate):active ~ .mask {
  visibility:visible;
}
:is(.mirror, .rotate):active ~ .shape {
  z-index:1;
}

#move-F:active ~ #back .cell:hover ~ #pent-F,
#move-I:active ~ #back .cell:hover ~ #pent-I,
#move-L:active ~ #back .cell:hover ~ #pent-L,
#move-N:active ~ #back .cell:hover ~ #pent-N,
#move-P:active ~ #back .cell:hover ~ #pent-P,
#move-T:active ~ #back .cell:hover ~ #pent-T,
#move-U:active ~ #back .cell:hover ~ #pent-U,
#move-V:active ~ #back .cell:hover ~ #pent-V,
#move-W:active ~ #back .cell:hover ~ #pent-W,
#move-X:active ~ #back .cell:hover ~ #pent-X,
#move-Y:active ~ #back .cell:hover ~ #pent-Y,
#move-Z:active ~ #back .cell:hover ~ #pent-Z {
  transition:none;
}

.move:active ~ #back .cell {
  display:revert;
}

/* #dummy は詳細度を上げるため */
:is(#dummy, .cx-00):hover ~ .pent {
  left:0;
}
:is(#dummy, .cx-01):hover ~ .pent {
  left:20px;
}
:is(#dummy, .cx-02):hover ~ .pent {
  left:40px;
}
:is(#dummy, .cx-03):hover ~ .pent {
  left:60px;
}
:is(#dummy, .cx-04):hover ~ .pent {
  left:80px;
}
:is(#dummy, .cx-05):hover ~ .pent {
  left:100px;
}
:is(#dummy, .cx-06):hover ~ .pent {
  left:120px;
}
:is(#dummy, .cx-07):hover ~ .pent {
  left:140px;
}
:is(#dummy, .cx-08):hover ~ .pent {
  left:160px;
}
:is(#dummy, .cx-09):hover ~ .pent {
  left:180px;
}
:is(#dummy, .cx-10):hover ~ .pent {
  left:200px;
}
:is(#dummy, .cx-11):hover ~ .pent {
  left:220px;
}
:is(#dummy, .cx-12):hover ~ .pent {
  left:240px;
}
:is(#dummy, .cx-13):hover ~ .pent {
  left:260px;
}
:is(#dummy, .cx-14):hover ~ .pent {
  left:280px;
}
:is(#dummy, .cx-15):hover ~ .pent {
  left:300px;
}
:is(#dummy, .cx-16):hover ~ .pent {
  left:320px;
}
:is(#dummy, .cx-17):hover ~ .pent {
  left:340px;
}
:is(#dummy, .cx-18):hover ~ .pent {
  left:360px;
}
:is(#dummy, .cx-19):hover ~ .pent {
  left:380px;
}
:is(#dummy, .cx-20):hover ~ .pent {
  left:400px;
}
:is(#dummy, .cx-21):hover ~ .pent {
  left:420px;
}
:is(#dummy, .cx-22):hover ~ .pent {
  left:440px;
}
:is(#dummy, .cx-23):hover ~ .pent {
  left:460px;
}

:is(#dummy, .cy-00):hover ~ .pent {
  top:0;
}
:is(#dummy, .cy-01):hover ~ .pent {
  top:20px;
}
:is(#dummy, .cy-02):hover ~ .pent {
  top:40px;
}
:is(#dummy, .cy-03):hover ~ .pent {
  top:60px;
}
:is(#dummy, .cy-04):hover ~ .pent {
  top:80px;
}
:is(#dummy, .cy-05):hover ~ .pent {
  top:100px;
}
:is(#dummy, .cy-06):hover ~ .pent {
  top:120px;
}
:is(#dummy, .cy-07):hover ~ .pent {
  top:140px;
}
:is(#dummy, .cy-08):hover ~ .pent {
  top:160px;
}
:is(#dummy, .cy-09):hover ~ .pent {
  top:180px;
}
:is(#dummy, .cy-10):hover ~ .pent {
  top:200px;
}
:is(#dummy, .cy-11):hover ~ .pent {
  top:220px;
}
:is(#dummy, .cy-12):hover ~ .pent {
  top:240px;
}
:is(#dummy, .cy-13):hover ~ .pent {
  top:260px;
}
:is(#dummy, .cy-14):hover ~ .pent {
  top:280px;
}
:is(#dummy, .cy-15):hover ~ .pent {
  top:300px;
}
:is(#dummy, .cy-16):hover ~ .pent {
  top:320px;
}
:is(#dummy, .cy-17):hover ~ .pent {
  top:340px;
}

-->
</STYLE>

</HEAD>

<BODY>
<BR>
<DIV ID="title">スタイルシート ペントミノ パズル</DIV>
<BR>

<INPUT TYPE=RADIO NAME="rect" ID="rect-1" TABINDEX="-1" CHECKED><LABEL FOR="rect-1"> 6×10</LABEL>
<INPUT TYPE=RADIO NAME="rect" ID="rect-2" TABINDEX="-1"><LABEL FOR="rect-2"> 5×12</LABEL>
<INPUT TYPE=RADIO NAME="rect" ID="rect-3" TABINDEX="-1"><LABEL FOR="rect-3"> 4×15</LABEL>
<INPUT TYPE=RADIO NAME="rect" ID="rect-4" TABINDEX="-1"><LABEL FOR="rect-4"> 3×20</LABEL>
<BR><BR>

<INPUT TYPE=BUTTON ID="move-F" CLASS="move">
<INPUT TYPE=BUTTON ID="move-I" CLASS="move">
<INPUT TYPE=BUTTON ID="move-L" CLASS="move">
<INPUT TYPE=BUTTON ID="move-N" CLASS="move">
<INPUT TYPE=BUTTON ID="move-P" CLASS="move">
<INPUT TYPE=BUTTON ID="move-T" CLASS="move">
<INPUT TYPE=BUTTON ID="move-U" CLASS="move">
<INPUT TYPE=BUTTON ID="move-V" CLASS="move">
<INPUT TYPE=BUTTON ID="move-W" CLASS="move">
<INPUT TYPE=BUTTON ID="move-X" CLASS="move">
<INPUT TYPE=BUTTON ID="move-Y" CLASS="move">
<INPUT TYPE=BUTTON ID="move-Z" CLASS="move">

<DIV ID="back">
<DIV ID="rect"></DIV>

<DIV CLASS="cell cx-00 cy-00"></DIV>
<DIV CLASS="cell cx-01 cy-00"></DIV>
<DIV CLASS="cell cx-02 cy-00"></DIV>
<DIV CLASS="cell cx-03 cy-00"></DIV>
<DIV CLASS="cell cx-04 cy-00"></DIV>
<DIV CLASS="cell cx-05 cy-00"></DIV>
<DIV CLASS="cell cx-06 cy-00"></DIV>
<DIV CLASS="cell cx-07 cy-00"></DIV>
<DIV CLASS="cell cx-08 cy-00"></DIV>
<DIV CLASS="cell cx-09 cy-00"></DIV>
<DIV CLASS="cell cx-10 cy-00"></DIV>
<DIV CLASS="cell cx-11 cy-00"></DIV>
<DIV CLASS="cell cx-12 cy-00"></DIV>
<DIV CLASS="cell cx-13 cy-00"></DIV>
<DIV CLASS="cell cx-14 cy-00"></DIV>
<DIV CLASS="cell cx-15 cy-00"></DIV>
<DIV CLASS="cell cx-16 cy-00"></DIV>
<DIV CLASS="cell cx-17 cy-00"></DIV>
<DIV CLASS="cell cx-18 cy-00"></DIV>
<DIV CLASS="cell cx-19 cy-00"></DIV>
<DIV CLASS="cell cx-20 cy-00"></DIV>
<DIV CLASS="cell cx-21 cy-00"></DIV>
<DIV CLASS="cell cx-22 cy-00"></DIV>
<DIV CLASS="cell cx-23 cy-00"></DIV>
<DIV CLASS="cell cx-00 cy-01"></DIV>
<DIV CLASS="cell cx-01 cy-01"></DIV>
<DIV CLASS="cell cx-02 cy-01"></DIV>
<DIV CLASS="cell cx-03 cy-01"></DIV>
<DIV CLASS="cell cx-04 cy-01"></DIV>
<DIV CLASS="cell cx-05 cy-01"></DIV>
<DIV CLASS="cell cx-06 cy-01"></DIV>
<DIV CLASS="cell cx-07 cy-01"></DIV>
<DIV CLASS="cell cx-08 cy-01"></DIV>
<DIV CLASS="cell cx-09 cy-01"></DIV>
<DIV CLASS="cell cx-10 cy-01"></DIV>
<DIV CLASS="cell cx-11 cy-01"></DIV>
<DIV CLASS="cell cx-12 cy-01"></DIV>
<DIV CLASS="cell cx-13 cy-01"></DIV>
<DIV CLASS="cell cx-14 cy-01"></DIV>
<DIV CLASS="cell cx-15 cy-01"></DIV>
<DIV CLASS="cell cx-16 cy-01"></DIV>
<DIV CLASS="cell cx-17 cy-01"></DIV>
<DIV CLASS="cell cx-18 cy-01"></DIV>
<DIV CLASS="cell cx-19 cy-01"></DIV>
<DIV CLASS="cell cx-20 cy-01"></DIV>
<DIV CLASS="cell cx-21 cy-01"></DIV>
<DIV CLASS="cell cx-22 cy-01"></DIV>
<DIV CLASS="cell cx-23 cy-01"></DIV>
<DIV CLASS="cell cx-00 cy-02"></DIV>
<DIV CLASS="cell cx-01 cy-02"></DIV>
<DIV CLASS="cell cx-02 cy-02"></DIV>
<DIV CLASS="cell cx-03 cy-02"></DIV>
<DIV CLASS="cell cx-04 cy-02"></DIV>
<DIV CLASS="cell cx-05 cy-02"></DIV>
<DIV CLASS="cell cx-06 cy-02"></DIV>
<DIV CLASS="cell cx-07 cy-02"></DIV>
<DIV CLASS="cell cx-08 cy-02"></DIV>
<DIV CLASS="cell cx-09 cy-02"></DIV>
<DIV CLASS="cell cx-10 cy-02"></DIV>
<DIV CLASS="cell cx-11 cy-02"></DIV>
<DIV CLASS="cell cx-12 cy-02"></DIV>
<DIV CLASS="cell cx-13 cy-02"></DIV>
<DIV CLASS="cell cx-14 cy-02"></DIV>
<DIV CLASS="cell cx-15 cy-02"></DIV>
<DIV CLASS="cell cx-16 cy-02"></DIV>
<DIV CLASS="cell cx-17 cy-02"></DIV>
<DIV CLASS="cell cx-18 cy-02"></DIV>
<DIV CLASS="cell cx-19 cy-02"></DIV>
<DIV CLASS="cell cx-20 cy-02"></DIV>
<DIV CLASS="cell cx-21 cy-02"></DIV>
<DIV CLASS="cell cx-22 cy-02"></DIV>
<DIV CLASS="cell cx-23 cy-02"></DIV>
<DIV CLASS="cell cx-00 cy-03"></DIV>
<DIV CLASS="cell cx-01 cy-03"></DIV>
<DIV CLASS="cell cx-02 cy-03"></DIV>
<DIV CLASS="cell cx-03 cy-03"></DIV>
<DIV CLASS="cell cx-04 cy-03"></DIV>
<DIV CLASS="cell cx-05 cy-03"></DIV>
<DIV CLASS="cell cx-06 cy-03"></DIV>
<DIV CLASS="cell cx-07 cy-03"></DIV>
<DIV CLASS="cell cx-08 cy-03"></DIV>
<DIV CLASS="cell cx-09 cy-03"></DIV>
<DIV CLASS="cell cx-10 cy-03"></DIV>
<DIV CLASS="cell cx-11 cy-03"></DIV>
<DIV CLASS="cell cx-12 cy-03"></DIV>
<DIV CLASS="cell cx-13 cy-03"></DIV>
<DIV CLASS="cell cx-14 cy-03"></DIV>
<DIV CLASS="cell cx-15 cy-03"></DIV>
<DIV CLASS="cell cx-16 cy-03"></DIV>
<DIV CLASS="cell cx-17 cy-03"></DIV>
<DIV CLASS="cell cx-18 cy-03"></DIV>
<DIV CLASS="cell cx-19 cy-03"></DIV>
<DIV CLASS="cell cx-20 cy-03"></DIV>
<DIV CLASS="cell cx-21 cy-03"></DIV>
<DIV CLASS="cell cx-22 cy-03"></DIV>
<DIV CLASS="cell cx-23 cy-03"></DIV>
<DIV CLASS="cell cx-00 cy-04"></DIV>
<DIV CLASS="cell cx-01 cy-04"></DIV>
<DIV CLASS="cell cx-02 cy-04"></DIV>
<DIV CLASS="cell cx-03 cy-04"></DIV>
<DIV CLASS="cell cx-04 cy-04"></DIV>
<DIV CLASS="cell cx-05 cy-04"></DIV>
<DIV CLASS="cell cx-06 cy-04"></DIV>
<DIV CLASS="cell cx-07 cy-04"></DIV>
<DIV CLASS="cell cx-08 cy-04"></DIV>
<DIV CLASS="cell cx-09 cy-04"></DIV>
<DIV CLASS="cell cx-10 cy-04"></DIV>
<DIV CLASS="cell cx-11 cy-04"></DIV>
<DIV CLASS="cell cx-12 cy-04"></DIV>
<DIV CLASS="cell cx-13 cy-04"></DIV>
<DIV CLASS="cell cx-14 cy-04"></DIV>
<DIV CLASS="cell cx-15 cy-04"></DIV>
<DIV CLASS="cell cx-16 cy-04"></DIV>
<DIV CLASS="cell cx-17 cy-04"></DIV>
<DIV CLASS="cell cx-18 cy-04"></DIV>
<DIV CLASS="cell cx-19 cy-04"></DIV>
<DIV CLASS="cell cx-20 cy-04"></DIV>
<DIV CLASS="cell cx-21 cy-04"></DIV>
<DIV CLASS="cell cx-22 cy-04"></DIV>
<DIV CLASS="cell cx-23 cy-04"></DIV>
<DIV CLASS="cell cx-00 cy-05"></DIV>
<DIV CLASS="cell cx-01 cy-05"></DIV>
<DIV CLASS="cell cx-02 cy-05"></DIV>
<DIV CLASS="cell cx-03 cy-05"></DIV>
<DIV CLASS="cell cx-04 cy-05"></DIV>
<DIV CLASS="cell cx-05 cy-05"></DIV>
<DIV CLASS="cell cx-06 cy-05"></DIV>
<DIV CLASS="cell cx-07 cy-05"></DIV>
<DIV CLASS="cell cx-08 cy-05"></DIV>
<DIV CLASS="cell cx-09 cy-05"></DIV>
<DIV CLASS="cell cx-10 cy-05"></DIV>
<DIV CLASS="cell cx-11 cy-05"></DIV>
<DIV CLASS="cell cx-12 cy-05"></DIV>
<DIV CLASS="cell cx-13 cy-05"></DIV>
<DIV CLASS="cell cx-14 cy-05"></DIV>
<DIV CLASS="cell cx-15 cy-05"></DIV>
<DIV CLASS="cell cx-16 cy-05"></DIV>
<DIV CLASS="cell cx-17 cy-05"></DIV>
<DIV CLASS="cell cx-18 cy-05"></DIV>
<DIV CLASS="cell cx-19 cy-05"></DIV>
<DIV CLASS="cell cx-20 cy-05"></DIV>
<DIV CLASS="cell cx-21 cy-05"></DIV>
<DIV CLASS="cell cx-22 cy-05"></DIV>
<DIV CLASS="cell cx-23 cy-05"></DIV>
<DIV CLASS="cell cx-00 cy-06"></DIV>
<DIV CLASS="cell cx-01 cy-06"></DIV>
<DIV CLASS="cell cx-02 cy-06"></DIV>
<DIV CLASS="cell cx-03 cy-06"></DIV>
<DIV CLASS="cell cx-04 cy-06"></DIV>
<DIV CLASS="cell cx-05 cy-06"></DIV>
<DIV CLASS="cell cx-06 cy-06"></DIV>
<DIV CLASS="cell cx-07 cy-06"></DIV>
<DIV CLASS="cell cx-08 cy-06"></DIV>
<DIV CLASS="cell cx-09 cy-06"></DIV>
<DIV CLASS="cell cx-10 cy-06"></DIV>
<DIV CLASS="cell cx-11 cy-06"></DIV>
<DIV CLASS="cell cx-12 cy-06"></DIV>
<DIV CLASS="cell cx-13 cy-06"></DIV>
<DIV CLASS="cell cx-14 cy-06"></DIV>
<DIV CLASS="cell cx-15 cy-06"></DIV>
<DIV CLASS="cell cx-16 cy-06"></DIV>
<DIV CLASS="cell cx-17 cy-06"></DIV>
<DIV CLASS="cell cx-18 cy-06"></DIV>
<DIV CLASS="cell cx-19 cy-06"></DIV>
<DIV CLASS="cell cx-20 cy-06"></DIV>
<DIV CLASS="cell cx-21 cy-06"></DIV>
<DIV CLASS="cell cx-22 cy-06"></DIV>
<DIV CLASS="cell cx-23 cy-06"></DIV>
<DIV CLASS="cell cx-00 cy-07"></DIV>
<DIV CLASS="cell cx-01 cy-07"></DIV>
<DIV CLASS="cell cx-02 cy-07"></DIV>
<DIV CLASS="cell cx-03 cy-07"></DIV>
<DIV CLASS="cell cx-04 cy-07"></DIV>
<DIV CLASS="cell cx-05 cy-07"></DIV>
<DIV CLASS="cell cx-06 cy-07"></DIV>
<DIV CLASS="cell cx-07 cy-07"></DIV>
<DIV CLASS="cell cx-08 cy-07"></DIV>
<DIV CLASS="cell cx-09 cy-07"></DIV>
<DIV CLASS="cell cx-10 cy-07"></DIV>
<DIV CLASS="cell cx-11 cy-07"></DIV>
<DIV CLASS="cell cx-12 cy-07"></DIV>
<DIV CLASS="cell cx-13 cy-07"></DIV>
<DIV CLASS="cell cx-14 cy-07"></DIV>
<DIV CLASS="cell cx-15 cy-07"></DIV>
<DIV CLASS="cell cx-16 cy-07"></DIV>
<DIV CLASS="cell cx-17 cy-07"></DIV>
<DIV CLASS="cell cx-18 cy-07"></DIV>
<DIV CLASS="cell cx-19 cy-07"></DIV>
<DIV CLASS="cell cx-20 cy-07"></DIV>
<DIV CLASS="cell cx-21 cy-07"></DIV>
<DIV CLASS="cell cx-22 cy-07"></DIV>
<DIV CLASS="cell cx-23 cy-07"></DIV>
<DIV CLASS="cell cx-00 cy-08"></DIV>
<DIV CLASS="cell cx-01 cy-08"></DIV>
<DIV CLASS="cell cx-02 cy-08"></DIV>
<DIV CLASS="cell cx-03 cy-08"></DIV>
<DIV CLASS="cell cx-04 cy-08"></DIV>
<DIV CLASS="cell cx-05 cy-08"></DIV>
<DIV CLASS="cell cx-06 cy-08"></DIV>
<DIV CLASS="cell cx-07 cy-08"></DIV>
<DIV CLASS="cell cx-08 cy-08"></DIV>
<DIV CLASS="cell cx-09 cy-08"></DIV>
<DIV CLASS="cell cx-10 cy-08"></DIV>
<DIV CLASS="cell cx-11 cy-08"></DIV>
<DIV CLASS="cell cx-12 cy-08"></DIV>
<DIV CLASS="cell cx-13 cy-08"></DIV>
<DIV CLASS="cell cx-14 cy-08"></DIV>
<DIV CLASS="cell cx-15 cy-08"></DIV>
<DIV CLASS="cell cx-16 cy-08"></DIV>
<DIV CLASS="cell cx-17 cy-08"></DIV>
<DIV CLASS="cell cx-18 cy-08"></DIV>
<DIV CLASS="cell cx-19 cy-08"></DIV>
<DIV CLASS="cell cx-20 cy-08"></DIV>
<DIV CLASS="cell cx-21 cy-08"></DIV>
<DIV CLASS="cell cx-22 cy-08"></DIV>
<DIV CLASS="cell cx-23 cy-08"></DIV>
<DIV CLASS="cell cx-00 cy-09"></DIV>
<DIV CLASS="cell cx-01 cy-09"></DIV>
<DIV CLASS="cell cx-02 cy-09"></DIV>
<DIV CLASS="cell cx-03 cy-09"></DIV>
<DIV CLASS="cell cx-04 cy-09"></DIV>
<DIV CLASS="cell cx-05 cy-09"></DIV>
<DIV CLASS="cell cx-06 cy-09"></DIV>
<DIV CLASS="cell cx-07 cy-09"></DIV>
<DIV CLASS="cell cx-08 cy-09"></DIV>
<DIV CLASS="cell cx-09 cy-09"></DIV>
<DIV CLASS="cell cx-10 cy-09"></DIV>
<DIV CLASS="cell cx-11 cy-09"></DIV>
<DIV CLASS="cell cx-12 cy-09"></DIV>
<DIV CLASS="cell cx-13 cy-09"></DIV>
<DIV CLASS="cell cx-14 cy-09"></DIV>
<DIV CLASS="cell cx-15 cy-09"></DIV>
<DIV CLASS="cell cx-16 cy-09"></DIV>
<DIV CLASS="cell cx-17 cy-09"></DIV>
<DIV CLASS="cell cx-18 cy-09"></DIV>
<DIV CLASS="cell cx-19 cy-09"></DIV>
<DIV CLASS="cell cx-20 cy-09"></DIV>
<DIV CLASS="cell cx-21 cy-09"></DIV>
<DIV CLASS="cell cx-22 cy-09"></DIV>
<DIV CLASS="cell cx-23 cy-09"></DIV>
<DIV CLASS="cell cx-00 cy-10"></DIV>
<DIV CLASS="cell cx-01 cy-10"></DIV>
<DIV CLASS="cell cx-02 cy-10"></DIV>
<DIV CLASS="cell cx-03 cy-10"></DIV>
<DIV CLASS="cell cx-04 cy-10"></DIV>
<DIV CLASS="cell cx-05 cy-10"></DIV>
<DIV CLASS="cell cx-06 cy-10"></DIV>
<DIV CLASS="cell cx-07 cy-10"></DIV>
<DIV CLASS="cell cx-08 cy-10"></DIV>
<DIV CLASS="cell cx-09 cy-10"></DIV>
<DIV CLASS="cell cx-10 cy-10"></DIV>
<DIV CLASS="cell cx-11 cy-10"></DIV>
<DIV CLASS="cell cx-12 cy-10"></DIV>
<DIV CLASS="cell cx-13 cy-10"></DIV>
<DIV CLASS="cell cx-14 cy-10"></DIV>
<DIV CLASS="cell cx-15 cy-10"></DIV>
<DIV CLASS="cell cx-16 cy-10"></DIV>
<DIV CLASS="cell cx-17 cy-10"></DIV>
<DIV CLASS="cell cx-18 cy-10"></DIV>
<DIV CLASS="cell cx-19 cy-10"></DIV>
<DIV CLASS="cell cx-20 cy-10"></DIV>
<DIV CLASS="cell cx-21 cy-10"></DIV>
<DIV CLASS="cell cx-22 cy-10"></DIV>
<DIV CLASS="cell cx-23 cy-10"></DIV>
<DIV CLASS="cell cx-00 cy-11"></DIV>
<DIV CLASS="cell cx-01 cy-11"></DIV>
<DIV CLASS="cell cx-02 cy-11"></DIV>
<DIV CLASS="cell cx-03 cy-11"></DIV>
<DIV CLASS="cell cx-04 cy-11"></DIV>
<DIV CLASS="cell cx-05 cy-11"></DIV>
<DIV CLASS="cell cx-06 cy-11"></DIV>
<DIV CLASS="cell cx-07 cy-11"></DIV>
<DIV CLASS="cell cx-08 cy-11"></DIV>
<DIV CLASS="cell cx-09 cy-11"></DIV>
<DIV CLASS="cell cx-10 cy-11"></DIV>
<DIV CLASS="cell cx-11 cy-11"></DIV>
<DIV CLASS="cell cx-12 cy-11"></DIV>
<DIV CLASS="cell cx-13 cy-11"></DIV>
<DIV CLASS="cell cx-14 cy-11"></DIV>
<DIV CLASS="cell cx-15 cy-11"></DIV>
<DIV CLASS="cell cx-16 cy-11"></DIV>
<DIV CLASS="cell cx-17 cy-11"></DIV>
<DIV CLASS="cell cx-18 cy-11"></DIV>
<DIV CLASS="cell cx-19 cy-11"></DIV>
<DIV CLASS="cell cx-20 cy-11"></DIV>
<DIV CLASS="cell cx-21 cy-11"></DIV>
<DIV CLASS="cell cx-22 cy-11"></DIV>
<DIV CLASS="cell cx-23 cy-11"></DIV>
<DIV CLASS="cell cx-00 cy-12"></DIV>
<DIV CLASS="cell cx-01 cy-12"></DIV>
<DIV CLASS="cell cx-02 cy-12"></DIV>
<DIV CLASS="cell cx-03 cy-12"></DIV>
<DIV CLASS="cell cx-04 cy-12"></DIV>
<DIV CLASS="cell cx-05 cy-12"></DIV>
<DIV CLASS="cell cx-06 cy-12"></DIV>
<DIV CLASS="cell cx-07 cy-12"></DIV>
<DIV CLASS="cell cx-08 cy-12"></DIV>
<DIV CLASS="cell cx-09 cy-12"></DIV>
<DIV CLASS="cell cx-10 cy-12"></DIV>
<DIV CLASS="cell cx-11 cy-12"></DIV>
<DIV CLASS="cell cx-12 cy-12"></DIV>
<DIV CLASS="cell cx-13 cy-12"></DIV>
<DIV CLASS="cell cx-14 cy-12"></DIV>
<DIV CLASS="cell cx-15 cy-12"></DIV>
<DIV CLASS="cell cx-16 cy-12"></DIV>
<DIV CLASS="cell cx-17 cy-12"></DIV>
<DIV CLASS="cell cx-18 cy-12"></DIV>
<DIV CLASS="cell cx-19 cy-12"></DIV>
<DIV CLASS="cell cx-20 cy-12"></DIV>
<DIV CLASS="cell cx-21 cy-12"></DIV>
<DIV CLASS="cell cx-22 cy-12"></DIV>
<DIV CLASS="cell cx-23 cy-12"></DIV>
<DIV CLASS="cell cx-00 cy-13"></DIV>
<DIV CLASS="cell cx-01 cy-13"></DIV>
<DIV CLASS="cell cx-02 cy-13"></DIV>
<DIV CLASS="cell cx-03 cy-13"></DIV>
<DIV CLASS="cell cx-04 cy-13"></DIV>
<DIV CLASS="cell cx-05 cy-13"></DIV>
<DIV CLASS="cell cx-06 cy-13"></DIV>
<DIV CLASS="cell cx-07 cy-13"></DIV>
<DIV CLASS="cell cx-08 cy-13"></DIV>
<DIV CLASS="cell cx-09 cy-13"></DIV>
<DIV CLASS="cell cx-10 cy-13"></DIV>
<DIV CLASS="cell cx-11 cy-13"></DIV>
<DIV CLASS="cell cx-12 cy-13"></DIV>
<DIV CLASS="cell cx-13 cy-13"></DIV>
<DIV CLASS="cell cx-14 cy-13"></DIV>
<DIV CLASS="cell cx-15 cy-13"></DIV>
<DIV CLASS="cell cx-16 cy-13"></DIV>
<DIV CLASS="cell cx-17 cy-13"></DIV>
<DIV CLASS="cell cx-18 cy-13"></DIV>
<DIV CLASS="cell cx-19 cy-13"></DIV>
<DIV CLASS="cell cx-20 cy-13"></DIV>
<DIV CLASS="cell cx-21 cy-13"></DIV>
<DIV CLASS="cell cx-22 cy-13"></DIV>
<DIV CLASS="cell cx-23 cy-13"></DIV>
<DIV CLASS="cell cx-00 cy-14"></DIV>
<DIV CLASS="cell cx-01 cy-14"></DIV>
<DIV CLASS="cell cx-02 cy-14"></DIV>
<DIV CLASS="cell cx-03 cy-14"></DIV>
<DIV CLASS="cell cx-04 cy-14"></DIV>
<DIV CLASS="cell cx-05 cy-14"></DIV>
<DIV CLASS="cell cx-06 cy-14"></DIV>
<DIV CLASS="cell cx-07 cy-14"></DIV>
<DIV CLASS="cell cx-08 cy-14"></DIV>
<DIV CLASS="cell cx-09 cy-14"></DIV>
<DIV CLASS="cell cx-10 cy-14"></DIV>
<DIV CLASS="cell cx-11 cy-14"></DIV>
<DIV CLASS="cell cx-12 cy-14"></DIV>
<DIV CLASS="cell cx-13 cy-14"></DIV>
<DIV CLASS="cell cx-14 cy-14"></DIV>
<DIV CLASS="cell cx-15 cy-14"></DIV>
<DIV CLASS="cell cx-16 cy-14"></DIV>
<DIV CLASS="cell cx-17 cy-14"></DIV>
<DIV CLASS="cell cx-18 cy-14"></DIV>
<DIV CLASS="cell cx-19 cy-14"></DIV>
<DIV CLASS="cell cx-20 cy-14"></DIV>
<DIV CLASS="cell cx-21 cy-14"></DIV>
<DIV CLASS="cell cx-22 cy-14"></DIV>
<DIV CLASS="cell cx-23 cy-14"></DIV>
<DIV CLASS="cell cx-00 cy-15"></DIV>
<DIV CLASS="cell cx-01 cy-15"></DIV>
<DIV CLASS="cell cx-02 cy-15"></DIV>
<DIV CLASS="cell cx-03 cy-15"></DIV>
<DIV CLASS="cell cx-04 cy-15"></DIV>
<DIV CLASS="cell cx-05 cy-15"></DIV>
<DIV CLASS="cell cx-06 cy-15"></DIV>
<DIV CLASS="cell cx-07 cy-15"></DIV>
<DIV CLASS="cell cx-08 cy-15"></DIV>
<DIV CLASS="cell cx-09 cy-15"></DIV>
<DIV CLASS="cell cx-10 cy-15"></DIV>
<DIV CLASS="cell cx-11 cy-15"></DIV>
<DIV CLASS="cell cx-12 cy-15"></DIV>
<DIV CLASS="cell cx-13 cy-15"></DIV>
<DIV CLASS="cell cx-14 cy-15"></DIV>
<DIV CLASS="cell cx-15 cy-15"></DIV>
<DIV CLASS="cell cx-16 cy-15"></DIV>
<DIV CLASS="cell cx-17 cy-15"></DIV>
<DIV CLASS="cell cx-18 cy-15"></DIV>
<DIV CLASS="cell cx-19 cy-15"></DIV>
<DIV CLASS="cell cx-20 cy-15"></DIV>
<DIV CLASS="cell cx-21 cy-15"></DIV>
<DIV CLASS="cell cx-22 cy-15"></DIV>
<DIV CLASS="cell cx-23 cy-15"></DIV>
<DIV CLASS="cell cx-00 cy-16"></DIV>
<DIV CLASS="cell cx-01 cy-16"></DIV>
<DIV CLASS="cell cx-02 cy-16"></DIV>
<DIV CLASS="cell cx-03 cy-16"></DIV>
<DIV CLASS="cell cx-04 cy-16"></DIV>
<DIV CLASS="cell cx-05 cy-16"></DIV>
<DIV CLASS="cell cx-06 cy-16"></DIV>
<DIV CLASS="cell cx-07 cy-16"></DIV>
<DIV CLASS="cell cx-08 cy-16"></DIV>
<DIV CLASS="cell cx-09 cy-16"></DIV>
<DIV CLASS="cell cx-10 cy-16"></DIV>
<DIV CLASS="cell cx-11 cy-16"></DIV>
<DIV CLASS="cell cx-12 cy-16"></DIV>
<DIV CLASS="cell cx-13 cy-16"></DIV>
<DIV CLASS="cell cx-14 cy-16"></DIV>
<DIV CLASS="cell cx-15 cy-16"></DIV>
<DIV CLASS="cell cx-16 cy-16"></DIV>
<DIV CLASS="cell cx-17 cy-16"></DIV>
<DIV CLASS="cell cx-18 cy-16"></DIV>
<DIV CLASS="cell cx-19 cy-16"></DIV>
<DIV CLASS="cell cx-20 cy-16"></DIV>
<DIV CLASS="cell cx-21 cy-16"></DIV>
<DIV CLASS="cell cx-22 cy-16"></DIV>
<DIV CLASS="cell cx-23 cy-16"></DIV>
<DIV CLASS="cell cx-00 cy-17"></DIV>
<DIV CLASS="cell cx-01 cy-17"></DIV>
<DIV CLASS="cell cx-02 cy-17"></DIV>
<DIV CLASS="cell cx-03 cy-17"></DIV>
<DIV CLASS="cell cx-04 cy-17"></DIV>
<DIV CLASS="cell cx-05 cy-17"></DIV>
<DIV CLASS="cell cx-06 cy-17"></DIV>
<DIV CLASS="cell cx-07 cy-17"></DIV>
<DIV CLASS="cell cx-08 cy-17"></DIV>
<DIV CLASS="cell cx-09 cy-17"></DIV>
<DIV CLASS="cell cx-10 cy-17"></DIV>
<DIV CLASS="cell cx-11 cy-17"></DIV>
<DIV CLASS="cell cx-12 cy-17"></DIV>
<DIV CLASS="cell cx-13 cy-17"></DIV>
<DIV CLASS="cell cx-14 cy-17"></DIV>
<DIV CLASS="cell cx-15 cy-17"></DIV>
<DIV CLASS="cell cx-16 cy-17"></DIV>
<DIV CLASS="cell cx-17 cy-17"></DIV>
<DIV CLASS="cell cx-18 cy-17"></DIV>
<DIV CLASS="cell cx-19 cy-17"></DIV>
<DIV CLASS="cell cx-20 cy-17"></DIV>
<DIV CLASS="cell cx-21 cy-17"></DIV>
<DIV CLASS="cell cx-22 cy-17"></DIV>
<DIV CLASS="cell cx-23 cy-17"></DIV>

<!-- ペントミノ -->

<DIV ID="pent-F" CLASS="pent">
<INPUT TYPE=CHECKBOX ID="mirror-F" CLASS="mirror">
<INPUT TYPE=RADIO NAME="rotate-F" ID="rotate-F-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-F" ID="rotate-F-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-F" ID="rotate-F-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-F" ID="rotate-F-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-F" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-F-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-F-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-F-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-F-4"></LABEL>
<LABEL CLASS="mirror-s" FOR="mirror-F"></LABEL>
<LABEL CLASS="move-h" FOR="move-F"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-I" CLASS="pent">
<INPUT TYPE=RADIO NAME="rotate-I" ID="rotate-I-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-I" ID="rotate-I-2" CLASS="rotate rotate-2">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-I" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-I-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-I-2"></LABEL>
<LABEL CLASS="move-h" FOR="move-I"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-L" CLASS="pent">
<INPUT TYPE=CHECKBOX ID="mirror-L" CLASS="mirror">
<INPUT TYPE=RADIO NAME="rotate-L" ID="rotate-L-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-L" ID="rotate-L-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-L" ID="rotate-L-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-L" ID="rotate-L-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-L" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-L-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-L-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-L-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-L-4"></LABEL>
<LABEL CLASS="mirror-s" FOR="mirror-L"></LABEL>
<LABEL CLASS="move-h" FOR="move-L"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-N" CLASS="pent">
<INPUT TYPE=CHECKBOX ID="mirror-N" CLASS="mirror">
<INPUT TYPE=RADIO NAME="rotate-N" ID="rotate-N-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-N" ID="rotate-N-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-N" ID="rotate-N-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-N" ID="rotate-N-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-N" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-N-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-N-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-N-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-N-4"></LABEL>
<LABEL CLASS="mirror-s" FOR="mirror-N"></LABEL>
<LABEL CLASS="move-h" FOR="move-N"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-P" CLASS="pent">
<INPUT TYPE=CHECKBOX ID="mirror-P" CLASS="mirror">
<INPUT TYPE=RADIO NAME="rotate-P" ID="rotate-P-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-P" ID="rotate-P-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-P" ID="rotate-P-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-P" ID="rotate-P-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-P" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-P-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-P-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-P-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-P-4"></LABEL>
<LABEL CLASS="mirror-s" FOR="mirror-P"></LABEL>
<LABEL CLASS="move-h" FOR="move-P"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-T" CLASS="pent">
<INPUT TYPE=RADIO NAME="rotate-T" ID="rotate-T-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-T" ID="rotate-T-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-T" ID="rotate-T-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-T" ID="rotate-T-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-T" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-T-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-T-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-T-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-T-4"></LABEL>
<LABEL CLASS="move-h" FOR="move-T"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-U" CLASS="pent">
<INPUT TYPE=RADIO NAME="rotate-U" ID="rotate-U-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-U" ID="rotate-U-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-U" ID="rotate-U-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-U" ID="rotate-U-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-U" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-U-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-U-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-U-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-U-4"></LABEL>
<LABEL CLASS="move-h" FOR="move-U"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-V" CLASS="pent">
<INPUT TYPE=RADIO NAME="rotate-V" ID="rotate-V-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-V" ID="rotate-V-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-V" ID="rotate-V-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-V" ID="rotate-V-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-V" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-V-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-V-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-V-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-V-4"></LABEL>
<LABEL CLASS="move-h" FOR="move-V"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-W" CLASS="pent">
<INPUT TYPE=RADIO NAME="rotate-W" ID="rotate-W-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-W" ID="rotate-W-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-W" ID="rotate-W-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-W" ID="rotate-W-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-W" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-W-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-W-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-W-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-W-4"></LABEL>
<LABEL CLASS="move-h" FOR="move-W"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-X" CLASS="pent">
<DIV ID="shape-X" CLASS="shape">
<LABEL CLASS="move-h" FOR="move-X"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-Y" CLASS="pent">
<INPUT TYPE=CHECKBOX ID="mirror-Y" CLASS="mirror">
<INPUT TYPE=RADIO NAME="rotate-Y" ID="rotate-Y-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-Y" ID="rotate-Y-2" CLASS="rotate rotate-2">
<INPUT TYPE=RADIO NAME="rotate-Y" ID="rotate-Y-3" CLASS="rotate rotate-3">
<INPUT TYPE=RADIO NAME="rotate-Y" ID="rotate-Y-4" CLASS="rotate rotate-4">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-Y" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-Y-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-Y-2"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-Y-3"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-Y-4"></LABEL>
<LABEL CLASS="mirror-s" FOR="mirror-Y"></LABEL>
<LABEL CLASS="move-h" FOR="move-Y"></LABEL>
</DIV>
</DIV>

<DIV ID="pent-Z" CLASS="pent">
<INPUT TYPE=CHECKBOX ID="mirror-Z" CLASS="mirror">
<INPUT TYPE=RADIO NAME="rotate-Z" ID="rotate-Z-1" CLASS="rotate rotate-1">
<INPUT TYPE=RADIO NAME="rotate-Z" ID="rotate-Z-2" CLASS="rotate rotate-2">
<DIV CLASS="mask"></DIV>
<DIV ID="shape-Z" CLASS="shape">
<LABEL CLASS="rotate-s" FOR="rotate-Z-1"></LABEL>
<LABEL CLASS="rotate-s" FOR="rotate-Z-2"></LABEL>
<LABEL CLASS="mirror-s" FOR="mirror-Z"></LABEL>
<LABEL CLASS="move-h" FOR="move-Z"></LABEL>
</DIV>
</DIV>

</DIV>

</BODY>

</HTML>