/*
Farben

hellblau: #D6DEED
dunkelblau: #829ABD
dunkeldunkelblau: #51688A
orange: #FF9B00
dunkelorange: #C27500
dunkeldunkelorange: #B3640F
dunkeldunkelorange leicht: #C4A17E


Anmerkungen:

schatten_a: Erstreckt sich über die Gesamtbreite und hat eine Höhe von 20px
schatten_a: Erstreckt sich über die Gesamtbreite und hat eine Höhe von 10px
schatten_c: Ist 81px breit und nur für die Banner gedacht

*/

* {
  padding:0px;
  margin:0px;
}

html, body {
  text-align:center;
  margin:0px;
  padding:0px;
  border:0px;
  background:#FF9B00 url(grafik/backgrverlauf.gif) top repeat-x;
  font-family:Arial, Helvetica, sans-serif;
  color:#000000;
}

#container {
  width:735px;
  margin-left:auto;
  margin-right:auto;
  background:transparent;
}

p {
  font-size:13px;
}

/* --- Der Titel --- */

#titeltable {
  width:100%;
  height:85px;
}

#titeltable span {
  visibility:hidden;
}

.titel {
  width:640px;
  background:url(grafik/titel.png) bottom right no-repeat;
}

.weiss {
  background:url(grafik/whitestripe.png) bottom repeat-x;
  width:auto;
}

/* --- Der Comic --- */

#comic {
  margin-top:10px;
  position:relative;
  background:#FFFFFF;
  margin-left:auto;
  margin-right:auto;
}

.comic {
  margin-top:5px;
  margin-bottom:5px;

}

.txt {
  padding:10px;
  text-align:left;
  font-size:15px;
  border:solid #D6DEED 5px;
}

/* --- Die Schatten --- */

.schatten_a {
  height:20px;
  width:100%;
  background:url(grafik/schatten.png) top repeat-x;
}

.schatten_b {
  height:10px;
  width:100%;
  background:url(grafik/schatten.png) repeat-x;
}

.schatten_c {
  height:10px;
  width:88px;
  background:url(grafik/schatten.png) repeat-x;
  margin-left:auto;
  margin-right:auto;
}


/* --- Die blaue Box mit weissem Rahmen --- */

.box {
  padding:5px;
  background:#D6DEED;
  border:solid #FFFFFF 5px;
}

/* --- Der Nagivationsbalken --- */

.navi_table {
  width:715px;
}

.rechts {
  text-align:right;
  padding-right:10px;
}

.links {
  text-align:left;
  padding-left:10px;
}

.oben, .unten {
  vertical-align:middle;
}

a img {
  border:none;
  text-decoration:none;
}

input {
  height:16px;
  font-size:13px;
  border:solid #FFFFFF 1px;
}

.input {
  font-size:13px;
  font-weight:bold;
  color:#000000;
}

.input1 {
  position:relative;
  bottom:10px;
}

.buttontable {
  height:24px;
}

.buttontable td {
  vertical-align:bottom;
}

.button {
  height:24px;
  background:url(grafik/buttonverlauf.png);
  font-size:12px;
  font-weight:bold;
  color:#FFFFFF;
}

.that {
  border:solid #FFFFFF 2px;
}

.what {
  border-right:solid #FFFFFF 2px;
  border-top:solid #FFFFFF 2px;
  border-bottom:solid #FFFFFF 2px;
}

.button a:link, .button a:visited {
  text-decoration:none;
  color:#FFFFFF;
  display:block;
  padding-left:10px;
  padding-right:10px;
  padding-top:3px;
  padding-bottom:3px;
}

.button a:hover, .button a:active {
  background:#FFFFFF;
}

.buttonluecke {
  width:20px;
}

.ok {
  padding:2px;
  background:#829ABD;
  border:2px solid #FFFFFF;
  height:22px;
  margin-left:5px;
  font-size:12px;
  font-weight:bold;
  color:#FFFFFF;
}

