* { margin: 0; }

body { font: 10pt Verdana,sans-serif; margin:0; padding:0; border:0; 
        background: #AFB1D1; color: #000; }

table { margin: auto; }
h2 { text-align: center; }
h3 { margin-left: 18px; }
a { text-decoration: none; font-weight: bold; color: #4B459D; }
a:hover { color: #00C; }

.underline { border-bottom: 1px solid #000; }
.banner { display: block; margin: auto; text-align: center; }
.fl { float: left;  margin-right: 16px; }
.fr { float: right; margin-left:  16px; }
.cl { clear: both;  }



.layout { width: 742px; height: 100%; border: 0px; margin: auto; border-spacing: 0px; }
.layout td {  border: 0px; padding: 0; }
.layout tr { vertical-align: top; }
td.left   { width: 126px; background: #7884B3 url('layout/gradient-left.png');  }
td.right  { width: 126px; background: #7884B3 url('layout/gradient-right.png'); }
td.center { background: #FFF; }

.content { margin-top: 12px; }
.content p { margin: 19px; text-align: justify; }

.main-menu { width: 462px; height: 328px; margin: auto; background: #FFF url('main-peorth.png'); }
.main-menu div { width: 200px;  border: 1px dotted #000; position: relative; top: 78px; left: 230px; background: #FFF; }
.main-menu a { display: block; background: #C7C5DD; padding: 2px 0px; margin: 4px; border: 1px solid #88F; text-align: center; }
.main-menu a:hover { background: #338; color: #FFF; }

.main-quote { margin: 40px auto; font: italic 11pt Georgia,serif;  }
.main-quote div { text-align: right; margin-top: 10px; color: #338; }

/* Character related */

 blockquote { border: 1px dashed #666; margin: 18px; border-width: 1px 0px; padding: 19px 0px; }
 blockquote div { font: bold 12pt Georgia,serif; color: #666; margin-bottom: 9px; }
 blockquote ul { padding: 0px 8px; }
 blockquote li { margin: 8px 0px; padding: 0; font-style: italic; }

.closing  { margin: 20px; } 
.mail { margin: 20px; }
img.back { border: 0; margin: 30px auto; width: 355px; height: 26px; display: block; }

#charlist { display: block; width: 125px; height: 300px; border: 0px; margin-top: 20px; }
#chartable { width: 100%; border: 0px; }
#chartable td { text-align: center; }
#chartable img { width: 80px; height: 234px; border: 0; margin-top: 22px; }

.other-char { margin-bottom: 39px; }
.other-char img { float: left; margin: 0px 18px; }
.other-char h3  {  margin-bottom: 9px; }
.other-char div.q { color: #006; font: 11pt cursive; display: block; margin-top: 10px; }
.other-char br  { clear: both; }
.other-char blockquote { padding: 2px 9px; border-color: #AAA; }
.divider { border-top: 1px dashed #AAA; margin: 18px; }

/* colorize: Hue 173 - sat 80 */