CSSxeyes.htm

戻る

<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート xeyes もどき</TITLE>

<STYLE TYPE="text/css">
<!--
@property --x3 {
  syntax:'<integer>';
  inherits:true;
  initial-value:0;
}

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

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

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

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

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

/* 小数部切り捨て用 */

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

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

:root {
  --x3:300;
  --y3:200;
  --x2:0;
  --y2:50;
  --x1:0;
  --y1:0;
}

body {
  background-color:#CCFFFF;
}

#title {
  color:#CC0000;
  font:bold large sans-serif;
  text-align:center;
}

#base {
  position:relative;
  width:600px;
  height:500px;
  border:solid 1px black;
  margin-left:auto;
  margin-right:auto;
}

.co3 {
  position:absolute;
  width:100px;
  height:100px;
}

#co2 {
  position:absolute;
  left:calc(var(--x3) * 1px);
  top:calc(var(--y3) * 1px);
  transition:--x3 0s 10000s, --y3 0s 10000s;
}

.co2 {
  position:absolute;
  width:10px;
  height:10px;
}

#co1 {
  position:absolute;
  left:calc(var(--x2) * 1px);
  top:calc(var(--y2) * 1px);
  transition:--x2 0s 10000s, --y2 0s 10000s;
}

.co1 {
  position:absolute;
  width:1px;
  height:1px;
}

.co3:hover ~ #co2 {
  transition:none;
}

:is(#co3-00:hover, #co3-01:hover, #co3-02:hover, #co3-03:hover, #co3-04:hover) ~ #co2 {
  --x3:0;
}
:is(#co3-10:hover, #co3-11:hover, #co3-12:hover, #co3-13:hover, #co3-14:hover) ~ #co2 {
  --x3:100;
}
:is(#co3-20:hover, #co3-21:hover, #co3-22:hover, #co3-23:hover, #co3-24:hover) ~ #co2 {
  --x3:200;
}
:is(#co3-30:hover, #co3-31:hover, #co3-32:hover, #co3-33:hover, #co3-34:hover) ~ #co2 {
  --x3:300;
}
:is(#co3-40:hover, #co3-41:hover, #co3-42:hover, #co3-43:hover, #co3-44:hover) ~ #co2 {
  --x3:400;
}
:is(#co3-50:hover, #co3-51:hover, #co3-52:hover, #co3-53:hover, #co3-54:hover) ~ #co2 {
  --x3:500;
}

:is(#co3-00:hover, #co3-10:hover, #co3-20:hover, #co3-30:hover, #co3-40:hover, #co3-50:hover) ~ #co2 {
  --y3:0;
}
:is(#co3-01:hover, #co3-11:hover, #co3-21:hover, #co3-31:hover, #co3-41:hover, #co3-51:hover) ~ #co2 {
  --y3:100;
}
:is(#co3-02:hover, #co3-12:hover, #co3-22:hover, #co3-32:hover, #co3-42:hover, #co3-52:hover) ~ #co2 {
  --y3:200;
}
:is(#co3-03:hover, #co3-13:hover, #co3-23:hover, #co3-33:hover, #co3-43:hover, #co3-53:hover) ~ #co2 {
  --y3:300;
}
:is(#co3-04:hover, #co3-14:hover, #co3-24:hover, #co3-34:hover, #co3-44:hover, #co3-54:hover) ~ #co2 {
  --y3:400;
}

.co2:hover ~ #co1 {
  transition:none;
}

:is(#co2-00:hover, #co2-01:hover, #co2-02:hover, #co2-03:hover, #co2-04:hover,
    #co2-05:hover, #co2-06:hover, #co2-07:hover, #co2-08:hover, #co2-09:hover) ~ #co1 {
  --x2:0;
}
:is(#co2-10:hover, #co2-11:hover, #co2-12:hover, #co2-13:hover, #co2-14:hover,
    #co2-15:hover, #co2-16:hover, #co2-17:hover, #co2-18:hover, #co2-19:hover) ~ #co1 {
  --x2:10;
}
:is(#co2-20:hover, #co2-21:hover, #co2-22:hover, #co2-23:hover, #co2-24:hover,
    #co2-25:hover, #co2-26:hover, #co2-27:hover, #co2-28:hover, #co2-29:hover) ~ #co1 {
  --x2:20;
}
:is(#co2-30:hover, #co2-31:hover, #co2-32:hover, #co2-33:hover, #co2-34:hover,
    #co2-35:hover, #co2-36:hover, #co2-37:hover, #co2-38:hover, #co2-39:hover) ~ #co1 {
  --x2:30;
}
:is(#co2-40:hover, #co2-41:hover, #co2-42:hover, #co2-43:hover, #co2-44:hover,
    #co2-45:hover, #co2-46:hover, #co2-47:hover, #co2-48:hover, #co2-49:hover) ~ #co1 {
  --x2:40;
}
:is(#co2-50:hover, #co2-51:hover, #co2-52:hover, #co2-53:hover, #co2-54:hover,
    #co2-55:hover, #co2-56:hover, #co2-57:hover, #co2-58:hover, #co2-59:hover) ~ #co1 {
  --x2:50;
}
:is(#co2-60:hover, #co2-61:hover, #co2-62:hover, #co2-63:hover, #co2-64:hover,
    #co2-65:hover, #co2-66:hover, #co2-67:hover, #co2-68:hover, #co2-69:hover) ~ #co1 {
  --x2:60;
}
:is(#co2-70:hover, #co2-71:hover, #co2-72:hover, #co2-73:hover, #co2-74:hover,
    #co2-75:hover, #co2-76:hover, #co2-77:hover, #co2-78:hover, #co2-79:hover) ~ #co1 {
  --x2:70;
}
:is(#co2-80:hover, #co2-81:hover, #co2-82:hover, #co2-83:hover, #co2-84:hover,
    #co2-85:hover, #co2-86:hover, #co2-87:hover, #co2-88:hover, #co2-89:hover) ~ #co1 {
  --x2:80;
}
:is(#co2-90:hover, #co2-91:hover, #co2-92:hover, #co2-93:hover, #co2-94:hover,
    #co2-95:hover, #co2-96:hover, #co2-97:hover, #co2-98:hover, #co2-99:hover) ~ #co1 {
  --x2:90;
}

