ソースの表示

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

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート スカッシュ ゲーム</TITLE>

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

@keyframes sel-para {
  from {
    --sel-para:0;
  }
  to {
    --sel-para:4;
  }
}

@keyframes ball-x {
  from {
    --ball-x:4;
  }
  50% {
    --ball-x:236;
  }
  to {
    --ball-x:4;
  }
}

@keyframes ball-x2 {
  from {
    --ball-x2:4;
  }
  50% {
    --ball-x2:236;
  }
  to {
    --ball-x2:4;
  }
}

@keyframes ball-y {
  from {
    --ball-y:4;
  }
  50% {
    --ball-y:284;
  }
  to {
    --ball-y:4;
  }
}

@keyframes ball-y2 {
  from {
    --ball-y2:0;
  }
  to {
    --ball-y2:140;
  }
}

@keyframes score {
  from {
    --score:0;
  }
  to {
    --score:9999;
  }
}

@property --sel-para {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --ball-x {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --ball-x2 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --ball-y {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --ball-y2 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --paddle-x {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --paddle-x2 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

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

@counter-style score {
  system:extends decimal;
  pad:4 " ";
}

body {
  background-color:#CCFFFF;
  overflow:clip;
}

#title {
  color:#CC0000;
  font-size:large;
  font-weight:bold;
  text-align:center;
}

/* パラメータ選択用 */
.para {
  display:none;
}

.para:checked ~ #base #view {
  --init:0;
}

#para-1:checked ~ #base #view {
  --x-duration:4100ms;
  --x-delay:-1025ms;
  --i-para:0;
}

#para-2:checked ~ #base #view {
  --x-duration:4500ms;
  --x-delay:-3375ms;
  --i-para:1;
}

#para-3:checked ~ #base #view {
  --x-duration:4900ms;
  --x-delay:-1225ms;
  --i-para:2;
}

#para-4:checked ~ #base #view {
  --x-duration:5300ms;
  --x-delay:-3975ms;
  --i-para:3;
}

#para-5:checked ~ #base #view {
  --x-duration:5700ms;
  --x-delay:-1425ms;
  --i-para:4;
}

#para-6:checked ~ #base #view {
  --x-duration:6100ms;
  --x-delay:-4575ms;
  --i-para:5;
}

.para:active ~ #base #view {
  animation-name:sel-para;
}

.para:active ~ #base #ball {
  left:116px;
  top:0;
  animation:none;
}

.para:active ~ #base #paddle {
  left:calc((var(--paddle-x2) - 10) * 1px);
}

#base {
  position:relative;
  width:240px;
  height:300px;
  margin-left:auto;
  margin-right:auto;

  --paddle-x:0;
}

/* カーソル位置取得用要素 */
.pos-x, .pos-x2 {
  position:absolute;
  top:-1000px;
  width:2px;
  height:2300px;
}

.pos-x {
  z-index:1;
}

.pos-x:hover ~ #view {
  animation-play-state:running;
  transition:none;
}

.pos-x:hover ~ #view #ball {
  animation-play-state:running, paused;
}

.pos-x2 {
  z-index:var(--miss);
}

.pos-x2:hover ~ #view2 {
  transition:none;
}

.pos-x2:hover ~ #view2 #ball {
  animation-play-state:running;
}

.pos-x2-para {
  position:absolute;
  left:calc(var(--paddle-x2) * 1px);
  top:-1000px;
  width:2px;
  height:2300px;
}

.pos-x2-para:hover ~ #clip #ball {
  animation-play-state:running;
}

.pos-x2-para:active {
  left:-1000px;
  width:2240px;
  z-index:2;
}

#pos-l {
  position:absolute;
  left:-1000px;
  top:-1000px;
  width:1012px;
  height:2300px;
  z-index:1;
}

#pos-l:hover ~ #view {
  animation-play-state:running;
  transition:none;

  --paddle-x:10;
}

#pos-l:hover ~ #view #ball {
  animation-play-state:running, paused;
}

.pos-l2 {
  position:absolute;
  left:-1000px;
  top:-1000px;
  width:1012px;
  height:2300px;
}

.pos-l2:hover ~ #view2 {
  --paddle-x2:10;
  transition:none;
}

.pos-l2:hover ~ #view2 #ball {
  animation-play-state:running;
}

.pos-l2:active {
  width:2240px;
  z-index:2;
}

#pos-r {
  position:absolute;
  left:230px;
  top:-1000px;
  width:1010px;
  height:2300px;
  z-index:1;
}

#pos-r:hover ~ #view {
  animation-play-state:running;
  transition:none;

  --paddle-x:230;
}

#pos-r:hover ~ #view #ball {
  animation-play-state:running, paused;
}

.pos-r2 {
  position:absolute;
  left:230px;
  top:-1000px;
  width:1010px;
  height:2300px;
}

.pos-r2:hover ~ #view2 {
  --paddle-x2:230;
  transition:none;
}

.pos-r2:hover ~ #view2 #ball {
  animation-play-state:running;
}

.pos-r2:active {
  left:-1000px;
  width:2240px;
  z-index:2;
}

.pos-x2-para, .pos-l2, .pos-r2 {
  /* abs() は実装されていない */
  --w:calc((var(--sel-para) + clamp(0, var(--sel-para) - var(--i-para) + 1, 1)) - var(--i));
  z-index:calc(var(--miss) * (1 - min(var(--w) * var(--w), 1)));
}

#pos-x2-para-1, #pos-l2-1, #pos-r2-1 {
  --i:0;
}
#pos-x2-para-2, #pos-l2-2, #pos-r2-2 {
  --i:1;
}
#pos-x2-para-3, #pos-l2-3, #pos-r2-3 {
  --i:2;
}
#pos-x2-para-4, #pos-l2-4, #pos-r2-4 {
  --i:3;
}
#pos-x2-para-5, #pos-l2-5, #pos-r2-5 {
  --i:4;
}
#pos-x2-para-6, #pos-l2-6, #pos-r2-6 {
  --i:5;
}