.ok:hover {
  background:#FFFFFF;
}

/* --- Die kurze Beschreibung --- */

.shortdescr {
  color:#FFFFFF;
  font-size:13px;
  margin-bottom:10px;
  margin-top:-5px;
  font-weight:bold;
  text-align:justify;
}

/* --- Die linke Spalte --- */

#spaltelinks {
  width:125px;
  float:left;
}

.menu {
  padding:5px;
  font-weight:bold;
  color:#000000;
  text-align:left;
}

.menu a:link, .menu a:visited {
  color:#000000;
  text-decoration:none;
  font-weight:bold;
  display:block;
}

.menu a:hover, .menu a:active {
  color:#FFFFFF;
}

.big_a {
  font-size:20px;
}

.small_a {
  font-size:13px;
  margin-left:15px;
}

hr.small_hr {
  visibility:hidden;
  margin-bottom:5px;
}

.button_2 {
  background:#FF9B00;
  border:solid #FFFFFF 2px;
  color:#FFFFFF;
  font-weight:bold;
  font-size:13px;
  padding:5px;
}

.banner {
  width:88px;
  height:31px;
  margin-left:auto;
  margin-right:auto;
}

/* --- Die rechte Spalte --- */

#spalterechts {
  width:595px;
  float:right;
}

td {
  vertical-align:top;
}

.spalte {
  width:290px;
  background:#D6DEED;
  border:solid #FFFFFF 5px;
}

.luecke {
  width:15px;
}

.text {
  padding:10px;
  text-align:justify;
  font-size:13px;
  min-height:131px;
}

.schattenspalte {
  height:20px;
  background:url(grafik/schatten.png) top repeat-x;
}

h4 {
  font-weight:bold;
  font-size:15px;
  margin-bottom:3px;
}

a:link {
  color:#B3640F;
  text-decoration:none;
}

a:visited {
  color:#C4A17E;
  text-decoration:none;
}

a:hover, a:active {
  color:#FFFFFF;
  text-decoration:none;
}

ul, ol {
  margin-left:20px;
}

/* --- Mininav und Copyright --- */

.mininav {
  clear:both;
  width:735px;
  color:#FFFFFF;
  font-size:12px;
}

.mininav a {
  color:#FFFFFF;
  text-decoration:none;
  margin-left:7px;
  margin-right:7px;
  font-weight:bold;
}

.mininav a:hover, .mininav a:active {
  text-decoration:underline;
}

.copyright {
  margin-top:10px;
  margin-bottom:10px;
  width:735px;
  color:#FFFFFF;
  font-size:12px;
}

.ben, .chris, .Ben, .Chris {
  float:right;
  border:solid #FFFFFF 5px;
  margin-left:10px;
  margin-bottom:10px;
}

.benbig, .chrisbig {
  display:block;
  border:solid #FFFFFF 5px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:10px;
  text-align:center;
}

h3 {
  font-weight:bold;
  font-size:20px;
  margin-bottom:5px;
  text-align:center;
}

.whiteback {
  background:#FFFFFF;
}

/* --- Die Charakter-Page --- */

.chara {
  text-align:justify;
  font-size:13px;
  margin-bottom:10px;
}

.charaimg {
  margin-top:25px;
}

.charaname {
  font-size:15px;
  font-weight:bold;
  margin-bottom:5px;
}

.charaappear {
  font-size:13px;
}

/* --- Die FAQ-Page --- */

.frage {
  font-weight:bold;
  text-align:left;
  font-size:13px;
  padding-bottom:5px;
}

.antwort {
  text-align:justify;
  font-size:13px;
  padding-bottom:20px;
  margin-left:20px;
  margin-right:20px;
}

/* --- Die What-Is-Pages --- */



h3.whatis {
  text-align:left;
}

ul {
  margin-left:20px;
  margin-right:20px;
}

.whatis {
  padding-bottom:15px;
}