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

.clear { clear: both; }

body {
    background: url('img/bg.png');
    font-family: 'Delius', sans-serif;
    font-size: 0.9em;
    color: black;
}

h1,h2,h3,h4,h5,h6 { margin: 5px; }

p { margin: 20px 30px; }
.large { font-size: 1.2em; }

#container {
    margin: auto;
    width: 850px;
}

nav,section,footer {
    border: 1px solid #c00;
    background: #fff0f0; /*#fff4f4;*/
}

/*********
Chibis
**********/
.chibi-casual,.chibi-santa { float: right; }

.chibi-casual {
    width: 208px;
    height: 223px;
    background: url('img/chibi_natalia_casual.png');
}

.chibi-santa {
    width: 189px;
    height: 243px;
    background: url('img/chibi_natalia_santa.png');
}

/*************
Header stuff
**************/
#banner {
    background: url('img/banner_c.png') center no-repeat;
    height: 310px;
    text-indent: -9999px;
    white-space: nowrap;
}

nav {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin: 5px 0;
    padding: 5px 0;
}

nav a:link { text-decoration: none; }
nav a:visited { text-decoration: none; }
nav a:hover {text-decoration: underline; }
nav a:active { text-decoration: underline; }

/**************
Top page stuff 
***************/
#top ul { margin: 20px 50px; }

/*************
Section stuff
**************/
section {
    /*min-height: 200px;*/
    padding: 10px 25px;
}

#chara > div { border: dotted 1px #c33; }
#chara > div  > h2 { margin-top: 30px; }

.chara-natalia { margin-top: 15px; }
/*#chara > div { border: 1px solid black; }*/
#chara > div > div:first-child {
    float: left;
    width: 300px;
    height: 400px; /* imgs are 300x400 */
    /*background: #ccf; /* placeholder color */
}

.chara-rudolf > div:first-child { /* he has no character art, placeholder */
    line-height: 240px;
    text-align: center;
    font-size: 1.6em;
    color: #444;
    height: 240px !important;
}

#chara ul { list-style-type:none; }

.gallery {
    width: 708px;
    margin: 10px auto;
}
.thumb { float: left; }
.thumb a img {
    border: solid 1px #bbb;
    margin: 0 2px;
    padding: 8px 15px;
}
.thumb a:hover img { border: solid 1px #c33;}

/************
Credits page 
*************/
#credits > div { margin: 20px 40px; }

/************
Footer stuff
*************/
footer {
    margin-top: 5px;
    padding: 6px 20px;
    text-align: right;
}

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