#view {
  position:absolute;
  left:0;
  top:0;
  width:240px;
  height:300px;
  background-color:black;

  animation:ball-x var(--x-duration) steps(464, jump-end) var(--x-delay) infinite paused,
            ball-y 4s steps(560, jump-end) infinite paused,
            score 40000s steps(10000, jump-none) -1.9s forwards paused,
            sel-para 7s steps(5, jump-none) infinite paused;
  transition:--paddle-x 0s 10000s;
  --miss:min(clamp(0, var(--ball-y) - 281, 1)
               * (clamp(0, var(--paddle-x) - var(--ball-x) - 10, 1)
                    + clamp(0, var(--ball-x) - var(--paddle-x) - 10, 1))
               + var(--init), 1);
  counter-reset:score var(--score);
  --init:1;
  --x-duration:1s;
  --x-delay:0s;
  --i-para:0;
  --paddle-x2:120;
}

/* 得点 */
#view::after {
  position:absolute;
  left:4px;
  top:2px;
  color:white;
  font-family:monospace;
  font-size:16px;
  font-weight:bold;
  white-space:pre;
  content:counter(score, score);
}

#view2 {
  position:absolute;
  left:0;
  top:0;
  width:240px;
  height:300px;
  transition:--paddle-x2 0s 10000s;
}

#clip {
  position:absolute;
  left:0;
  top:0;
  width:240px;
  height:300px;
  overflow:clip;
}

/* ボール */
#ball {
  position:absolute;
  left:calc(((1 - var(--miss)) * var(--ball-x)
               + var(--miss) * (clamp(0, var(--paddle-x) - var(--ball-x), 1)
                                  * min(var(--ball-x2), var(--paddle-x2) - 14)
                              + clamp(0, var(--ball-x) - var(--paddle-x), 1)
                                  * max(var(--ball-x2), var(--paddle-x2) + 14))
              - 4) * 1px);
  top:calc((var(--ball-y) + var(--ball-y2) - 4) * 1px);
  width:8px;
  height:8px;
  border-radius:4px;
  background-color:lime;
  z-index:calc(0 - var(--init));

  animation:ball-x2 var(--x-duration) steps(464, jump-end) var(--x-delay) infinite paused,
            ball-y2 1s steps(140, jump-end) forwards paused;
}

/* パドル */
#paddle {
  position:absolute;
  left:calc(((1 - var(--miss)) * var(--paddle-x) + var(--miss) * var(--paddle-x2) - 10) * 1px);
  top:288px;
  width:20px;
  height:6px;
  background-color:yellow;
}

/* カーソル位置取得 */

#pos-x6:hover ~ #view {
  --paddle-x:12;
}
#pos-x7:hover ~ #view {
  --paddle-x:14;
}
#pos-x8:hover ~ #view {
  --paddle-x:16;
}
#pos-x9:hover ~ #view {
  --paddle-x:18;
}
#pos-x10:hover ~ #view {
  --paddle-x:20;
}
#pos-x11:hover ~ #view {
  --paddle-x:22;
}
#pos-x12:hover ~ #view {
  --paddle-x:24;
}
#pos-x13:hover ~ #view {
  --paddle-x:26;
}
#pos-x14:hover ~ #view {
  --paddle-x:28;
}
#pos-x15:hover ~ #view {
  --paddle-x:30;
}
#pos-x16:hover ~ #view {
  --paddle-x:32;
}
#pos-x17:hover ~ #view {
  --paddle-x:34;
}
#pos-x18:hover ~ #view {
  --paddle-x:36;
}
#pos-x19:hover ~ #view {
  --paddle-x:38;
}
#pos-x20:hover ~ #view {
  --paddle-x:40;
}
#pos-x21:hover ~ #view {
  --paddle-x:42;
}
#pos-x22:hover ~ #view {
  --paddle-x:44;
}
#pos-x23:hover ~ #view {
  --paddle-x:46;
}
#pos-x24:hover ~ #view {
  --paddle-x:48;
}
#pos-x25:hover ~ #view {
  --paddle-x:50;
}
#pos-x26:hover ~ #view {
  --paddle-x:52;
}
#pos-x27:hover ~ #view {
  --paddle-x:54;
}
#pos-x28:hover ~ #view {
  --paddle-x:56;
}
#pos-x29:hover ~ #view {
  --paddle-x:58;
}
#pos-x30:hover ~ #view {
  --paddle-x:60;
}
#pos-x31:hover ~ #view {
  --paddle-x:62;
}
#pos-x32:hover ~ #view {
  --paddle-x:64;
}
#pos-x33:hover ~ #view {
  --paddle-x:66;
}
#pos-x34:hover ~ #view {
  --paddle-x:68;
}
#pos-x35:hover ~ #view {
  --paddle-x:70;
}
#pos-x36:hover ~ #view {
  --paddle-x:72;
}
#pos-x37:hover ~ #view {
  --paddle-x:74;
}
#pos-x38:hover ~ #view {
  --paddle-x:76;
}
#pos-x39:hover ~ #view {
  --paddle-x:78;
}
#pos-x40:hover ~ #view {
  --paddle-x:80;
}
#pos-x41:hover ~ #view {
  --paddle-x:82;
}
#pos-x42:hover ~ #view {
  --paddle-x:84;
}
#pos-x43:hover ~ #view {
  --paddle-x:86;
}
#pos-x44:hover ~ #view {
  --paddle-x:88;
}
#pos-x45:hover ~ #view {
  --paddle-x:90;
}
#pos-x46:hover ~ #view {
  --paddle-x:92;
}
#pos-x47:hover ~ #view {
  --paddle-x:94;
}
#pos-x48:hover ~ #view {
  --paddle-x:96;
}
#pos-x49:hover ~ #view {
  --paddle-x:98;
}
#pos-x50:hover ~ #view {
  --paddle-x:100;
}
#pos-x51:hover ~ #view {
  --paddle-x:102;
}
#pos-x52:hover ~ #view {
  --paddle-x:104;
}
#pos-x53:hover ~ #view {
  --paddle-x:106;
}
#pos-x54:hover ~ #view {
  --paddle-x:108;
}
#pos-x55:hover ~ #view {
  --paddle-x:110;
}
#pos-x56:hover ~ #view {
  --paddle-x:112;
}
#pos-x57:hover ~ #view {
  --paddle-x:114;
}
#pos-x58:hover ~ #view {
  --paddle-x:116;
}
#pos-x59:hover ~ #view {
  --paddle-x:118;
}
#pos-x60:hover ~ #view {
  --paddle-x:120;
}
#pos-x61:hover ~ #view {
  --paddle-x:122;
}
#pos-x62:hover ~ #view {
  --paddle-x:124;
}
#pos-x63:hover ~ #view {
  --paddle-x:126;
}
#pos-x64:hover ~ #view {
  --paddle-x:128;
}
#pos-x65:hover ~ #view {
  --paddle-x:130;
}
#pos-x66:hover ~ #view {
  --paddle-x:132;
}
#pos-x67:hover ~ #view {
  --paddle-x:134;
}
#pos-x68:hover ~ #view {
  --paddle-x:136;
}
#pos-x69:hover ~ #view {
  --paddle-x:138;
}
#pos-x70:hover ~ #view {
  --paddle-x:140;
}
#pos-x71:hover ~ #view {
  --paddle-x:142;
}
#pos-x72:hover ~ #view {
  --paddle-x:144;
}
#pos-x73:hover ~ #view {
  --paddle-x:146;
}
#pos-x74:hover ~ #view {
  --paddle-x:148;
}
#pos-x75:hover ~ #view {
  --paddle-x:150;
}
#pos-x76:hover ~ #view {
  --paddle-x:152;
}
#pos-x77:hover ~ #view {
  --paddle-x:154;
}
#pos-x78:hover ~ #view {
  --paddle-x:156;
}
#pos-x79:hover ~ #view {
  --paddle-x:158;
}
#pos-x80:hover ~ #view {
  --paddle-x:160;
}
#pos-x81:hover ~ #view {
  --paddle-x:162;
}
#pos-x82:hover ~ #view {
  --paddle-x:164;
}
#pos-x83:hover ~ #view {
  --paddle-x:166;
}
#pos-x84:hover ~ #view {
  --paddle-x:168;
}
#pos-x85:hover ~ #view {
  --paddle-x:170;
}
#pos-x86:hover ~ #view {
  --paddle-x:172;
}
#pos-x87:hover ~ #view {
  --paddle-x:174;
}
#pos-x88:hover ~ #view {
  --paddle-x:176;
}
#pos-x89:hover ~ #view {
  --paddle-x:178;
}
#pos-x90:hover ~ #view {
  --paddle-x:180;
}
#pos-x91:hover ~ #view {
  --paddle-x:182;
}
#pos-x92:hover ~ #view {
  --paddle-x:184;
}
#pos-x93:hover ~ #view {
  --paddle-x:186;
}
#pos-x94:hover ~ #view {
  --paddle-x:188;
}
#pos-x95:hover ~ #view {
  --paddle-x:190;
}
#pos-x96:hover ~ #view {
  --paddle-x:192;
}
#pos-x97:hover ~ #view {
  --paddle-x:194;
}
#pos-x98:hover ~ #view {
  --paddle-x:196;
}
#pos-x99:hover ~ #view {
  --paddle-x:198;
}
#pos-x100:hover ~ #view {
  --paddle-x:200;
}
#pos-x101:hover ~ #view {
  --paddle-x:202;
}
#pos-x102:hover ~ #view {
  --paddle-x:204;
}
#pos-x103:hover ~ #view {
  --paddle-x:206;
}
#pos-x104:hover ~ #view {
  --paddle-x:208;
}
#pos-x105:hover ~ #view {
  --paddle-x:210;
}
#pos-x106:hover ~ #view {
  --paddle-x:212;
}
#pos-x107:hover ~ #view {
  --paddle-x:214;
}
#pos-x108:hover ~ #view {
  --paddle-x:216;
}
#pos-x109:hover ~ #view {
  --paddle-x:218;
}
#pos-x110:hover ~ #view {
  --paddle-x:220;
}
#pos-x111:hover ~ #view {
  --paddle-x:222;
}
#pos-x112:hover ~ #view {
  --paddle-x:224;
}
#pos-x113:hover ~ #view {
  --paddle-x:226;
}
#pos-x114:hover ~ #view {
  --paddle-x:228;
}

