﻿/* Standart-CSS fUer Webdesign */


/* saemtliche Abstaede auf NULL stellen */
* {
	margin: 0;
	padding: 0;
}

/* Grundeinstellungen fuer den Body */
html, body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
 }

p {
	margin-bottom: 8px; /*Abstand zwischen den Abschnitten*/
}

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

/* Standarttabelle ohne Rahmen */
table {
	empty-cells:show;
	border-collapse: collapse;
	border: 0px;
	font: normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

td {
	padding: 2px;
	border: 0px;
}


/*************/
/* Sektionen */
/*************/
#right {
text-align:right
}

  <style>
#kopfbereich {
  background-color: red;
   background: no-repeat center 30% url("<?php echo "$bild";?>");
  height:150px;
}

#kopfbereich p {
  color:black;
  text-align:right;
  font-size:2em;
  padding:0.4em 0.4em 0 0;
}
 

#steuerungh {
  background-color: red;
    padding-left:1em;
	  height:50px;
}
#schatten {
  background-color: yellow;
  background:url(bilder/schatten.png) repeat-x;
  height:12px;
}
#inhaltoben {
  background-color: #D4D0FA;
   padding:.5em;
}

#inhaltoben h1, h2, h3, p, ul, li {
  padding-bottom: .01em;
}

#inhaltoben ul {
  padding-left: 1em;
}

#inhaltoben2 {
  background-color: orange;
   padding:.5em;
}



#inhalt {
  background-color: #E0F8F7;
   padding:1em;
}

#inhalt h1, h2, h3, p, ul {
  padding-bottom:.7em;
}

#inhalt ul {
  padding-left:2em;
}



html, body {
  font: 100% Arial, Helvetica, sans-serif;
}


* {
  margin:0;
  padding:0;
}

* {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}
header {
	background-color: yellow;
	background-color: gray;
	width: 100%;
	float: left;
	border-bottom: 1px solid black;
}
#bereichlogo {
	color: white;
	background-color: salmon;		
	display: block;
	padding: 0.5em;
	text-decoration: none;
	float: left;	
}
#bereichlogo {
	width: auto;
}
#steuerung li {
	list-style: none;
	float: left;
}
#steuerung a {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0.5em;
	text-decoration: none;
	color: white;
	background-color: gray;
}	
.menue-button {
	display: none;
}		
#steuerung {
	float: right;
}
#steuerung a:hover {
	color: black;
	background: orange;
}	
/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/*	Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:600px) {
	.menue-button {
		display: block;
	}
	.menue-button {
		background-color: darkblue;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding: 0.5em;
		color: white;
		cursor: pointer;
		text-decoration: none;
	}	
	#bereichlogo {
		width: 100%;
	}
	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}	
	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}	
	.menue-button:hover {
		color: black;
		background: orange;
	}
}
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
	display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}	
/* Allgemein Anweisungen */
section {
	padding: 0.5em;
	float: left;
	width: 100%;
}
h1, p {
	margin: 0.5em 0 0 0;
}

#inhaltfehler {
  background-color: red;
   padding:1em;
}

#inhaltfehler p {
  color:white;
  text-align:center;
  font-size:1.5em;
  padding:0.4em 0.4em 0 0;
}

#inhaltok {
  background-color: green;
   padding:1em;
}

#inhaltok p {
  color:white;
  text-align:center;
  font-size:1.5em;
  padding:0.4em 0.4em 0 0;
}



#inhaltok2 {
  background-color: green;
   padding:1em;
}

#inhaltok2 p {
  color:white;
  text-align:left;
  font-size:1em;
  padding:0.2em 0.2em 0 0;
}

#inhalt2 {
  background-color: green;
   padding:1em;
}

#inhalt2 p {
  color:white;
  text-align:left;
  font-size:1em;
  padding:0.2em 0.2em 0 0;
}


#inhaltfuss {
  background-color: #E6DDFC;
   padding:1em;
}

#inhaltfuss p {
  color:white;
  text-align:center;
  font-size:0.7em;
  padding:0.4em 0.4em 0 0;
}
  </style>










/* First Level Navigation */
a.fstLevel {
  text-decoration: none;
  display: block;
  padding: 4px;
  margin: 0px;
  text-align: left;
  font-size: 14px;
  color: #000;
  border-left: 7px solid #005EBF;       
}

a:hover.fstLevel  {
  color: #000;
  background: #fff;
  border-left: 7px solid #66A0BB;
}

a.fstLevelActive {
  text-decoration: none;
  display: block;
  padding: 4px;
  margin: 0px;
  text-align: left;
  font-size: 14px;
  color: #000;
  border-left: 7px solid #66A0BB;
}

/* Second Level Navigation */
a.secLevel {
  text-decoration: none;
  display: block;
  padding: 3px;
  margin-left: 7px;
  font-size: 12px;
  color: #000;
  border-left: 7px solid #005EBF;
}

a:hover.secLevel {
  color:#000;
  background: #fff;
  border-left: 7px solid #66A0BB;
}

a.secLevelActive {
  text-decoration: none;
  display: block;
  padding: 3px;
  margin-left: 7px;
  font-size: 12px;
  color:#000;
  border-left: 7px solid #66A0BB;
}






