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

body {
 background: url('img/bg.png');
 background-attachment: fixed;
 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 {
 margin: 5px auto;
 width: 1050px;
}

[id^="featureimg"] {
 text-indent: -9999px;
 white-space: nowrap;
 margin-bottom: 5px;
}

#featureimg {
 background: url('img/topimg.png') no-repeat;
 height: 360px;
}

#featureimg-small {
 background: url('img/topimg_sm.png') no-repeat;
 height: 100px;
}

footer { 
 display: flex;
 justify-content: space-between;
 background: #fff;
 border: 1px solid #9cf; 
 margin-top: 5px;
 padding: 6px 20px;
}

.twitter iframe { margin-top: 4px; }
.copy { margin-top: 5px; } /* because the twitter button makes it uncentered*/

header nav { display: flex; }

header nav ul {
 display: flex;
 justify-content: center;
 background: url('img/nav_bg.png') repeat-x;
 width: 970px;
 height: 90px;
 list-style: none;
}

header nav::before, header nav::after {
 content: "";
 width: 40px;
 height: 90px;
}

header nav::before { background: url('img/nav_bg_left.png'); }
header nav::after { background: url('img/nav_bg_right.png'); }

header nav a {
 background: url('img/nav.png');
 display: inline-block;
 text-indent: -9999px;
 font-size: 1px;
 overflow: hidden;
 margin: 24px 0;
 width: 132px;
 height: 42px;
}

.nav-top a { background-position: 0 0; }
.nav-top a:hover { background-position: 0 -42px; }
.nav-story a { background-position: -132px 0; }
.nav-story a:hover { background-position: -132px -42px; }
.nav-chara a { background-position: -264px 0; }
.nav-chara a:hover { background-position: -264px -42px; }
.nav-gallery a { background-position: -396px 0; }
.nav-gallery a:hover { background-position: -396px -42px; }
.nav-download a { background-position: -528px 0; }
.nav-download a:hover { background-position: -528px -42px; }
.nav-credits a { background-position: -660px 0; }
.nav-credits a:hover { background-position: -660px -42px; }
.nav-contact a { background-position: -792px 0; }
.nav-contact a:hover { background-position: -792px -42px; }

#content { min-height: 640px; }

/*************
Image headers
**************/
#updates h3,#what h3,#features h3,
#gallery h3,#download h3,#credits h3 {
 height: 60px;
 width: 590px;
 /*text-indent: -9999px;
 white-space: nowrap;*/
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
}

#updates h3::before,#what h3::before,#features h3::before,
#gallery h3::before,#download h3::before,#credits h3::before {
 content: "";
 display: block;
 width: 60px;
 height: 60px;
}

#updates h3 { background: url('img/h_updates.png') no-repeat 100% 50%; }
#updates h3::before { background: url('img/h_circles.png') -61px 0; }
#what h3 { background: url('img/h_what.png') no-repeat 100% 50%; }
#what h3::before { background: url('img/h_circles.png') 0 0; }
#features h3 { background: url('img/h_features.png') no-repeat 100% 50%; }
#features h3::before { background: url('img/h_circles.png') -122px 0; }
#gallery h3 { background: url('img/h_gallery.png') no-repeat 100% 50%; }
#gallery h3::before { background: url('img/h_circles.png') 0px -61px; }
#download h3 { background: url('img/h_download.png') no-repeat 100% 50%; }
#download h3::before { background: url('img/h_circles.png') -61px -61px; }
#credits h3 { background: url('img/h_credits.png') no-repeat 100% 50%; }
#credits h3::before { background: url('img/h_circles.png') -122px -61px; }

/************
Index page
*************/

.flex-cont {
 display: flex;
 justify-content: space-between;
}

aside {
 margin-top: 5px;
 border: 1px solid #9cf;
 background: #fff;
 width: 270px;
 min-height: 740px;
 order: 1;
}

.twitter h3{
 background: url('img/h_twitter.png') no-repeat 100% 50%;
 height: 60px;
 position: relative;
 z-index: 1;
 font-size: 1px; /* Not good, but works (same with line below) */
 color: #fff;
}

.twitter h3::after {
 content: "";
 display: block;
 width: 60px;
 height: 60px;
 margin: -2px 0 0 210px;
 background: url('img/h_circles.png') -183px 0;
}

#intro { 
 margin-top: 5px;
 border: 1px solid #9cf;
 background: #fff;
 padding: 20px 30px;
 width: 710px;
 min-height: 700px;
}