:is(#co2-00:hover, #co2-10:hover, #co2-20:hover, #co2-30:hover, #co2-40:hover,
    #co2-50:hover, #co2-60:hover, #co2-70:hover, #co2-80:hover, #co2-90:hover) ~ #co1 {
  --y2:0;
}
:is(#co2-01:hover, #co2-11:hover, #co2-21:hover, #co2-31:hover, #co2-41:hover,
    #co2-51:hover, #co2-61:hover, #co2-71:hover, #co2-81:hover, #co2-91:hover) ~ #co1 {
  --y2:10;
}
:is(#co2-02:hover, #co2-12:hover, #co2-22:hover, #co2-32:hover, #co2-42:hover,
    #co2-52:hover, #co2-62:hover, #co2-72:hover, #co2-82:hover, #co2-92:hover) ~ #co1 {
  --y2:20;
}
:is(#co2-03:hover, #co2-13:hover, #co2-23:hover, #co2-33:hover, #co2-43:hover,
    #co2-53:hover, #co2-63:hover, #co2-73:hover, #co2-83:hover, #co2-93:hover) ~ #co1 {
  --y2:30;
}
:is(#co2-04:hover, #co2-14:hover, #co2-24:hover, #co2-34:hover, #co2-44:hover,
    #co2-54:hover, #co2-64:hover, #co2-74:hover, #co2-84:hover, #co2-94:hover) ~ #co1 {
  --y2:40;
}
:is(#co2-05:hover, #co2-15:hover, #co2-25:hover, #co2-35:hover, #co2-45:hover,
    #co2-55:hover, #co2-65:hover, #co2-75:hover, #co2-85:hover, #co2-95:hover) ~ #co1 {
  --y2:50;
}
:is(#co2-06:hover, #co2-16:hover, #co2-26:hover, #co2-36:hover, #co2-46:hover,
    #co2-56:hover, #co2-66:hover, #co2-76:hover, #co2-86:hover, #co2-96:hover) ~ #co1 {
  --y2:60;
}
:is(#co2-07:hover, #co2-17:hover, #co2-27:hover, #co2-37:hover, #co2-47:hover,
    #co2-57:hover, #co2-67:hover, #co2-77:hover, #co2-87:hover, #co2-97:hover) ~ #co1 {
  --y2:70;
}
:is(#co2-08:hover, #co2-18:hover, #co2-28:hover, #co2-38:hover, #co2-48:hover,
    #co2-58:hover, #co2-68:hover, #co2-78:hover, #co2-88:hover, #co2-98:hover) ~ #co1 {
  --y2:80;
}
:is(#co2-09:hover, #co2-19:hover, #co2-29:hover, #co2-39:hover, #co2-49:hover,
    #co2-59:hover, #co2-69:hover, #co2-79:hover, #co2-89:hover, #co2-99:hover) ~ #co1 {
  --y2:90;
}

.co1:hover ~ .iris {
  transition:none;
}

:is(#co1-00:hover, #co1-01:hover, #co1-02:hover, #co1-03:hover, #co1-04:hover,
    #co1-05:hover, #co1-06:hover, #co1-07:hover, #co1-08:hover, #co1-09:hover) ~ .iris {
  --x1:0;
}
:is(#co1-10:hover, #co1-11:hover, #co1-12:hover, #co1-13:hover, #co1-14:hover,
    #co1-15:hover, #co1-16:hover, #co1-17:hover, #co1-18:hover, #co1-19:hover) ~ .iris {
  --x1:1;
}
:is(#co1-20:hover, #co1-21:hover, #co1-22:hover, #co1-23:hover, #co1-24:hover,
    #co1-25:hover, #co1-26:hover, #co1-27:hover, #co1-28:hover, #co1-29:hover) ~ .iris {
  --x1:2;
}
:is(#co1-30:hover, #co1-31:hover, #co1-32:hover, #co1-33:hover, #co1-34:hover,
    #co1-35:hover, #co1-36:hover, #co1-37:hover, #co1-38:hover, #co1-39:hover) ~ .iris {
  --x1:3;
}
:is(#co1-40:hover, #co1-41:hover, #co1-42:hover, #co1-43:hover, #co1-44:hover,
    #co1-45:hover, #co1-46:hover, #co1-47:hover, #co1-48:hover, #co1-49:hover) ~ .iris {
  --x1:4;
}
:is(#co1-50:hover, #co1-51:hover, #co1-52:hover, #co1-53:hover, #co1-54:hover,
    #co1-55:hover, #co1-56:hover, #co1-57:hover, #co1-58:hover, #co1-59:hover) ~ .iris {
  --x1:5;
}
:is(#co1-60:hover, #co1-61:hover, #co1-62:hover, #co1-63:hover, #co1-64:hover,
    #co1-65:hover, #co1-66:hover, #co1-67:hover, #co1-68:hover, #co1-69:hover) ~ .iris {
  --x1:6;
}
:is(#co1-70:hover, #co1-71:hover, #co1-72:hover, #co1-73:hover, #co1-74:hover,
    #co1-75:hover, #co1-76:hover, #co1-77:hover, #co1-78:hover, #co1-79:hover) ~ .iris {
  --x1:7;
}
:is(#co1-80:hover, #co1-81:hover, #co1-82:hover, #co1-83:hover, #co1-84:hover,
    #co1-85:hover, #co1-86:hover, #co1-87:hover, #co1-88:hover, #co1-89:hover) ~ .iris {
  --x1:8;
}
:is(#co1-90:hover, #co1-91:hover, #co1-92:hover, #co1-93:hover, #co1-94:hover,
    #co1-95:hover, #co1-96:hover, #co1-97:hover, #co1-98:hover, #co1-99:hover) ~ .iris {
  --x1:9;
}

