body, h1,h2,h3,h4,h5,h6,
p, ul {
margin: 0;
padding: 0;
}

body {
 background: url('images/bg.png');
 font-family: "playtime", sans-serif;
 font-size: 1.0em;
 color: #444;
}

h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 margin: 5px 0;
}

h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

p { margin: 10px 0; }

.clear { clear: both; }

#container {
 width: 840px;
 margin: 5px auto;
 #border: 1px solid #9cf;
}

header {
 #border: 1px solid #9cf;
 #padding: 10px 20px;
 margin-bottom: 5px;
}

header nav ul { list-style: none; }

header nav li { display: inline; }

header nav a {
 display: inline-block;
 float: left;
 #padding: 10px;
 text-indent: -9999px;
 font-size: 1px;
 overflow: hidden;
 width: 120px;
 height: 50px;
}

#featureimg  {
 background: url('images/topimg.png');
 height: 393px;
 text-indent: -9999px;
 white-space: nowrap;
}

.nav-top a, .nav-charas a, .nav-screens a, .nav-down a,
.nav-credits a, .nav-contact a, .nav-misc a { 
background: url('images/nav.png'); }
.nav-top a { background-position: 0 0; }
.nav-top a:hover { background-position: 0 -50px; }
.nav-charas a { background-position: -120px 0; }
.nav-charas a:hover { background-position: -120px -50px; }
.nav-screens a { background-position: -240px 0; }
.nav-screens a:hover { background-position: -240px -50px; }
.nav-down a { background-position: -360px 0; }
.nav-down a:hover { background-position: -360px -50px; }
.nav-credits a { background-position: -480px 0; }
.nav-credits a:hover { background-position: -480px -50px; }
.nav-contact a { background-position: -600px 0; }
.nav-contact a:hover { background-position: -600px -50px; }
.nav-misc a { background-position: -720px 0; }
.nav-misc a:hover { background-position: -720px -50px; }

#content {
 #border: 1px solid #9cf;
 background: url('images/roundrect_02.png');
 padding: 10px 60px;
}

#content ul { padding-left: 40px; }

footer {
 #border: 1px solid #9cf;
 background: url('images/roundrect_02.png');
 padding: 10px 30px 10px 30px;
 height: 20px;
}

.copy { float: right; text-align: right; }

.rtop {
background: url('images/roundrect_01.png');
height: 15px;
width: 840px;
}

.rbottom {
 background: url('images/roundrect_03.png');
 height: 15px;
 width: 840px;
}

/* Character Nagivation */

nav.nav-chara-container { 
 width:780px; 
 margin-left: -32px;
}

ul.nav-chara { list-style: none; }

ul.nav-chara { display: inline; }

ul.nav-chara a {
 display: inline-block;
 float: left;
 #padding: 10px;
 text-indent: -9999px;
 font-size: 1px;
 overflow: hidden;
 width: 130px;
 height: 130px;
}

.nav-anna a, .nav-mikaela a, .nav-tristina a,
.nav-aurelia a, .nav-julia a, .nav-ryne a { 
background: url('images/chara_btns.png'); }
.nav-anna a { background-position: 0 0; }
.nav-anna a:hover { background-position: 0 -130px; }
.nav-mikaela a { background-position: -130px 0; }
.nav-mikaela a:hover { background-position: -130px -130px; }
.nav-tristina a { background-position: -260px 0; }
.nav-tristina a:hover { background-position: -260px -130px; }
.nav-aurelia a { background-position: -390px 0; }
.nav-aurelia a:hover { background-position: -390px -130px; }
.nav-julia a { background-position: -520px 0; }
.nav-julia a:hover { background-position: -520px -130px; }
.nav-ryne a { background-position: -650px 0; }
.nav-ryne a:hover { background-position: -650px -130px; }

.nav-elena a {
 text-indent: 0 !important;
 font-size: inherit !important;
 width: 160px !important;
 height: 30px !important;
 margin-top: 10px;
 margin-left: 32px;
}