#pos-x2-6:hover ~ #view2 {
  --paddle-x2:12;
}
#pos-x2-7:hover ~ #view2 {
  --paddle-x2:14;
}
#pos-x2-8:hover ~ #view2 {
  --paddle-x2:16;
}
#pos-x2-9:hover ~ #view2 {
  --paddle-x2:18;
}
#pos-x2-10:hover ~ #view2 {
  --paddle-x2:20;
}
#pos-x2-11:hover ~ #view2 {
  --paddle-x2:22;
}
#pos-x2-12:hover ~ #view2 {
  --paddle-x2:24;
}
#pos-x2-13:hover ~ #view2 {
  --paddle-x2:26;
}
#pos-x2-14:hover ~ #view2 {
  --paddle-x2:28;
}
#pos-x2-15:hover ~ #view2 {
  --paddle-x2:30;
}
#pos-x2-16:hover ~ #view2 {
  --paddle-x2:32;
}
#pos-x2-17:hover ~ #view2 {
  --paddle-x2:34;
}
#pos-x2-18:hover ~ #view2 {
  --paddle-x2:36;
}
#pos-x2-19:hover ~ #view2 {
  --paddle-x2:38;
}
#pos-x2-20:hover ~ #view2 {
  --paddle-x2:40;
}
#pos-x2-21:hover ~ #view2 {
  --paddle-x2:42;
}
#pos-x2-22:hover ~ #view2 {
  --paddle-x2:44;
}
#pos-x2-23:hover ~ #view2 {
  --paddle-x2:46;
}
#pos-x2-24:hover ~ #view2 {
  --paddle-x2:48;
}
#pos-x2-25:hover ~ #view2 {
  --paddle-x2:50;
}
#pos-x2-26:hover ~ #view2 {
  --paddle-x2:52;
}
#pos-x2-27:hover ~ #view2 {
  --paddle-x2:54;
}
#pos-x2-28:hover ~ #view2 {
  --paddle-x2:56;
}
#pos-x2-29:hover ~ #view2 {
  --paddle-x2:58;
}
#pos-x2-30:hover ~ #view2 {
  --paddle-x2:60;
}
#pos-x2-31:hover ~ #view2 {
  --paddle-x2:62;
}
#pos-x2-32:hover ~ #view2 {
  --paddle-x2:64;
}
#pos-x2-33:hover ~ #view2 {
  --paddle-x2:66;
}
#pos-x2-34:hover ~ #view2 {
  --paddle-x2:68;
}
#pos-x2-35:hover ~ #view2 {
  --paddle-x2:70;
}
#pos-x2-36:hover ~ #view2 {
  --paddle-x2:72;
}
#pos-x2-37:hover ~ #view2 {
  --paddle-x2:74;
}
#pos-x2-38:hover ~ #view2 {
  --paddle-x2:76;
}
#pos-x2-39:hover ~ #view2 {
  --paddle-x2:78;
}
#pos-x2-40:hover ~ #view2 {
  --paddle-x2:80;
}
#pos-x2-41:hover ~ #view2 {
  --paddle-x2:82;
}
#pos-x2-42:hover ~ #view2 {
  --paddle-x2:84;
}
#pos-x2-43:hover ~ #view2 {
  --paddle-x2:86;
}
#pos-x2-44:hover ~ #view2 {
  --paddle-x2:88;
}
#pos-x2-45:hover ~ #view2 {
  --paddle-x2:90;
}
#pos-x2-46:hover ~ #view2 {
  --paddle-x2:92;
}
#pos-x2-47:hover ~ #view2 {
  --paddle-x2:94;
}
#pos-x2-48:hover ~ #view2 {
  --paddle-x2:96;
}
#pos-x2-49:hover ~ #view2 {
  --paddle-x2:98;
}
#pos-x2-50:hover ~ #view2 {
  --paddle-x2:100;
}
#pos-x2-51:hover ~ #view2 {
  --paddle-x2:102;
}
#pos-x2-52:hover ~ #view2 {
  --paddle-x2:104;
}
#pos-x2-53:hover ~ #view2 {
  --paddle-x2:106;
}
#pos-x2-54:hover ~ #view2 {
  --paddle-x2:108;
}
#pos-x2-55:hover ~ #view2 {
  --paddle-x2:110;
}
#pos-x2-56:hover ~ #view2 {
  --paddle-x2:112;
}
#pos-x2-57:hover ~ #view2 {
  --paddle-x2:114;
}
#pos-x2-58:hover ~ #view2 {
  --paddle-x2:116;
}
#pos-x2-59:hover ~ #view2 {
  --paddle-x2:118;
}
#pos-x2-60:hover ~ #view2 {
  --paddle-x2:120;
}
#pos-x2-61:hover ~ #view2 {
  --paddle-x2:122;
}
#pos-x2-62:hover ~ #view2 {
  --paddle-x2:124;
}
#pos-x2-63:hover ~ #view2 {
  --paddle-x2:126;
}
#pos-x2-64:hover ~ #view2 {
  --paddle-x2:128;
}
#pos-x2-65:hover ~ #view2 {
  --paddle-x2:130;
}
#pos-x2-66:hover ~ #view2 {
  --paddle-x2:132;
}
#pos-x2-67:hover ~ #view2 {
  --paddle-x2:134;
}
#pos-x2-68:hover ~ #view2 {
  --paddle-x2:136;
}
#pos-x2-69:hover ~ #view2 {
  --paddle-x2:138;
}
#pos-x2-70:hover ~ #view2 {
  --paddle-x2:140;
}
#pos-x2-71:hover ~ #view2 {
  --paddle-x2:142;
}
#pos-x2-72:hover ~ #view2 {
  --paddle-x2:144;
}
#pos-x2-73:hover ~ #view2 {
  --paddle-x2:146;
}
#pos-x2-74:hover ~ #view2 {
  --paddle-x2:148;
}
#pos-x2-75:hover ~ #view2 {
  --paddle-x2:150;
}
#pos-x2-76:hover ~ #view2 {
  --paddle-x2:152;
}
#pos-x2-77:hover ~ #view2 {
  --paddle-x2:154;
}
#pos-x2-78:hover ~ #view2 {
  --paddle-x2:156;
}
#pos-x2-79:hover ~ #view2 {
  --paddle-x2:158;
}
#pos-x2-80:hover ~ #view2 {
  --paddle-x2:160;
}
#pos-x2-81:hover ~ #view2 {
  --paddle-x2:162;
}
#pos-x2-82:hover ~ #view2 {
  --paddle-x2:164;
}
#pos-x2-83:hover ~ #view2 {
  --paddle-x2:166;
}
#pos-x2-84:hover ~ #view2 {
  --paddle-x2:168;
}
#pos-x2-85:hover ~ #view2 {
  --paddle-x2:170;
}
#pos-x2-86:hover ~ #view2 {
  --paddle-x2:172;
}
#pos-x2-87:hover ~ #view2 {
  --paddle-x2:174;
}
#pos-x2-88:hover ~ #view2 {
  --paddle-x2:176;
}
#pos-x2-89:hover ~ #view2 {
  --paddle-x2:178;
}
#pos-x2-90:hover ~ #view2 {
  --paddle-x2:180;
}
#pos-x2-91:hover ~ #view2 {
  --paddle-x2:182;
}
#pos-x2-92:hover ~ #view2 {
  --paddle-x2:184;
}
#pos-x2-93:hover ~ #view2 {
  --paddle-x2:186;
}
#pos-x2-94:hover ~ #view2 {
  --paddle-x2:188;
}
#pos-x2-95:hover ~ #view2 {
  --paddle-x2:190;
}
#pos-x2-96:hover ~ #view2 {
  --paddle-x2:192;
}
#pos-x2-97:hover ~ #view2 {
  --paddle-x2:194;
}
#pos-x2-98:hover ~ #view2 {
  --paddle-x2:196;
}
#pos-x2-99:hover ~ #view2 {
  --paddle-x2:198;
}
#pos-x2-100:hover ~ #view2 {
  --paddle-x2:200;
}
#pos-x2-101:hover ~ #view2 {
  --paddle-x2:202;
}
#pos-x2-102:hover ~ #view2 {
  --paddle-x2:204;
}
#pos-x2-103:hover ~ #view2 {
  --paddle-x2:206;
}
#pos-x2-104:hover ~ #view2 {
  --paddle-x2:208;
}
#pos-x2-105:hover ~ #view2 {
  --paddle-x2:210;
}
#pos-x2-106:hover ~ #view2 {
  --paddle-x2:212;
}
#pos-x2-107:hover ~ #view2 {
  --paddle-x2:214;
}
#pos-x2-108:hover ~ #view2 {
  --paddle-x2:216;
}
#pos-x2-109:hover ~ #view2 {
  --paddle-x2:218;
}
#pos-x2-110:hover ~ #view2 {
  --paddle-x2:220;
}
#pos-x2-111:hover ~ #view2 {
  --paddle-x2:222;
}
#pos-x2-112:hover ~ #view2 {
  --paddle-x2:224;
}
#pos-x2-113:hover ~ #view2 {
  --paddle-x2:226;
}
#pos-x2-114:hover ~ #view2 {
  --paddle-x2:228;
}