:is(#co1-00:hover, #co1-10:hover, #co1-20:hover, #co1-30:hover, #co1-40:hover,
    #co1-50:hover, #co1-60:hover, #co1-70:hover, #co1-80:hover, #co1-90:hover) ~ .iris {
  --y1:0;
}
:is(#co1-01:hover, #co1-11:hover, #co1-21:hover, #co1-31:hover, #co1-41:hover,
    #co1-51:hover, #co1-61:hover, #co1-71:hover, #co1-81:hover, #co1-91:hover) ~ .iris {
  --y1:1;
}
:is(#co1-02:hover, #co1-12:hover, #co1-22:hover, #co1-32:hover, #co1-42:hover,
    #co1-52:hover, #co1-62:hover, #co1-72:hover, #co1-82:hover, #co1-92:hover) ~ .iris {
  --y1:2;
}
:is(#co1-03:hover, #co1-13:hover, #co1-23:hover, #co1-33:hover, #co1-43:hover,
    #co1-53:hover, #co1-63:hover, #co1-73:hover, #co1-83:hover, #co1-93:hover) ~ .iris {
  --y1:3;
}
:is(#co1-04:hover, #co1-14:hover, #co1-24:hover, #co1-34:hover, #co1-44:hover,
    #co1-54:hover, #co1-64:hover, #co1-74:hover, #co1-84:hover, #co1-94:hover) ~ .iris {
  --y1:4;
}
:is(#co1-05:hover, #co1-15:hover, #co1-25:hover, #co1-35:hover, #co1-45:hover,
    #co1-55:hover, #co1-65:hover, #co1-75:hover, #co1-85:hover, #co1-95:hover) ~ .iris {
  --y1:5;
}
:is(#co1-06:hover, #co1-16:hover, #co1-26:hover, #co1-36:hover, #co1-46:hover,
    #co1-56:hover, #co1-66:hover, #co1-76:hover, #co1-86:hover, #co1-96:hover) ~ .iris {
  --y1:6;
}
:is(#co1-07:hover, #co1-17:hover, #co1-27:hover, #co1-37:hover, #co1-47:hover,
    #co1-57:hover, #co1-67:hover, #co1-77:hover, #co1-87:hover, #co1-97:hover) ~ .iris {
  --y1:7;
}
:is(#co1-08:hover, #co1-18:hover, #co1-28:hover, #co1-38:hover, #co1-48:hover,
    #co1-58:hover, #co1-68:hover, #co1-78:hover, #co1-88:hover, #co1-98:hover) ~ .iris {
  --y1:8;
}
:is(#co1-09:hover, #co1-19:hover, #co1-29:hover, #co1-39:hover, #co1-49:hover,
    #co1-59:hover, #co1-69:hover, #co1-79:hover, #co1-89:hover, #co1-99:hover) ~ .iris {
  --y1:9;
}

/* 目玉 */
#eyes {
  position:absolute;
  left:174px;
  top:170px;
  width:252px;
  height:160px;
  z-index:-2;
}

/* 輪郭 */
.rim {
  position:absolute;
  top:0px;
  width:120px;
  height:160px;
  background-color:black;
  clip-path:ellipse(60px 80px at 60px 80px);
}

/* 右目の輪郭 */
#rim-r {
  left:0px;
}

/* 左目の輪郭 */
#rim-l {
  left:132px;
}

/* 白目 */
.sclera {
  position:absolute;
  top:16px;
  width:96px;
  height:128px;
  background-color:white;
  clip-path:ellipse(48px 64px at 48px 64px);
}

/* 右目の白目 */
#sclera-r {
  left:12px;
}

/* 左目の白目 */
#sclera-l {
  left:144px;
}