.chara-anna, .chara-mikaela, .chara-tristina,
.chara-aurelia, .chara-julia, .chara-ryne, .chara-elena {
 border: dotted 1px #06f;
 height: 400px;
 padding: 0 20px;
}

.chara-anna h2, .chara-anna h4,
.chara-mikaela h2, .chara-mikaela h4,
.chara-tristina h2, .chara-tristina h4,
.chara-aurelia h2, .chara-aurelia h4,
.chara-julia h2, .chara-julia h4,
.chara-ryne h2, .chara-ryne h4,
.chara-elena h2, .chara-elena h4 {
 text-indent: -9999px;
 font-size: 1px;
 overflow: hidden;
 margin-bottom: -5px;
}

.chara-anna h2, .chara-mikaela h2, .chara-tristina h2, .chara-aurelia h2, 
.chara-julia h2, .chara-ryne h2, .chara-elena h2 {
 background: url('images/chara_names.png');
 width: 300px;
 height: 60px;
}

.chara-anna h2 { background-position: 0 0; }
.chara-mikaela h2 { background-position: 0 -60px; }
.chara-tristina h2 { background-position: 0 -120px; }
.chara-aurelia h2 { background-position: 0 -180px; }
.chara-julia h2 { background-position: 0 -240px; }
.chara-ryne h2 { background-position: 0 -300px; }
.chara-elena h2 { background-position: 0 -360px; }

/* Character Voice Samples */
.chara-anna .voice-sample, .chara-mikaela .voice-sample, 
.chara-tristina .voice-sample, .chara-aurelia .voice-sample,
.chara-julia .voice-sample, .chara-ryne .voice-sample {
 background: url('images/chara_voice.png');
 height: 40px;
 text-indent: -9999px;
 width: 200px;
 font-size: 1px;
 overflow: hidden;
}

.chara-anna .voice-sample { background-position: 0 0; }
.chara-mikaela .voice-sample { background-position: 0 -40px; }
.chara-tristina .voice-sample { background-position: 0 -80px; }
.chara-aurelia .voice-sample { background-position: 0 -120px; }
.chara-julia .voice-sample { background-position: 0 -160px; }
.chara-ryne .voice-sample { background-position: 0 -200px; }

.voice-sample a { 
 background: url('images/chara_mics.png');
 display: inline-block;
 width: 40px;
 height: 40px;
 float: right;
}
.chara-anna .voice-sample a:hover { background-position: -40px 0; }
.chara-mikaela .voice-sample a:hover { background-position: -80px 0; }
.chara-tristina .voice-sample a:hover { background-position: -120px 0; }
.chara-aurelia .voice-sample a:hover { background-position: -160px 0; }
.chara-julia .voice-sample a:hover { background-position: -200px 0; }
.chara-ryne .voice-sample a:hover { background-position: -240px 0; }

/* Other character page formatting */
.chara-anna > p, .chara-mikaela > p, .chara-tristina > p, 
.chara-aurelia > p, .chara-julia > p, .chara-ryne > p, .chara-elena > p {
 padding: 20px 0;
 height: 120px;
}

/* News system */
#news-top {
 background: #cae0ff;
 float: right; 
 border: solid 1px #69f;
 margin: 0 0 0 20px;
 width: 240px;
}

#news-top h4 { margin-left: 10px; }

#update { 
 background: #e5fbff;
 height: 120px;
 padding: 5px 10px;
 overflow-y: scroll;
}

#news-top time { font-size: 0.8em; }

/* Screenshots page */

.gallery {
 width: 740px;
 margin-left: auto;
 margin-right: auto;
}

.thumb { float: left; }

.thumb a img { 
 border: solid 1px #bbb;
 margin: 0 2px;
 padding: 8px 15px;
}
.thumb a:hover img { border: solid 1px #06f; }

/* Download page */
.large { font-size: 1.2em; }