-->
</STYLE>

</HEAD>

<BODY>
<BR>
<DIV ID="title">スタイルシート スカッシュ ゲーム</DIV>
<BR>

<INPUT TYPE=RADIO NAME="para-g" ID="para-1" CLASS="para">
<INPUT TYPE=RADIO NAME="para-g" ID="para-2" CLASS="para">
<INPUT TYPE=RADIO NAME="para-g" ID="para-3" CLASS="para">
<INPUT TYPE=RADIO NAME="para-g" ID="para-4" CLASS="para">
<INPUT TYPE=RADIO NAME="para-g" ID="para-5" CLASS="para">
<INPUT TYPE=RADIO NAME="para-g" ID="para-6" CLASS="para">

<DIV ID="base">

<!-- カーソル位置取得 -->
<DIV ID="pos-x6" CLASS="pos-x" STYLE="left:12px"></DIV>
<DIV ID="pos-x7" CLASS="pos-x" STYLE="left:14px"></DIV>
<DIV ID="pos-x8" CLASS="pos-x" STYLE="left:16px"></DIV>
<DIV ID="pos-x9" CLASS="pos-x" STYLE="left:18px"></DIV>
<DIV ID="pos-x10" CLASS="pos-x" STYLE="left:20px"></DIV>
<DIV ID="pos-x11" CLASS="pos-x" STYLE="left:22px"></DIV>
<DIV ID="pos-x12" CLASS="pos-x" STYLE="left:24px"></DIV>
<DIV ID="pos-x13" CLASS="pos-x" STYLE="left:26px"></DIV>
<DIV ID="pos-x14" CLASS="pos-x" STYLE="left:28px"></DIV>
<DIV ID="pos-x15" CLASS="pos-x" STYLE="left:30px"></DIV>
<DIV ID="pos-x16" CLASS="pos-x" STYLE="left:32px"></DIV>
<DIV ID="pos-x17" CLASS="pos-x" STYLE="left:34px"></DIV>
<DIV ID="pos-x18" CLASS="pos-x" STYLE="left:36px"></DIV>
<DIV ID="pos-x19" CLASS="pos-x" STYLE="left:38px"></DIV>
<DIV ID="pos-x20" CLASS="pos-x" STYLE="left:40px"></DIV>
<DIV ID="pos-x21" CLASS="pos-x" STYLE="left:42px"></DIV>
<DIV ID="pos-x22" CLASS="pos-x" STYLE="left:44px"></DIV>
<DIV ID="pos-x23" CLASS="pos-x" STYLE="left:46px"></DIV>
<DIV ID="pos-x24" CLASS="pos-x" STYLE="left:48px"></DIV>
<DIV ID="pos-x25" CLASS="pos-x" STYLE="left:50px"></DIV>
<DIV ID="pos-x26" CLASS="pos-x" STYLE="left:52px"></DIV>
<DIV ID="pos-x27" CLASS="pos-x" STYLE="left:54px"></DIV>
<DIV ID="pos-x28" CLASS="pos-x" STYLE="left:56px"></DIV>
<DIV ID="pos-x29" CLASS="pos-x" STYLE="left:58px"></DIV>
<DIV ID="pos-x30" CLASS="pos-x" STYLE="left:60px"></DIV>
<DIV ID="pos-x31" CLASS="pos-x" STYLE="left:62px"></DIV>
<DIV ID="pos-x32" CLASS="pos-x" STYLE="left:64px"></DIV>
<DIV ID="pos-x33" CLASS="pos-x" STYLE="left:66px"></DIV>
<DIV ID="pos-x34" CLASS="pos-x" STYLE="left:68px"></DIV>
<DIV ID="pos-x35" CLASS="pos-x" STYLE="left:70px"></DIV>
<DIV ID="pos-x36" CLASS="pos-x" STYLE="left:72px"></DIV>
<DIV ID="pos-x37" CLASS="pos-x" STYLE="left:74px"></DIV>
<DIV ID="pos-x38" CLASS="pos-x" STYLE="left:76px"></DIV>
<DIV ID="pos-x39" CLASS="pos-x" STYLE="left:78px"></DIV>
<DIV ID="pos-x40" CLASS="pos-x" STYLE="left:80px"></DIV>
<DIV ID="pos-x41" CLASS="pos-x" STYLE="left:82px"></DIV>
<DIV ID="pos-x42" CLASS="pos-x" STYLE="left:84px"></DIV>
<DIV ID="pos-x43" CLASS="pos-x" STYLE="left:86px"></DIV>
<DIV ID="pos-x44" CLASS="pos-x" STYLE="left:88px"></DIV>
<DIV ID="pos-x45" CLASS="pos-x" STYLE="left:90px"></DIV>
<DIV ID="pos-x46" CLASS="pos-x" STYLE="left:92px"></DIV>
<DIV ID="pos-x47" CLASS="pos-x" STYLE="left:94px"></DIV>
<DIV ID="pos-x48" CLASS="pos-x" STYLE="left:96px"></DIV>
<DIV ID="pos-x49" CLASS="pos-x" STYLE="left:98px"></DIV>
<DIV ID="pos-x50" CLASS="pos-x" STYLE="left:100px"></DIV>
<DIV ID="pos-x51" CLASS="pos-x" STYLE="left:102px"></DIV>
<DIV ID="pos-x52" CLASS="pos-x" STYLE="left:104px"></DIV>
<DIV ID="pos-x53" CLASS="pos-x" STYLE="left:106px"></DIV>
<DIV ID="pos-x54" CLASS="pos-x" STYLE="left:108px"></DIV>
<DIV ID="pos-x55" CLASS="pos-x" STYLE="left:110px"></DIV>
<DIV ID="pos-x56" CLASS="pos-x" STYLE="left:112px"></DIV>
<DIV ID="pos-x57" CLASS="pos-x" STYLE="left:114px"></DIV>
<DIV ID="pos-x58" CLASS="pos-x" STYLE="left:116px"></DIV>
<DIV ID="pos-x59" CLASS="pos-x" STYLE="left:118px"></DIV>
<DIV ID="pos-x60" CLASS="pos-x" STYLE="left:120px"></DIV>
<DIV ID="pos-x61" CLASS="pos-x" STYLE="left:122px"></DIV>
<DIV ID="pos-x62" CLASS="pos-x" STYLE="left:124px"></DIV>
<DIV ID="pos-x63" CLASS="pos-x" STYLE="left:126px"></DIV>
<DIV ID="pos-x64" CLASS="pos-x" STYLE="left:128px"></DIV>
<DIV ID="pos-x65" CLASS="pos-x" STYLE="left:130px"></DIV>
<DIV ID="pos-x66" CLASS="pos-x" STYLE="left:132px"></DIV>
<DIV ID="pos-x67" CLASS="pos-x" STYLE="left:134px"></DIV>
<DIV ID="pos-x68" CLASS="pos-x" STYLE="left:136px"></DIV>
<DIV ID="pos-x69" CLASS="pos-x" STYLE="left:138px"></DIV>
<DIV ID="pos-x70" CLASS="pos-x" STYLE="left:140px"></DIV>
<DIV ID="pos-x71" CLASS="pos-x" STYLE="left:142px"></DIV>
<DIV ID="pos-x72" CLASS="pos-x" STYLE="left:144px"></DIV>
<DIV ID="pos-x73" CLASS="pos-x" STYLE="left:146px"></DIV>
<DIV ID="pos-x74" CLASS="pos-x" STYLE="left:148px"></DIV>
<DIV ID="pos-x75" CLASS="pos-x" STYLE="left:150px"></DIV>
<DIV ID="pos-x76" CLASS="pos-x" STYLE="left:152px"></DIV>
<DIV ID="pos-x77" CLASS="pos-x" STYLE="left:154px"></DIV>
<DIV ID="pos-x78" CLASS="pos-x" STYLE="left:156px"></DIV>
<DIV ID="pos-x79" CLASS="pos-x" STYLE="left:158px"></DIV>
<DIV ID="pos-x80" CLASS="pos-x" STYLE="left:160px"></DIV>
<DIV ID="pos-x81" CLASS="pos-x" STYLE="left:162px"></DIV>
<DIV ID="pos-x82" CLASS="pos-x" STYLE="left:164px"></DIV>
<DIV ID="pos-x83" CLASS="pos-x" STYLE="left:166px"></DIV>
<DIV ID="pos-x84" CLASS="pos-x" STYLE="left:168px"></DIV>
<DIV ID="pos-x85" CLASS="pos-x" STYLE="left:170px"></DIV>
<DIV ID="pos-x86" CLASS="pos-x" STYLE="left:172px"></DIV>
<DIV ID="pos-x87" CLASS="pos-x" STYLE="left:174px"></DIV>
<DIV ID="pos-x88" CLASS="pos-x" STYLE="left:176px"></DIV>
<DIV ID="pos-x89" CLASS="pos-x" STYLE="left:178px"></DIV>
<DIV ID="pos-x90" CLASS="pos-x" STYLE="left:180px"></DIV>
<DIV ID="pos-x91" CLASS="pos-x" STYLE="left:182px"></DIV>
<DIV ID="pos-x92" CLASS="pos-x" STYLE="left:184px"></DIV>
<DIV ID="pos-x93" CLASS="pos-x" STYLE="left:186px"></DIV>
<DIV ID="pos-x94" CLASS="pos-x" STYLE="left:188px"></DIV>
<DIV ID="pos-x95" CLASS="pos-x" STYLE="left:190px"></DIV>
<DIV ID="pos-x96" CLASS="pos-x" STYLE="left:192px"></DIV>
<DIV ID="pos-x97" CLASS="pos-x" STYLE="left:194px"></DIV>
<DIV ID="pos-x98" CLASS="pos-x" STYLE="left:196px"></DIV>
<DIV ID="pos-x99" CLASS="pos-x" STYLE="left:198px"></DIV>
<DIV ID="pos-x100" CLASS="pos-x" STYLE="left:200px"></DIV>
<DIV ID="pos-x101" CLASS="pos-x" STYLE="left:202px"></DIV>
<DIV ID="pos-x102" CLASS="pos-x" STYLE="left:204px"></DIV>
<DIV ID="pos-x103" CLASS="pos-x" STYLE="left:206px"></DIV>
<DIV ID="pos-x104" CLASS="pos-x" STYLE="left:208px"></DIV>
<DIV ID="pos-x105" CLASS="pos-x" STYLE="left:210px"></DIV>
<DIV ID="pos-x106" CLASS="pos-x" STYLE="left:212px"></DIV>
<DIV ID="pos-x107" CLASS="pos-x" STYLE="left:214px"></DIV>
<DIV ID="pos-x108" CLASS="pos-x" STYLE="left:216px"></DIV>
<DIV ID="pos-x109" CLASS="pos-x" STYLE="left:218px"></DIV>
<DIV ID="pos-x110" CLASS="pos-x" STYLE="left:220px"></DIV>
<DIV ID="pos-x111" CLASS="pos-x" STYLE="left:222px"></DIV>
<DIV ID="pos-x112" CLASS="pos-x" STYLE="left:224px"></DIV>
<DIV ID="pos-x113" CLASS="pos-x" STYLE="left:226px"></DIV>
<DIV ID="pos-x114" CLASS="pos-x" STYLE="left:228px"></DIV>