/* 黒目 */
.iris {
  position:absolute;
  width:20px;
  height:27px;
  z-index:-1;
  background-color:black;
  clip-path:ellipse(10px 13px at 10px 13px);
  transition:--x1 0s 10000s, --y1 0s 10000s;

  /* 黒目の位置の計算 */
  /* まだ pow(),sqrt(),sign(),abs() などは実装されていないので,実装されているもので頑張って計算する. */
  --dx:calc(var(--x3) + var(--x2) + var(--x1) - var(--center-x));
  --dy:calc(var(--y3) + var(--y2) + var(--y1) - 250);
  /* 符号 */
  --sdx:clamp(-1, var(--dx), 1);
  --sdy:clamp(-1, var(--dy), 1);
  /* 絶対値,目玉の縦横比は 4:3 */
  --adx:calc(var(--sdx) * var(--dx) * 4);
  --ady:calc(var(--sdy) * var(--dy) * 3);
  --out:clamp(0, var(--adx) * var(--adx) + var(--ady) * var(--ady) - 14400, 1);  /* カーソルは目玉の外? */

  /* カーソルが目玉の外にある場合のための計算 */
  /* ルートを使いたいが sqrt() は実装されていないので,15°単位の位置からの直線補完で近似値を求める.

     tan(15°) -- 0.2679492
     tan(30°) -- 0.5773503
     tan(45°) -- 1
     120 * cos(15°) -- 115.9111
     120 * cos(30°) -- 103.9230
     120 * cos(45°) -- 84.85281 */

  --xy:clamp(0, var(--adx) - var(--ady), 1);  /* --adx > --ady ? */
  /* X 軸方向/Y 軸方向の距離の大きい方を隣辺として計算する. */
  /* max(〜, 1) は --adx = 0 かつ --ady = 0(カーソルが目玉の中心)のとき 0 による除算を避けるため */
  --tan:calc((var(--xy) * var(--ady) + (1 - var(--xy)) * var(--adx))
               / max(var(--xy) * var(--adx) + (1 - var(--xy)) * var(--ady), 1));
  --r1:calc(clamp(-0.1, var(--tan) - 0.2679492, 0) + 0.5);  /* 15°以上?,小数部切り捨て */
  --r2:calc(clamp(-0.1, var(--tan) - 0.5773503, 0) + 0.5);  /* 30°以上?,小数部切り捨て */
  --i0:calc(120 + var(--tan) / 0.2679492 * (115.9111 - 120));
  --i1:calc(115.9111 + (var(--tan) - 0.2679492) / (0.5773503 - 0.2679492) * (103.9230 - 115.9111));
  --i2:calc(103.9230 + (var(--tan) - 0.5773503) / (1 - 0.5773503) * (84.85281 - 103.9230));
  --a:calc((1 - var(--r1)) * var(--i0) + var(--r1) * (1 - var(--r2)) * var(--i1) + var(--r2) * var(--i2));
  --o:calc(var(--a) * var(--tan));
  /* X 座標/Y 座標に戻す.縦横比を戻す.符号を戻す. */
  --dx2:calc(var(--sdx) * ((var(--xy) * var(--a) + (1 - var(--xy)) * var(--o)) / 4));
  --dy2:calc(var(--sdy) * ((var(--xy) * var(--o) + (1 - var(--xy)) * var(--a)) / 3));

  left:calc((var(--out) * var(--dx2) + (1 - var(--out)) * var(--dx) - var(--x3) - var(--x2) + var(--center-x) - 10) * 1px);
  top: calc((var(--out) * var(--dy2) + (1 - var(--out)) * var(--dy) - var(--y3) - var(--y2) + 250 - 13) * 1px);
}

/* 右目の黒目 */
/* 目玉の中心座標は (234, 250) */
#iris-r {
  --center-x:234;
}

/* 左目の黒目 */
/* 目玉の中心座標は (366, 250) */
#iris-l {
  --center-x:366;
}

-->
</STYLE>

</HEAD>

<BODY>
<BR>
<DIV ID="title">スタイルシート xeyes もどき</DIV>
<BR>

<DIV ID="base">
<DIV ID="eyes">
<DIV ID="rim-r" CLASS="rim"></DIV>
<DIV ID="rim-l" CLASS="rim"></DIV>
<DIV ID="sclera-r" CLASS="sclera"></DIV>
<DIV ID="sclera-l" CLASS="sclera"></DIV>
</DIV>

<DIV ID="co3-00" CLASS="co3" STYLE="left:0px; top:0px"></DIV>
<DIV ID="co3-10" CLASS="co3" STYLE="left:100px; top:0px"></DIV>
<DIV ID="co3-20" CLASS="co3" STYLE="left:200px; top:0px"></DIV>
<DIV ID="co3-30" CLASS="co3" STYLE="left:300px; top:0px"></DIV>
<DIV ID="co3-40" CLASS="co3" STYLE="left:400px; top:0px"></DIV>
<DIV ID="co3-50" CLASS="co3" STYLE="left:500px; top:0px"></DIV>
<DIV ID="co3-01" CLASS="co3" STYLE="left:0px; top:100px"></DIV>
<DIV ID="co3-11" CLASS="co3" STYLE="left:100px; top:100px"></DIV>
<DIV ID="co3-21" CLASS="co3" STYLE="left:200px; top:100px"></DIV>
<DIV ID="co3-31" CLASS="co3" STYLE="left:300px; top:100px"></DIV>
<DIV ID="co3-41" CLASS="co3" STYLE="left:400px; top:100px"></DIV>
<DIV ID="co3-51" CLASS="co3" STYLE="left:500px; top:100px"></DIV>
<DIV ID="co3-02" CLASS="co3" STYLE="left:0px; top:200px"></DIV>
<DIV ID="co3-12" CLASS="co3" STYLE="left:100px; top:200px"></DIV>
<DIV ID="co3-22" CLASS="co3" STYLE="left:200px; top:200px"></DIV>
<DIV ID="co3-32" CLASS="co3" STYLE="left:300px; top:200px"></DIV>
<DIV ID="co3-42" CLASS="co3" STYLE="left:400px; top:200px"></DIV>
<DIV ID="co3-52" CLASS="co3" STYLE="left:500px; top:200px"></DIV>
<DIV ID="co3-03" CLASS="co3" STYLE="left:0px; top:300px"></DIV>
<DIV ID="co3-13" CLASS="co3" STYLE="left:100px; top:300px"></DIV>
<DIV ID="co3-23" CLASS="co3" STYLE="left:200px; top:300px"></DIV>
<DIV ID="co3-33" CLASS="co3" STYLE="left:300px; top:300px"></DIV>
<DIV ID="co3-43" CLASS="co3" STYLE="left:400px; top:300px"></DIV>
<DIV ID="co3-53" CLASS="co3" STYLE="left:500px; top:300px"></DIV>
<DIV ID="co3-04" CLASS="co3" STYLE="left:0px; top:400px"></DIV>
<DIV ID="co3-14" CLASS="co3" STYLE="left:100px; top:400px"></DIV>
<DIV ID="co3-24" CLASS="co3" STYLE="left:200px; top:400px"></DIV>
<DIV ID="co3-34" CLASS="co3" STYLE="left:300px; top:400px"></DIV>
<DIV ID="co3-44" CLASS="co3" STYLE="left:400px; top:400px"></DIV>
<DIV ID="co3-54" CLASS="co3" STYLE="left:500px; top:400px"></DIV>

