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