#intro p { margin-left: 40px; margin-right: 40px; }
#intro ul { margin-left: 60px; margin-right: 40px; }

#intro div:not(#features) { margin-bottom: 25px; }

#updates > article { margin-left: 40px; }
#updates > article:not(:first-of-type) { margin-top: 20px; }

/************
Story page
*************/

#story::before, #story::after {
 content: "";
 display: block;
 width: 1050px;
 height: 20px;
}
#story::before { background: url('img/content_bg_top.png'); }
#story::after { background: url('img/content_bg_bottom.png'); }

.story-wrap {
 position: relative;
 background: url('img/content_bg.png') repeat-y;
 text-align: center;
 height: 740px;
}

[class^="story-"] > img, [class^="story-pict-"] {
 position: absolute;
}

.story-head img {
 width: 460px;
 top: 0;
 left: 50%;
 margin-left: -230px;
}

.story-txt img {
 width: 1000px;
 top: 130px;
 left: 50%;
 margin-left: -500px;
}

.story-pict-a, .story-pict-b {
 width: 240px;
 height: 135px;
 box-shadow: 3px 5px 6px #000;
 z-index: -1;
}

.story-pict-a {
 background: url('img/story_pict_a.png');
 left: 30px;
 top: 30px;
 transform: rotate(-15deg);
}

.story-pict-b {
 background: url('img/story_pict_b.png');
 right: 30px;
 bottom: 35px;
 transform: rotate(15deg);
}

.story-wrap::before, .story-wrap::after {
 position: absolute;
 content: "";
 z-index: -1;
}

.story-wrap::before {
 background: url('img/story_pict_c.png');
 width: 177px;
 height: 121px;
 left: 30px;
 bottom: 10px;
 transform: rotate(-10deg);
}

.story-wrap::after {
 background: url('img/story_pict_d.png');
 width: 75px;
 height: 90px;
 right: 25px;
 top: 10px;
 transform: rotate(10deg);
}

/************
Character pages
*************/

#chara-list {
 height: 150px;
 margin: 10px 0;
}

#chara-list ul {
 display: flex;
 justify-content: space-between;
 margin: 0 auto;
 list-style: none;
 width: 992px;
}

#chara-list a {
 background: url('img/btn_chara_main.png');
 display: inline-block;
 text-indent: -9999px;
 font-size: 1px;
 overflow: hidden;
 width: 120px;
 height: 150px;
}

#chara-list .subch a {
 background: url('img/btn_chara_sub.png');
 width: 80px;
}

#chara-list .chara-anna a { background-position: 0 0; }
#chara-list .chara-mikaela a { background-position: -120px 0; }
#chara-list .chara-tristina a { background-position: -240px 0; }
#chara-list .chara-aurelia a { background-position: -360px 0; }
#chara-list .chara-julia a { background-position: -480px 0; }
#chara-list .chara-ryne a { background-position: -600px 0; }
#chara-list .chara-elena a { background-position: 0 0; }
#chara-list .chara-jacob a { background-position: -80px 0; }
#chara-list .chara-alden a { background-position: -160px 0; }

#chara-box {
 position: relative;
 border: 1px solid #9cf;
 background: #fff;
 height: 570px;
}

#chara-box > * { position: absolute; }
#chara-box h3, #chara-box h4 { right: 20px; }

#chara-box .sprite {
 left: 40px;
 bottom: 0;
 height: 560px;
 overflow: hidden;
}

#chara-box .chara-data {
 right: 50px;
 top: 120px;
 width: 580px;
}

.chara-data table + p { margin-top: 15px; }
.chara-data table { 
 margin-right: 0px;
 margin-left: auto;
 width: 450px;
}

#chara-box td { padding: 0 0 0 10px; }

#chara-box td:first-child {
 width: 80px;
 color: #fff;
}

#chara-box td:last-child { text-align: right; }

#chara-box .voice-sample {
 display: none !important; /* hide voice button until I get voices */
 /*top: 25px;
 left: 305px;*/
}

#chara-box .outfit-change { 
 left: 457px;
 bottom: 70px;
 width: 550px;
}

/********************************
Stuff common for character pages
*********************************/

#chara-box h3 {
 text-indent: -9999px;
 font-size: 1px;
 overflow: hidden;
 width: 100%;
 height: 95px;
}