<DIV ID="co2">
<DIV ID="co2-00" CLASS="co2" STYLE="left:0px; top:0px"></DIV>
<DIV ID="co2-10" CLASS="co2" STYLE="left:10px; top:0px"></DIV>
<DIV ID="co2-20" CLASS="co2" STYLE="left:20px; top:0px"></DIV>
<DIV ID="co2-30" CLASS="co2" STYLE="left:30px; top:0px"></DIV>
<DIV ID="co2-40" CLASS="co2" STYLE="left:40px; top:0px"></DIV>
<DIV ID="co2-50" CLASS="co2" STYLE="left:50px; top:0px"></DIV>
<DIV ID="co2-60" CLASS="co2" STYLE="left:60px; top:0px"></DIV>
<DIV ID="co2-70" CLASS="co2" STYLE="left:70px; top:0px"></DIV>
<DIV ID="co2-80" CLASS="co2" STYLE="left:80px; top:0px"></DIV>
<DIV ID="co2-90" CLASS="co2" STYLE="left:90px; top:0px"></DIV>
<DIV ID="co2-01" CLASS="co2" STYLE="left:0px; top:10px"></DIV>
<DIV ID="co2-11" CLASS="co2" STYLE="left:10px; top:10px"></DIV>
<DIV ID="co2-21" CLASS="co2" STYLE="left:20px; top:10px"></DIV>
<DIV ID="co2-31" CLASS="co2" STYLE="left:30px; top:10px"></DIV>
<DIV ID="co2-41" CLASS="co2" STYLE="left:40px; top:10px"></DIV>
<DIV ID="co2-51" CLASS="co2" STYLE="left:50px; top:10px"></DIV>
<DIV ID="co2-61" CLASS="co2" STYLE="left:60px; top:10px"></DIV>
<DIV ID="co2-71" CLASS="co2" STYLE="left:70px; top:10px"></DIV>
<DIV ID="co2-81" CLASS="co2" STYLE="left:80px; top:10px"></DIV>
<DIV ID="co2-91" CLASS="co2" STYLE="left:90px; top:10px"></DIV>
<DIV ID="co2-02" CLASS="co2" STYLE="left:0px; top:20px"></DIV>
<DIV ID="co2-12" CLASS="co2" STYLE="left:10px; top:20px"></DIV>
<DIV ID="co2-22" CLASS="co2" STYLE="left:20px; top:20px"></DIV>
<DIV ID="co2-32" CLASS="co2" STYLE="left:30px; top:20px"></DIV>
<DIV ID="co2-42" CLASS="co2" STYLE="left:40px; top:20px"></DIV>
<DIV ID="co2-52" CLASS="co2" STYLE="left:50px; top:20px"></DIV>
<DIV ID="co2-62" CLASS="co2" STYLE="left:60px; top:20px"></DIV>
<DIV ID="co2-72" CLASS="co2" STYLE="left:70px; top:20px"></DIV>
<DIV ID="co2-82" CLASS="co2" STYLE="left:80px; top:20px"></DIV>
<DIV ID="co2-92" CLASS="co2" STYLE="left:90px; top:20px"></DIV>
<DIV ID="co2-03" CLASS="co2" STYLE="left:0px; top:30px"></DIV>
<DIV ID="co2-13" CLASS="co2" STYLE="left:10px; top:30px"></DIV>
<DIV ID="co2-23" CLASS="co2" STYLE="left:20px; top:30px"></DIV>
<DIV ID="co2-33" CLASS="co2" STYLE="left:30px; top:30px"></DIV>
<DIV ID="co2-43" CLASS="co2" STYLE="left:40px; top:30px"></DIV>
<DIV ID="co2-53" CLASS="co2" STYLE="left:50px; top:30px"></DIV>
<DIV ID="co2-63" CLASS="co2" STYLE="left:60px; top:30px"></DIV>
<DIV ID="co2-73" CLASS="co2" STYLE="left:70px; top:30px"></DIV>
<DIV ID="co2-83" CLASS="co2" STYLE="left:80px; top:30px"></DIV>
<DIV ID="co2-93" CLASS="co2" STYLE="left:90px; top:30px"></DIV>
<DIV ID="co2-04" CLASS="co2" STYLE="left:0px; top:40px"></DIV>
<DIV ID="co2-14" CLASS="co2" STYLE="left:10px; top:40px"></DIV>
<DIV ID="co2-24" CLASS="co2" STYLE="left:20px; top:40px"></DIV>
<DIV ID="co2-34" CLASS="co2" STYLE="left:30px; top:40px"></DIV>
<DIV ID="co2-44" CLASS="co2" STYLE="left:40px; top:40px"></DIV>
<DIV ID="co2-54" CLASS="co2" STYLE="left:50px; top:40px"></DIV>
<DIV ID="co2-64" CLASS="co2" STYLE="left:60px; top:40px"></DIV>
<DIV ID="co2-74" CLASS="co2" STYLE="left:70px; top:40px"></DIV>
<DIV ID="co2-84" CLASS="co2" STYLE="left:80px; top:40px"></DIV>
<DIV ID="co2-94" CLASS="co2" STYLE="left:90px; top:40px"></DIV>
<DIV ID="co2-05" CLASS="co2" STYLE="left:0px; top:50px"></DIV>
<DIV ID="co2-15" CLASS="co2" STYLE="left:10px; top:50px"></DIV>
<DIV ID="co2-25" CLASS="co2" STYLE="left:20px; top:50px"></DIV>
<DIV ID="co2-35" CLASS="co2" STYLE="left:30px; top:50px"></DIV>
<DIV ID="co2-45" CLASS="co2" STYLE="left:40px; top:50px"></DIV>
<DIV ID="co2-55" CLASS="co2" STYLE="left:50px; top:50px"></DIV>
<DIV ID="co2-65" CLASS="co2" STYLE="left:60px; top:50px"></DIV>
<DIV ID="co2-75" CLASS="co2" STYLE="left:70px; top:50px"></DIV>
<DIV ID="co2-85" CLASS="co2" STYLE="left:80px; top:50px"></DIV>
<DIV ID="co2-95" CLASS="co2" STYLE="left:90px; top:50px"></DIV>
<DIV ID="co2-06" CLASS="co2" STYLE="left:0px; top:60px"></DIV>
<DIV ID="co2-16" CLASS="co2" STYLE="left:10px; top:60px"></DIV>
<DIV ID="co2-26" CLASS="co2" STYLE="left:20px; top:60px"></DIV>
<DIV ID="co2-36" CLASS="co2" STYLE="left:30px; top:60px"></DIV>
<DIV ID="co2-46" CLASS="co2" STYLE="left:40px; top:60px"></DIV>
<DIV ID="co2-56" CLASS="co2" STYLE="left:50px; top:60px"></DIV>
<DIV ID="co2-66" CLASS="co2" STYLE="left:60px; top:60px"></DIV>
<DIV ID="co2-76" CLASS="co2" STYLE="left:70px; top:60px"></DIV>
<DIV ID="co2-86" CLASS="co2" STYLE="left:80px; top:60px"></DIV>
<DIV ID="co2-96" CLASS="co2" STYLE="left:90px; top:60px"></DIV>
<DIV ID="co2-07" CLASS="co2" STYLE="left:0px; top:70px"></DIV>
<DIV ID="co2-17" CLASS="co2" STYLE="left:10px; top:70px"></DIV>
<DIV ID="co2-27" CLASS="co2" STYLE="left:20px; top:70px"></DIV>
<DIV ID="co2-37" CLASS="co2" STYLE="left:30px; top:70px"></DIV>
<DIV ID="co2-47" CLASS="co2" STYLE="left:40px; top:70px"></DIV>
<DIV ID="co2-57" CLASS="co2" STYLE="left:50px; top:70px"></DIV>
<DIV ID="co2-67" CLASS="co2" STYLE="left:60px; top:70px"></DIV>
<DIV ID="co2-77" CLASS="co2" STYLE="left:70px; top:70px"></DIV>
<DIV ID="co2-87" CLASS="co2" STYLE="left:80px; top:70px"></DIV>
<DIV ID="co2-97" CLASS="co2" STYLE="left:90px; top:70px"></DIV>
<DIV ID="co2-08" CLASS="co2" STYLE="left:0px; top:80px"></DIV>
<DIV ID="co2-18" CLASS="co2" STYLE="left:10px; top:80px"></DIV>
<DIV ID="co2-28" CLASS="co2" STYLE="left:20px; top:80px"></DIV>
<DIV ID="co2-38" CLASS="co2" STYLE="left:30px; top:80px"></DIV>
<DIV ID="co2-48" CLASS="co2" STYLE="left:40px; top:80px"></DIV>
<DIV ID="co2-58" CLASS="co2" STYLE="left:50px; top:80px"></DIV>
<DIV ID="co2-68" CLASS="co2" STYLE="left:60px; top:80px"></DIV>
<DIV ID="co2-78" CLASS="co2" STYLE="left:70px; top:80px"></DIV>
<DIV ID="co2-88" CLASS="co2" STYLE="left:80px; top:80px"></DIV>
<DIV ID="co2-98" CLASS="co2" STYLE="left:90px; top:80px"></DIV>
<DIV ID="co2-09" CLASS="co2" STYLE="left:0px; top:90px"></DIV>
<DIV ID="co2-19" CLASS="co2" STYLE="left:10px; top:90px"></DIV>
<DIV ID="co2-29" CLASS="co2" STYLE="left:20px; top:90px"></DIV>
<DIV ID="co2-39" CLASS="co2" STYLE="left:30px; top:90px"></DIV>
<DIV ID="co2-49" CLASS="co2" STYLE="left:40px; top:90px"></DIV>
<DIV ID="co2-59" CLASS="co2" STYLE="left:50px; top:90px"></DIV>
<DIV ID="co2-69" CLASS="co2" STYLE="left:60px; top:90px"></DIV>
<DIV ID="co2-79" CLASS="co2" STYLE="left:70px; top:90px"></DIV>
<DIV ID="co2-89" CLASS="co2" STYLE="left:80px; top:90px"></DIV>
<DIV ID="co2-99" CLASS="co2" STYLE="left:90px; top:90px"></DIV>

