/* Alles was zwischen /* und */ steht ist ein Kommentar
 * und wird in der CSS-Datei nicht beachtet.
 * das dient nur als gedächtnisstütze für Dich oder
 * als Info für andere. Mehrzeilige Kommentare kannst Du
 * mit einem Stern wie hier erreichen */

/* Bezeichner sind z.B. body, p, logocontainer und content
 * Wenn Bezeichner schon Schlüsselworte sind in html wie body und p,
 * dann stehen sie hier so, wenn es eigene Bezeichner sind, wie
 * logocontainer oder content, dann muss ein Rautenzeichen # oder
 * ein . (Punkt) davor stehen
 *Mit einer Raute ist der Bezeichner ein Name, der nur einmal vorkommen darf
 *mit dem Punkt davor bildet der Bezeichner eine class (Klasse), die immer
 *wieder verwendet werden darf */
/* Hier steht, wie Schriften grundsätzlich aussehen */
body
{
 font-family: sans-serif; /* Irgendeine Schrift ohne Schnörkel*/
 font-size:16px; /* soll 16 Pixel groß sein*/
 color: #000000; /* in schwarzer Schrift*/
 background-color:#ffffff; /* auf weißen Grund, wenn nicht anders angegeben*/
 text-align:left; /* linksbündig geschrieben*/
}

  h1 {font-size:30px;color:#000000;} /* Überschriften 1. Ordnung Schriftgröße und Farbe*/
  h2 {font-size:24px;color:#33cc33;} /* 2. Ordnung*/
  h3 {font-size:16px;color:#000000;} /* 3.Ordnung*/

/* Das Absatzzeichen "p"erhält einen Abstand nach oben von 20 Pixeln*/
  p {margin-top:20px;}

/*Ein Link - er hat die Abkürzung "a" - soll grundsätzlich so aussehen*/
a:link, a:visited, a:active, a:hover
{
  font-weight:bold;
  color:#0000ff;
  font-size:16px;
  background-color:#ffffff;
}
/* wenn der Link besucht wurde, soll er diese Farbe haben*/
a:visited
{
  color:#8888ff;
}
/* Wenn die Maus über einen Link gehalten wird, hat er diese Farbe*/
a:active, a:hover
{
  color:#ff0000;
}
/* Ein Link wird ohne Schriftdeko dargestellt, also nicht unterstrichen*/
a.menu:link, a.menu:visited, a.menu:active, a.menu:hover
{
  text-decoration:none;
}

/* Die Titelzeile hat einen Abstand von oben und von links*/
#title {
  padding-top:200px; /* padding ist der Abstand vom hier oberen Objekt*/
  margin-left:200px; /* margin ist der Abstand vom linken Rand*/
}

/* Der Logocontainer */
#logocontainer {
  border:0px solid #000000;
  background-color:#000000;
  width:950px;
  height: 110px;
  padding-left: 10px;
  padding-top: 7px;
  float:left; /* beschreibt, wo das Objekt stehen soll */
}

/* Der Titelcontainer */
#titelcontainer {
  border:0px solid #ffff00;
  background-color:#00ff00;
  height:100px;
  margin-left: 210px;
  padding-left:30px;
}

/* Das Menü */
#menucontainer {
border:1px solid #ffffff; /* Ein Rahmen, ein Pixel stark, in der Farbe weiß*/
background-color:#f00000;
width:950px;
height:35px;
padding:5px;
margin:0px 5px 5px 0px;
line-height:35px; /* ist hier = height und unnötig,
 * bei einer senkrechten Navigation aber wichtig!*/
float:left;
}
/* Mit dem Punkt davor gehört menutitle zum menucontainer
 * hier kommt er nicht vor, aber in einem senkrechten Menü*/
.menutitle
{
margin:-5px -5px 5px -5px; /* Abstand links,oben, rechts, unten*/
padding:5px;
background-color:#00dd00;
font-weight:bold; /* fette Schrift*/
border-bottom:1px solid #606060; /* bekommt nach unten einen eigenen Rand*/
}

/* Der Inhalt */
#content {
border:0px solid #606060; /* Die Randfarbe ist natürlich ohne sichtbaren Rand  (0px) witzlos*/
background-color:#dddddd;
padding:10px;
margin-left:0px;
min-height:600px; /* Es gibt eine Hintergrundfarbe, deswegen fällt eine
zu kurze Seite schnell auf, hier wird sie auch ohne Inhalt länger*/
width:940px; /* 950 Pixel Gesamtbreite minus 10 Pixel Rand*/
}

/* Container für irgendwas, was ich anders darstellen will
 mit einer anderen Schrift, einer anderen Schriftfarbe, einem
 anderen Hintergrund usw.*/
.code {
color: #dddd55;
border:0px solid #606060;
background-color:#666666;
padding:10px;
font-family: monospace;
font-weight:bold;
}