#chara-box h4 { display: none; }

.voice-sample a {
 display: inline-block;
 text-indent: -9999px;
 font-size: 1px;
 overflow: hidden;
 width: 120px;
 height: 120px;
}

#chara-box .outfit-change {
 height: 100px;
 bottom: 20px;
 text-align: center;
}

.outfit-change span { display: none; }

.outfit-change a {
 display: inline-block;
 text-indent: -9999px;
 font-size: 1px;
 overflow: hidden;
 width: 98px;
 height: 98px;
}

/************
Anna's page
*************/

#chara-box.chara-anna { 
 background: url('img/anna/polka_dot.png'); /* 20% transparency */
 border-color: #f9c; 
}

.chara-anna h3 { background: url('img/anna/head.png') no-repeat right; }
.chara-anna td:first-child { background: #f9c; }
.chara-anna .voice-sample a { background: url('img/anna/voice_sample.png'); }

.chara-anna .outfit-change a {
 background: url('img/anna/oc_btns.png');
 border: solid 1px #f9c;
}

.chara-anna .outfit-change a:first-of-type { background-position: 0 0; }
.chara-anna .outfit-change a:nth-of-type(2) { background-position: -98px 0; }
.chara-anna .outfit-change a:nth-of-type(3) { background-position: -196px 0; }
.chara-anna .outfit-change a:last-of-type { background-position: -294px 0; }

/************
Mikaela's page
*************/

#chara-box.chara-mika { 
 background: url('img/mikaela/plaid.png'); /* 66% transparency */
 border-color: #3c6; 
}

.chara-mika h3 { background: url('img/mikaela/head.png') no-repeat right; }
.chara-mika td:first-child { background: #3c6; }
.chara-mika .voice-sample a { background: url('img/mikaela/voice_sample.png'); }

.chara-mika .outfit-change a {
 background: url('img/mikaela/oc_btns.png');
 border: solid 1px #3c6;
}

.chara-mika .outfit-change a:first-of-type { background-position: 0 0; }
.chara-mika .outfit-change a:nth-of-type(2) { background-position: -98px 0; }
.chara-mika .outfit-change a:nth-of-type(3) { background-position: -196px 0; }
.chara-mika .outfit-change a:last-of-type { background-position: -294px 0; }

/************
Tristina's page
*************/

#chara-box.chara-tris { 
 background: url('img/tristina/checkered.png'); /* 33% transparency */
 border-color: #c9c;
}

.chara-tris h3 { background: url('img/tristina/head.png') no-repeat right; }
.chara-tris td:first-child { background: #c9c; }
.chara-tris .voice-sample a { background: url('img/tristina/voice_sample.png'); }

.chara-tris .outfit-change a {
 background: url('img/tristina/oc_btns.png');
 border: solid 1px #c9c;
}

.chara-tris .outfit-change a:first-of-type { background-position: 0 0; }
.chara-tris .outfit-change a:nth-of-type(2) { background-position: -98px 0; }
.chara-tris .outfit-change a:nth-of-type(3) { background-position: -196px 0; }
.chara-tris .outfit-change a:nth-of-type(4) { background-position: -294px 0; }
.chara-tris .outfit-change a:last-of-type { background-position: -392px 0; }

/************
Aurelia's page
*************/

#chara-box.chara-aure { 
 background: url('img/aurelia/halftone.png'); /* 50% transparency */
 border-color: #fae554;
}

.chara-aure h3 { background: url('img/aurelia/head.png') no-repeat right; }
.chara-aure td:first-child { background: #d2d256; }
.chara-aure .voice-sample a { background: url('img/aurelia/voice_sample.png'); }

.chara-aure .outfit-change a {
 background: url('img/aurelia/oc_btns.png');
 border: solid 1px #fae554;
}

.chara-aure .outfit-change a:first-of-type { background-position: 0 0; }
.chara-aure .outfit-change a:nth-of-type(2) { background-position: -98px 0; }
.chara-aure .outfit-change a:nth-of-type(3) { background-position: -196px 0; }
.chara-aure .outfit-change a:last-of-type { background-position: -294px 0; }

/************
Julia's page
*************/

#chara-box.chara-julia { 
 background: url('img/julia/stripes.png'); /* 50% transparency */
 border-color: #39f;
}

