@import "reset.css";

body { text-align: center; margin: 0px auto; font-family: arial; color: blue;}

#content   { width: 900px; margin: 0px auto; text-align: center; background-color: white; height: 100%; position: relative; }

table { margin: 0px auto; } 

img  { margin: 0px; }

a { text-decoration: none; font: 12px arial; color: blue; }

.arthur, .rodi, .melody, .galm, .elise, .panzer, .rilix, .basso, .doyle, .akane, .lisa, p.top, .forte, .holy-ark, h1.top, p.top, .sfc1 { background: url('images/main_img.png') no-repeat; }
.arthur, .rodi, .melody, .basso, .doyle, .akane, .lisa, .forte, .rilix, .panzer, .galm, .elise { display: block; height: 64px; width: 53px; border: 2px solid black; margin-bottom: 3px; }

#images{ list-style-type: none; position: absolute; left: 200px; width: 540px; padding: 0px; margin: 0px; padding: 0px; top: 65px; }

#images li { text-align: center; margin: 0px 5px; padding: 0px; float: left; }

div.bottom { width: 684px; height: 10px; background-color: black; position: absolute; top: 590px; left: 120px; margin: 0px; padding: 0px; font-size: 0px;}

h1.top  { width: 684px; height: 104px; background-position: -1px -1px; text-align: right; margin: 0px; position: relative; padding: 0px;}

h1.top a { display: block; width: 50px; position: absolute; right: 5px; top: 35px;}

h1.side { width: 100px; text-align: left; position: absolute; left: 140px; top: 280px; }

h1.side a { display: block; color: #C00000; font: bold 15px arial; margin: 10px 0px; }     

#leftbar { background-color: black; width: 120px; height: 600px; float: left; text-align: center; }

#leftbar a { color: blue; font: bold 18px arial; text-decoration: none; }

#leftbar a.mail { display: block; position: absolute; top: 585px; left: 3px; color: blue; font: bold 10px arial; text-decoration: none; }

ul.middle { list-style-type: none; position: absolute; top: 200px; left: 250px; margin: 0px; width: 400px; height: 270px;}

.middle li { display: block; }

li.center { display: block; margin: 0; padding: 0px; width: 100px; height: 15px; position: absolute; left: 150px; }

img.pic {border: 2px solid black;}

p.top { width: 94px; height: 99px; background-position: 0 -240px; margin: 10px 13px 5px;}


.arthur { background-position: -110px -106px; }

.rodi { background-position: -110px -171px; }

.melody { background-position: -163px -106px; }

.galm { background-position: -55px -171px; position: absolute; top: 170px; left: 120px; }

.elise { background-position: -1px -171px; position: absolute; top: 170px; right: 121px; }

.panzer { background-position: -55px -106px; position: absolute; top: 80px; right: 60px; }

.rilix { background-position: -1px -106px; position: absolute; top: 80px; left: 58px; }

.basso { background-position: -163px -171px; }

.akane { background-position: -217px -106px; }

.lisa { background-position: -271px -106px; }

.p.top { background-position: -222px -108px; }

.forte { background-position: -217px -171px; }

.holy-ark { background-position: -455px -108px; height: 147px; width: 157px; position: absolute; left: 120px; top: 18px;}

.doyle { background-position: -271px -171px; }

.rilix-text, .panzer-text, .galm-text, .elise-text { height: 15px; width: 53px; }
.rilix-text { position: absolute; top: 150px; left: 58px; }
.panzer-text { position: absolute; top: 150px; right: 60px; }
.galm-text { position: absolute; top: 240px; left: 120px; }
.elise-text { position: absolute; top: 240px; right: 121px; }

div.sfc { position: absolute; top: 450px; width: 130px; right: 100px; }
.sfc1 { display: block; width: 115px; height: 103px; background-position: -98px -236px; position: relative; left: 8px;}
.sfc2 { display: block; width: 120px; text-align: center; text-decoration: none; font: 12px arial; color: blue; position: relative; left: 3px;}