@charset "UTF-8";
/* CSS-Dokument */

/* Der body-Tag-Stil gilt für alle Elemente auf der Seite */
body {
  background-color: Bisque;
  font-family: Verdana, Geneva, Arial, sans-serif;
  padding:0px;
  margin:0px;
}

/* Der ID-Stil wrapper wird mit einem div-Tag verwendet, um eine 960 Pixel breite Seite zu erstellen */
#wrapper {
  width: 960px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;background-color: #BurlyWood;
  background-color: Beige;
}

/* Der ID-Stil column-1 ID ist rechtsbündig ausgerichtet */
#column-1 {
  float: right;
  width: 760px;
  height: 600px;
  background: PaleGreen;
}

/* Der ID-Stil column-2 ID ist linksbündig ausgerichtet */
#column-2 {
  float: left;
  width: 200px;
  height:600px;
  background: Gold;
}

/* Selektor für Tags, durch Kommas voneinander getrennt, gilt für den Stil für alle Tags */
h1,h2,h3,h4,h5,h6,p,li {
  margin-left:15px;
}

h1 {
  color: SaddleBrown;
  padding-top:0px;
}

/* Selektor für Tags, nicht durch Kommas voneinander getrennt, gilt für spezifische Instanzen*/
#column-1 h1 {
  padding-top:5px;
  color: black;
  font-size:36px;
}

/* Button-class */
.button {
  font-size: 1.0 em;
  
  border: thin solid gray;
}

/* Modernes Webdesign verwendet Klassen- oder ID-Stil für Felder*/
.box {
  height: 20px;
  width: 150px;
  text-decoration: none;
  text-align: center;
  color: white;
  float: left;
  /*margin: 15px;*/
  padding: 5px;
  background-color: SaddleBrown;
  border:2px solid gray;
  border-radius: 8px;
  box-shadow:  4px  6px 3px black;
  margin-bottom: 5px;
}

/* Box für Bild*/
.box1 {
  height: 500px;
  width: 400px;
  float: left;
}
/* Box für Text*/
.box2 {
  height: 500px;
  width: 300px;
  float: left;
}

/* Die folgende Pseudo-Klasse gilt für die Feldklasse, wenn die Maus über ein Feld geschoben wird */
.box:hover {
  background-color:tan;color: black;
}

/* Die folgende Pseudo-Klasse gilt für die Feldklasse, wenn die Maus über ein Feld geklickt wird */
.box:active {
  background-color:tan;color: red;
  box-shadow: 2px 3px 2px black;
}

/* Diese Lösch-Klasse beendet das Floating */
.clear { 
  clear: both; 
}


header, footer { 
  background-color: F27830;
  color: red;
  padding-top:5px;
  padding-bottom:5px; 
  margin:auto;
}