/* Stylesheet für die Übungsseiten aus dem Buch "Little Boxes, Teil 1" */
/* Gestalte das HTML-Element mit dem Namen body */
* { padding: 0; margin: 0; } /* Browser kalibrieren. Alle Randwerte werden auf 0 gesetzt und meine werden verwendet. */

body {
	background-color: #8c8c8c;
	background-image: url(Hintergrund_leer_web.jpg); /* wir fuegen ein Bild ein. */
	background-repeat: no-repeat; 
	color: rgb(137,38,38); 
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: small; /* Schriftgröße */
	width: 1024px; /* Breite des Inhaltsbereichs */
	margin: 0 auto;
}

/* Gestalte das div mit id="wrapper" */
div#wrapper {
	background-color: transparent;
	color: rgb(137,38,38); 
	width: 1024px; /* Breite des Inhaltsbereichs */
	height: 683px; /* Hoehe des Inhaltsbereichs */
	position:relative;
	margin-top:10px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid rgb(137,38,38);
}

div#beginn {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38);
	font-size: 130%; text-align: center;
	font-weight: bold; /* fette Schrift */
	text-align: center;
	width: 260px; /* Breite des Inhaltsbereichs */
	height: 583px; /* Hoehe des Inhaltsbereichs */
 	position: absolute;
	top: 175px;
	left: 37%;
	/*padding: 0px;*/
}

div#erfahrg {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	padding-left: 5px;
	top: 100px;
}
div#erfahrg_link {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 195px;
	left: 130px;
}

div#kenntnis {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 100px;
	left: 660px;
}
div#kenntnis_link {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 195px;
	left: 805px;
}

div#kunde {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	padding-left: 5px;
	top: 365px;
}
div#kunde_link {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 450px;
	left: 150px;
}

div#projekt {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 365px;
	left: 660px;
}
div#projekt_link {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 460px;
	left: 805px;
}

div#impressum {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 640px;
	left: 400px;
}

div#mail {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 640px;
	left: 620px;
}

div#impressum_text {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38);
	font-size: 130%; text-align: center;
	font-weight: bold; /* fette Schrift */
 	text-align: center;
	width: 1024px; /* Breite des Inhaltsbereichs */
	height: 595px; /* Hoehe des Inhaltsbereichs */
 	position: absolute;
	top: 200px;
	left: 0px;
}

div#bild {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 45px;
	left: 10px;
}

div#erfahrg_text {
	height: 100%;
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	font-size: 110%; 
	font-weight: bold; /* fette Schrift */
	width: 330px; /* Breite des Inhaltsbereichs */
	height: 420px; /* Hoehe des Inhaltsbereichs */
	position: absolute;
	top: 130px;
	left: 350px;
	overflow:auto;
}

div#kenntniss_text {
	height: 100%;
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	font-size: 110%; 
	font-weight: bold; /* fette Schrift */
	width: 440px; /* Breite des Inhaltsbereichs */
	height: 320px; /* Hoehe des Inhaltsbereichs */
	position: absolute;
	top: 180px;
	left: 400px;
	overflow:auto;
}

div#kunde_text {
	height: 100%;
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	font-size: 110%; 
	font-weight: bold; /* fette Schrift */
	width: 330px; /* Breite des Inhaltsbereichs */
	height: 420px; /* Hoehe des Inhaltsbereichs */
	position: absolute;
	top: 180px;
	left: 350px;
	overflow:auto;
}

div#projekt_text {
	height: 100%;
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	font-size: 110%; 
	font-weight: bold; /* fette Schrift */
	width: 460px; /* Breite des Inhaltsbereichs */
	height: 380px; /* Hoehe des Inhaltsbereichs */
	position: absolute;
	top: 120px;
	left: 280px;
	overflow:auto;
}

div#anfang {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 640px;
	left: 480px;
}

div#zurueck {
	background-color: transparent; /* Transparent */
	color: rgb(137,38,38); 
	position: absolute;
	top: 640px;
	left: 500px;
}


h1 { font-size: 180%; text-align: center; } /* Erste Ueberschrift */
h2 { font-size: 150%; text-align: center; } /* Zweite Ueberschrift */

a { font-weight: bold;
	font-size: 150%;
	color: rgb(137,38,38); 
}
a:hover, /* Gestalten der Links bei Mauskontakt, Tastaturkontakt. */
a:focus {
  border-bottom: 1px solid #892626;
}
a:active { /*  und wenn er aktiv ist */
  color: white;
  background-color: #892626;
}
a { text-decoration:none; } /* Unterstreichung und Umrandung in Hyperlinks entfernen - "a" bezeichnet Hyperlinks */
/* outline:none kann benutzt werden, um die Umrandung des fokussierten Links zu entfernen. */
/* a:link { color: #d90000; } */
/* a:visited { color: #cc6666; } */

ul li { list-style-type: disc; } /* Punkt in ungeordneten Listen */
p { margin-top: 1em; } /* Abstand nach oben */
ul, ol { margin-top: 1em; } /* Abstand nach oben */
li { margin-left: 1em; } /* Abstand nach links */
p { font-size: 120%; } /* Schriftgroesse */