<DIV ID="co1">
<DIV ID="co1-00" CLASS="co1" STYLE="left:0px; top:0px"></DIV>
<DIV ID="co1-10" CLASS="co1" STYLE="left:1px; top:0px"></DIV>
<DIV ID="co1-20" CLASS="co1" STYLE="left:2px; top:0px"></DIV>
<DIV ID="co1-30" CLASS="co1" STYLE="left:3px; top:0px"></DIV>
<DIV ID="co1-40" CLASS="co1" STYLE="left:4px; top:0px"></DIV>
<DIV ID="co1-50" CLASS="co1" STYLE="left:5px; top:0px"></DIV>
<DIV ID="co1-60" CLASS="co1" STYLE="left:6px; top:0px"></DIV>
<DIV ID="co1-70" CLASS="co1" STYLE="left:7px; top:0px"></DIV>
<DIV ID="co1-80" CLASS="co1" STYLE="left:8px; top:0px"></DIV>
<DIV ID="co1-90" CLASS="co1" STYLE="left:9px; top:0px"></DIV>
<DIV ID="co1-01" CLASS="co1" STYLE="left:0px; top:1px"></DIV>
<DIV ID="co1-11" CLASS="co1" STYLE="left:1px; top:1px"></DIV>
<DIV ID="co1-21" CLASS="co1" STYLE="left:2px; top:1px"></DIV>
<DIV ID="co1-31" CLASS="co1" STYLE="left:3px; top:1px"></DIV>
<DIV ID="co1-41" CLASS="co1" STYLE="left:4px; top:1px"></DIV>
<DIV ID="co1-51" CLASS="co1" STYLE="left:5px; top:1px"></DIV>
<DIV ID="co1-61" CLASS="co1" STYLE="left:6px; top:1px"></DIV>
<DIV ID="co1-71" CLASS="co1" STYLE="left:7px; top:1px"></DIV>
<DIV ID="co1-81" CLASS="co1" STYLE="left:8px; top:1px"></DIV>
<DIV ID="co1-91" CLASS="co1" STYLE="left:9px; top:1px"></DIV>
<DIV ID="co1-02" CLASS="co1" STYLE="left:0px; top:2px"></DIV>
<DIV ID="co1-12" CLASS="co1" STYLE="left:1px; top:2px"></DIV>
<DIV ID="co1-22" CLASS="co1" STYLE="left:2px; top:2px"></DIV>
<DIV ID="co1-32" CLASS="co1" STYLE="left:3px; top:2px"></DIV>
<DIV ID="co1-42" CLASS="co1" STYLE="left:4px; top:2px"></DIV>
<DIV ID="co1-52" CLASS="co1" STYLE="left:5px; top:2px"></DIV>
<DIV ID="co1-62" CLASS="co1" STYLE="left:6px; top:2px"></DIV>
<DIV ID="co1-72" CLASS="co1" STYLE="left:7px; top:2px"></DIV>
<DIV ID="co1-82" CLASS="co1" STYLE="left:8px; top:2px"></DIV>
<DIV ID="co1-92" CLASS="co1" STYLE="left:9px; top:2px"></DIV>
<DIV ID="co1-03" CLASS="co1" STYLE="left:0px; top:3px"></DIV>
<DIV ID="co1-13" CLASS="co1" STYLE="left:1px; top:3px"></DIV>
<DIV ID="co1-23" CLASS="co1" STYLE="left:2px; top:3px"></DIV>
<DIV ID="co1-33" CLASS="co1" STYLE="left:3px; top:3px"></DIV>
<DIV ID="co1-43" CLASS="co1" STYLE="left:4px; top:3px"></DIV>
<DIV ID="co1-53" CLASS="co1" STYLE="left:5px; top:3px"></DIV>
<DIV ID="co1-63" CLASS="co1" STYLE="left:6px; top:3px"></DIV>
<DIV ID="co1-73" CLASS="co1" STYLE="left:7px; top:3px"></DIV>
<DIV ID="co1-83" CLASS="co1" STYLE="left:8px; top:3px"></DIV>
<DIV ID="co1-93" CLASS="co1" STYLE="left:9px; top:3px"></DIV>
<DIV ID="co1-04" CLASS="co1" STYLE="left:0px; top:4px"></DIV>
<DIV ID="co1-14" CLASS="co1" STYLE="left:1px; top:4px"></DIV>
<DIV ID="co1-24" CLASS="co1" STYLE="left:2px; top:4px"></DIV>
<DIV ID="co1-34" CLASS="co1" STYLE="left:3px; top:4px"></DIV>
<DIV ID="co1-44" CLASS="co1" STYLE="left:4px; top:4px"></DIV>
<DIV ID="co1-54" CLASS="co1" STYLE="left:5px; top:4px"></DIV>
<DIV ID="co1-64" CLASS="co1" STYLE="left:6px; top:4px"></DIV>
<DIV ID="co1-74" CLASS="co1" STYLE="left:7px; top:4px"></DIV>
<DIV ID="co1-84" CLASS="co1" STYLE="left:8px; top:4px"></DIV>
<DIV ID="co1-94" CLASS="co1" STYLE="left:9px; top:4px"></DIV>
<DIV ID="co1-05" CLASS="co1" STYLE="left:0px; top:5px"></DIV>
<DIV ID="co1-15" CLASS="co1" STYLE="left:1px; top:5px"></DIV>
<DIV ID="co1-25" CLASS="co1" STYLE="left:2px; top:5px"></DIV>
<DIV ID="co1-35" CLASS="co1" STYLE="left:3px; top:5px"></DIV>
<DIV ID="co1-45" CLASS="co1" STYLE="left:4px; top:5px"></DIV>
<DIV ID="co1-55" CLASS="co1" STYLE="left:5px; top:5px"></DIV>
<DIV ID="co1-65" CLASS="co1" STYLE="left:6px; top:5px"></DIV>
<DIV ID="co1-75" CLASS="co1" STYLE="left:7px; top:5px"></DIV>
<DIV ID="co1-85" CLASS="co1" STYLE="left:8px; top:5px"></DIV>
<DIV ID="co1-95" CLASS="co1" STYLE="left:9px; top:5px"></DIV>
<DIV ID="co1-06" CLASS="co1" STYLE="left:0px; top:6px"></DIV>
<DIV ID="co1-16" CLASS="co1" STYLE="left:1px; top:6px"></DIV>
<DIV ID="co1-26" CLASS="co1" STYLE="left:2px; top:6px"></DIV>
<DIV ID="co1-36" CLASS="co1" STYLE="left:3px; top:6px"></DIV>
<DIV ID="co1-46" CLASS="co1" STYLE="left:4px; top:6px"></DIV>
<DIV ID="co1-56" CLASS="co1" STYLE="left:5px; top:6px"></DIV>
<DIV ID="co1-66" CLASS="co1" STYLE="left:6px; top:6px"></DIV>
<DIV ID="co1-76" CLASS="co1" STYLE="left:7px; top:6px"></DIV>
<DIV ID="co1-86" CLASS="co1" STYLE="left:8px; top:6px"></DIV>
<DIV ID="co1-96" CLASS="co1" STYLE="left:9px; top:6px"></DIV>
<DIV ID="co1-07" CLASS="co1" STYLE="left:0px; top:7px"></DIV>
<DIV ID="co1-17" CLASS="co1" STYLE="left:1px; top:7px"></DIV>
<DIV ID="co1-27" CLASS="co1" STYLE="left:2px; top:7px"></DIV>
<DIV ID="co1-37" CLASS="co1" STYLE="left:3px; top:7px"></DIV>
<DIV ID="co1-47" CLASS="co1" STYLE="left:4px; top:7px"></DIV>
<DIV ID="co1-57" CLASS="co1" STYLE="left:5px; top:7px"></DIV>
<DIV ID="co1-67" CLASS="co1" STYLE="left:6px; top:7px"></DIV>
<DIV ID="co1-77" CLASS="co1" STYLE="left:7px; top:7px"></DIV>
<DIV ID="co1-87" CLASS="co1" STYLE="left:8px; top:7px"></DIV>
<DIV ID="co1-97" CLASS="co1" STYLE="left:9px; top:7px"></DIV>
<DIV ID="co1-08" CLASS="co1" STYLE="left:0px; top:8px"></DIV>
<DIV ID="co1-18" CLASS="co1" STYLE="left:1px; top:8px"></DIV>
<DIV ID="co1-28" CLASS="co1" STYLE="left:2px; top:8px"></DIV>
<DIV ID="co1-38" CLASS="co1" STYLE="left:3px; top:8px"></DIV>
<DIV ID="co1-48" CLASS="co1" STYLE="left:4px; top:8px"></DIV>
<DIV ID="co1-58" CLASS="co1" STYLE="left:5px; top:8px"></DIV>
<DIV ID="co1-68" CLASS="co1" STYLE="left:6px; top:8px"></DIV>
<DIV ID="co1-78" CLASS="co1" STYLE="left:7px; top:8px"></DIV>
<DIV ID="co1-88" CLASS="co1" STYLE="left:8px; top:8px"></DIV>
<DIV ID="co1-98" CLASS="co1" STYLE="left:9px; top:8px"></DIV>
<DIV ID="co1-09" CLASS="co1" STYLE="left:0px; top:9px"></DIV>
<DIV ID="co1-19" CLASS="co1" STYLE="left:1px; top:9px"></DIV>
<DIV ID="co1-29" CLASS="co1" STYLE="left:2px; top:9px"></DIV>
<DIV ID="co1-39" CLASS="co1" STYLE="left:3px; top:9px"></DIV>
<DIV ID="co1-49" CLASS="co1" STYLE="left:4px; top:9px"></DIV>
<DIV ID="co1-59" CLASS="co1" STYLE="left:5px; top:9px"></DIV>
<DIV ID="co1-69" CLASS="co1" STYLE="left:6px; top:9px"></DIV>
<DIV ID="co1-79" CLASS="co1" STYLE="left:7px; top:9px"></DIV>
<DIV ID="co1-89" CLASS="co1" STYLE="left:8px; top:9px"></DIV>
<DIV ID="co1-99" CLASS="co1" STYLE="left:9px; top:9px"></DIV>

<DIV ID="iris-r" CLASS="iris"></DIV>
<DIV ID="iris-l" CLASS="iris"></DIV>
</DIV>

</DIV>

</DIV>

</BODY>

</HTML>