<DIV ID="pos-l"></DIV>
<DIV ID="pos-r"></DIV>

<DIV ID="view">

<!-- カーソル位置取得 -->
<DIV ID="pos-x2-6" CLASS="pos-x2" STYLE="left:12px"></DIV>
<DIV ID="pos-x2-7" CLASS="pos-x2" STYLE="left:14px"></DIV>
<DIV ID="pos-x2-8" CLASS="pos-x2" STYLE="left:16px"></DIV>
<DIV ID="pos-x2-9" CLASS="pos-x2" STYLE="left:18px"></DIV>
<DIV ID="pos-x2-10" CLASS="pos-x2" STYLE="left:20px"></DIV>
<DIV ID="pos-x2-11" CLASS="pos-x2" STYLE="left:22px"></DIV>
<DIV ID="pos-x2-12" CLASS="pos-x2" STYLE="left:24px"></DIV>
<DIV ID="pos-x2-13" CLASS="pos-x2" STYLE="left:26px"></DIV>
<DIV ID="pos-x2-14" CLASS="pos-x2" STYLE="left:28px"></DIV>
<DIV ID="pos-x2-15" CLASS="pos-x2" STYLE="left:30px"></DIV>
<DIV ID="pos-x2-16" CLASS="pos-x2" STYLE="left:32px"></DIV>
<DIV ID="pos-x2-17" CLASS="pos-x2" STYLE="left:34px"></DIV>
<DIV ID="pos-x2-18" CLASS="pos-x2" STYLE="left:36px"></DIV>
<DIV ID="pos-x2-19" CLASS="pos-x2" STYLE="left:38px"></DIV>
<DIV ID="pos-x2-20" CLASS="pos-x2" STYLE="left:40px"></DIV>
<DIV ID="pos-x2-21" CLASS="pos-x2" STYLE="left:42px"></DIV>
<DIV ID="pos-x2-22" CLASS="pos-x2" STYLE="left:44px"></DIV>
<DIV ID="pos-x2-23" CLASS="pos-x2" STYLE="left:46px"></DIV>
<DIV ID="pos-x2-24" CLASS="pos-x2" STYLE="left:48px"></DIV>
<DIV ID="pos-x2-25" CLASS="pos-x2" STYLE="left:50px"></DIV>
<DIV ID="pos-x2-26" CLASS="pos-x2" STYLE="left:52px"></DIV>
<DIV ID="pos-x2-27" CLASS="pos-x2" STYLE="left:54px"></DIV>
<DIV ID="pos-x2-28" CLASS="pos-x2" STYLE="left:56px"></DIV>
<DIV ID="pos-x2-29" CLASS="pos-x2" STYLE="left:58px"></DIV>
<DIV ID="pos-x2-30" CLASS="pos-x2" STYLE="left:60px"></DIV>
<DIV ID="pos-x2-31" CLASS="pos-x2" STYLE="left:62px"></DIV>
<DIV ID="pos-x2-32" CLASS="pos-x2" STYLE="left:64px"></DIV>
<DIV ID="pos-x2-33" CLASS="pos-x2" STYLE="left:66px"></DIV>
<DIV ID="pos-x2-34" CLASS="pos-x2" STYLE="left:68px"></DIV>
<DIV ID="pos-x2-35" CLASS="pos-x2" STYLE="left:70px"></DIV>
<DIV ID="pos-x2-36" CLASS="pos-x2" STYLE="left:72px"></DIV>
<DIV ID="pos-x2-37" CLASS="pos-x2" STYLE="left:74px"></DIV>
<DIV ID="pos-x2-38" CLASS="pos-x2" STYLE="left:76px"></DIV>
<DIV ID="pos-x2-39" CLASS="pos-x2" STYLE="left:78px"></DIV>
<DIV ID="pos-x2-40" CLASS="pos-x2" STYLE="left:80px"></DIV>
<DIV ID="pos-x2-41" CLASS="pos-x2" STYLE="left:82px"></DIV>
<DIV ID="pos-x2-42" CLASS="pos-x2" STYLE="left:84px"></DIV>
<DIV ID="pos-x2-43" CLASS="pos-x2" STYLE="left:86px"></DIV>
<DIV ID="pos-x2-44" CLASS="pos-x2" STYLE="left:88px"></DIV>
<DIV ID="pos-x2-45" CLASS="pos-x2" STYLE="left:90px"></DIV>
<DIV ID="pos-x2-46" CLASS="pos-x2" STYLE="left:92px"></DIV>
<DIV ID="pos-x2-47" CLASS="pos-x2" STYLE="left:94px"></DIV>
<DIV ID="pos-x2-48" CLASS="pos-x2" STYLE="left:96px"></DIV>
<DIV ID="pos-x2-49" CLASS="pos-x2" STYLE="left:98px"></DIV>
<DIV ID="pos-x2-50" CLASS="pos-x2" STYLE="left:100px"></DIV>
<DIV ID="pos-x2-51" CLASS="pos-x2" STYLE="left:102px"></DIV>
<DIV ID="pos-x2-52" CLASS="pos-x2" STYLE="left:104px"></DIV>
<DIV ID="pos-x2-53" CLASS="pos-x2" STYLE="left:106px"></DIV>
<DIV ID="pos-x2-54" CLASS="pos-x2" STYLE="left:108px"></DIV>
<DIV ID="pos-x2-55" CLASS="pos-x2" STYLE="left:110px"></DIV>
<DIV ID="pos-x2-56" CLASS="pos-x2" STYLE="left:112px"></DIV>
<DIV ID="pos-x2-57" CLASS="pos-x2" STYLE="left:114px"></DIV>
<DIV ID="pos-x2-58" CLASS="pos-x2" STYLE="left:116px"></DIV>
<DIV ID="pos-x2-59" CLASS="pos-x2" STYLE="left:118px"></DIV>
<DIV ID="pos-x2-60" CLASS="pos-x2" STYLE="left:120px"></DIV>
<DIV ID="pos-x2-61" CLASS="pos-x2" STYLE="left:122px"></DIV>
<DIV ID="pos-x2-62" CLASS="pos-x2" STYLE="left:124px"></DIV>
<DIV ID="pos-x2-63" CLASS="pos-x2" STYLE="left:126px"></DIV>
<DIV ID="pos-x2-64" CLASS="pos-x2" STYLE="left:128px"></DIV>
<DIV ID="pos-x2-65" CLASS="pos-x2" STYLE="left:130px"></DIV>
<DIV ID="pos-x2-66" CLASS="pos-x2" STYLE="left:132px"></DIV>
<DIV ID="pos-x2-67" CLASS="pos-x2" STYLE="left:134px"></DIV>
<DIV ID="pos-x2-68" CLASS="pos-x2" STYLE="left:136px"></DIV>
<DIV ID="pos-x2-69" CLASS="pos-x2" STYLE="left:138px"></DIV>
<DIV ID="pos-x2-70" CLASS="pos-x2" STYLE="left:140px"></DIV>
<DIV ID="pos-x2-71" CLASS="pos-x2" STYLE="left:142px"></DIV>
<DIV ID="pos-x2-72" CLASS="pos-x2" STYLE="left:144px"></DIV>
<DIV ID="pos-x2-73" CLASS="pos-x2" STYLE="left:146px"></DIV>
<DIV ID="pos-x2-74" CLASS="pos-x2" STYLE="left:148px"></DIV>
<DIV ID="pos-x2-75" CLASS="pos-x2" STYLE="left:150px"></DIV>
<DIV ID="pos-x2-76" CLASS="pos-x2" STYLE="left:152px"></DIV>
<DIV ID="pos-x2-77" CLASS="pos-x2" STYLE="left:154px"></DIV>
<DIV ID="pos-x2-78" CLASS="pos-x2" STYLE="left:156px"></DIV>
<DIV ID="pos-x2-79" CLASS="pos-x2" STYLE="left:158px"></DIV>
<DIV ID="pos-x2-80" CLASS="pos-x2" STYLE="left:160px"></DIV>
<DIV ID="pos-x2-81" CLASS="pos-x2" STYLE="left:162px"></DIV>
<DIV ID="pos-x2-82" CLASS="pos-x2" STYLE="left:164px"></DIV>
<DIV ID="pos-x2-83" CLASS="pos-x2" STYLE="left:166px"></DIV>
<DIV ID="pos-x2-84" CLASS="pos-x2" STYLE="left:168px"></DIV>
<DIV ID="pos-x2-85" CLASS="pos-x2" STYLE="left:170px"></DIV>
<DIV ID="pos-x2-86" CLASS="pos-x2" STYLE="left:172px"></DIV>
<DIV ID="pos-x2-87" CLASS="pos-x2" STYLE="left:174px"></DIV>
<DIV ID="pos-x2-88" CLASS="pos-x2" STYLE="left:176px"></DIV>
<DIV ID="pos-x2-89" CLASS="pos-x2" STYLE="left:178px"></DIV>
<DIV ID="pos-x2-90" CLASS="pos-x2" STYLE="left:180px"></DIV>
<DIV ID="pos-x2-91" CLASS="pos-x2" STYLE="left:182px"></DIV>
<DIV ID="pos-x2-92" CLASS="pos-x2" STYLE="left:184px"></DIV>
<DIV ID="pos-x2-93" CLASS="pos-x2" STYLE="left:186px"></DIV>
<DIV ID="pos-x2-94" CLASS="pos-x2" STYLE="left:188px"></DIV>
<DIV ID="pos-x2-95" CLASS="pos-x2" STYLE="left:190px"></DIV>
<DIV ID="pos-x2-96" CLASS="pos-x2" STYLE="left:192px"></DIV>
<DIV ID="pos-x2-97" CLASS="pos-x2" STYLE="left:194px"></DIV>
<DIV ID="pos-x2-98" CLASS="pos-x2" STYLE="left:196px"></DIV>
<DIV ID="pos-x2-99" CLASS="pos-x2" STYLE="left:198px"></DIV>
<DIV ID="pos-x2-100" CLASS="pos-x2" STYLE="left:200px"></DIV>
<DIV ID="pos-x2-101" CLASS="pos-x2" STYLE="left:202px"></DIV>
<DIV ID="pos-x2-102" CLASS="pos-x2" STYLE="left:204px"></DIV>
<DIV ID="pos-x2-103" CLASS="pos-x2" STYLE="left:206px"></DIV>
<DIV ID="pos-x2-104" CLASS="pos-x2" STYLE="left:208px"></DIV>
<DIV ID="pos-x2-105" CLASS="pos-x2" STYLE="left:210px"></DIV>
<DIV ID="pos-x2-106" CLASS="pos-x2" STYLE="left:212px"></DIV>
<DIV ID="pos-x2-107" CLASS="pos-x2" STYLE="left:214px"></DIV>
<DIV ID="pos-x2-108" CLASS="pos-x2" STYLE="left:216px"></DIV>
<DIV ID="pos-x2-109" CLASS="pos-x2" STYLE="left:218px"></DIV>
<DIV ID="pos-x2-110" CLASS="pos-x2" STYLE="left:220px"></DIV>
<DIV ID="pos-x2-111" CLASS="pos-x2" STYLE="left:222px"></DIV>
<DIV ID="pos-x2-112" CLASS="pos-x2" STYLE="left:224px"></DIV>
<DIV ID="pos-x2-113" CLASS="pos-x2" STYLE="left:226px"></DIV>
<DIV ID="pos-x2-114" CLASS="pos-x2" STYLE="left:228px"></DIV>