.chara-julia h3 { background: url('img/julia/head.png') no-repeat right; }
.chara-julia td:first-child { background: #39f; }
.chara-julia .voice-sample a { background: url('img/julia/voice_sample.png'); }

.chara-julia .outfit-change a {
 background: url('img/julia/oc_btns.png');
 border: solid 1px #39f;
}

.chara-julia .outfit-change a:first-of-type { background-position: 0 0; }
.chara-julia .outfit-change a:nth-of-type(2) { background-position: -98px 0; }
.chara-julia .outfit-change a:nth-of-type(3) { background-position: -196px 0; }
.chara-julia .outfit-change a:nth-of-type(4) { background-position: -294px 0; }
.chara-julia .outfit-change a:last-of-type { background-position: -392px 0; }

/************
Ryne's page
*************/

#chara-box.chara-ryne { 
 background: url('img/ryne/mosaic.png');
 border-color: #3cb878;
}

.chara-ryne h3 { background: url('img/ryne/head.png') no-repeat right; }
.chara-ryne td:first-child { background: #3cb878; }
.chara-ryne .voice-sample a { background: url('img/ryne/voice_sample.png'); }

.chara-ryne .outfit-change a {
 background: url('img/ryne/oc_btns.png');
 border: solid 1px #3cb878;
}

.chara-ryne .outfit-change a:first-of-type { background-position: 0 0; }
.chara-ryne .outfit-change a:nth-of-type(2) { background-position: -98px 0; }
.chara-ryne .outfit-change a:last-of-type { background-position: -196px 0; }

/************
Elena's page
*************/

#chara-box.chara-elena { 
 background: url('img/anna/polka_dot.png'); /* 20% transparency */
 border-color: #f9c; 
}

.chara-elena h3 { background: url('img/elena/head.png') no-repeat right; }
.chara-elena td:first-child { background: #f9c; }
.chara-elena .voice-sample a { background: url('img/anna/voice_sample.png'); }

.chara-elena .outfit-change a {
 background: url('img/elena/oc_btns.png');
 border: solid 1px #f9c;
}

.chara-elena .outfit-change a:first-of-type { background-position: 0 0; }
.chara-elena .outfit-change a:nth-of-type(2) { background-position: -98px 0; }
.chara-elena .outfit-change a:last-of-type { background-position: -196px 0; }

/************
Jacob's page
*************/

#chara-box.chara-jacob { 
 background: url('img/jacob/zz.png'); /* 20% transparency */
 border-color: #f26522;
}

.chara-jacob h3 { background: url('img/jacob/head.png') no-repeat right; }
.chara-jacob td:first-child { background: #f26522; }
.chara-jacob .voice-sample a { background: url('img/jacob/voice_sample.png'); }

.chara-jacob .outfit-change a {
 background: url('img/jacob/oc_btns.png');
 border: solid 1px #f26522;
}

.chara-jacob .outfit-change a:first-of-type { background-position: 0 0; }
.chara-jacob .outfit-change a:nth-of-type(2) { background-position: -98px 0; }
.chara-jacob .outfit-change a:last-of-type { background-position: -196px 0; }

/************
Alden's page
*************/

#chara-box.chara-alden { 
 background: url('img/alden/halftone.png');
 border-color: #900;
}

.chara-alden h3 { background: url('img/alden/head.png') no-repeat right; }
.chara-alden td:first-child { background: #900; }
.chara-alden .voice-sample a { background: url('img/alden/voice_sample.png'); }

.chara-alden .outfit-change a {
 background: url('img/alden/oc_btns.png');
 border: solid 1px #900;
}

.chara-alden .outfit-change a:first-of-type { background-position: 0 0; }
.chara-alden .outfit-change a:nth-of-type(2) { background-position: -98px 0; }

/*********************************
Gallery, Download, Credits page
**********************************/
#gallery,#download,#credits {
 margin-top: 5px;
 margin-left: auto;
 margin-right: auto;
 border: 1px solid #9cf;
 background: #fff;
 padding: 20px 30px;
 width: 810px;
 min-height: 600px;
}

#gallery p,#download p { margin-left: 40px; margin-right: 40px; }

/************
Gallery page
*************/
.screens, .art-promo {
 width: 726px;
 margin: 15px auto 0;
}

.thumb { float: left; }

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

/*************
Download page
**************/
.dl { margin: 20px 40px; }
.large { font-size: 1.2em; }

/*************
Credits page
**************/
#credits > h4 { margin-left: 60px;}
#credits > ul { margin-left: 140px; }