<LABEL ID="pos-l2-1" FOR="para-1" CLASS="pos-l2"></LABEL>
<LABEL ID="pos-l2-2" FOR="para-2" CLASS="pos-l2"></LABEL>
<LABEL ID="pos-l2-3" FOR="para-3" CLASS="pos-l2"></LABEL>
<LABEL ID="pos-l2-4" FOR="para-4" CLASS="pos-l2"></LABEL>
<LABEL ID="pos-l2-5" FOR="para-5" CLASS="pos-l2"></LABEL>
<LABEL ID="pos-l2-6" FOR="para-6" CLASS="pos-l2"></LABEL>
<LABEL ID="pos-r2-1" FOR="para-1" CLASS="pos-r2"></LABEL>
<LABEL ID="pos-r2-2" FOR="para-2" CLASS="pos-r2"></LABEL>
<LABEL ID="pos-r2-3" FOR="para-3" CLASS="pos-r2"></LABEL>
<LABEL ID="pos-r2-4" FOR="para-4" CLASS="pos-r2"></LABEL>
<LABEL ID="pos-r2-5" FOR="para-5" CLASS="pos-r2"></LABEL>
<LABEL ID="pos-r2-6" FOR="para-6" CLASS="pos-r2"></LABEL>

<DIV ID="view2">

<LABEL ID="pos-x2-para-1" FOR="para-1" CLASS="pos-x2-para"></LABEL>
<LABEL ID="pos-x2-para-2" FOR="para-2" CLASS="pos-x2-para"></LABEL>
<LABEL ID="pos-x2-para-3" FOR="para-3" CLASS="pos-x2-para"></LABEL>
<LABEL ID="pos-x2-para-4" FOR="para-4" CLASS="pos-x2-para"></LABEL>
<LABEL ID="pos-x2-para-5" FOR="para-5" CLASS="pos-x2-para"></LABEL>
<LABEL ID="pos-x2-para-6" FOR="para-6" CLASS="pos-x2-para"></LABEL>

<DIV ID="clip">
<DIV ID="ball"></DIV>
</DIV>

<DIV ID="paddle"></DIV>

</DIV>

</DIV>
</DIV>

</BODY>

</HTML>