/* Style Sheet */

/******************************************************************************************************************************************************
* Anweisungen für den Entwicklungsprozess
******************************************************************************************************************************************************/

/******************************************************************************************************************************************************
* Übergreifende Formate
******************************************************************************************************************************************************/

body {
	width: 1250px;;
	margin: auto;
	font-size: 75%;
}

*{
	font-family:'Comic Sans MS';  
	color:#117272;
}
.float-ende{
	clear: both;
}

em {
	font-weight: bold;
}

 h1, h2, h3, h4, h5, h6, p, ol, ul{
	margin-left: 20px;
	margin-right: 20px;
	margin top: 0px;
	margin-bottom: 20 px;
}

h1{
	font-size: 1.8em;
	}
h2{
	font-size: 1.5em; 
	
}
h3{
	font-size: 1.17em;
	
}
h4{
	font-size: 1.12em;
}
h5{
	font-size: .83em;
}
h6{
	font-size: .75em;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: bolder;
}
blockquote{
	font-style: italic;
	font-size: 1.12 em;
}
ol{
	padding-left: 25px;
}
ul{
	padding-left: 20px;
}
ul.ohne{
	list-style-type: none;
	padding-left: 0px;
}
li.bild{
	margin-top:0px;
	margin-bottom:10px;
	margin-left:150px;
	margin-right:10px;
}
p{
	font-size: 14px;
}
p.kasten {
	font-weight: bold;
	font-size: 18px;
	color: #391b4e; 
}
figure{
	margin-left: 0px;
}
figcaption{
	font-size: 11px;
}

img.displayed {
	border: 5px solid  #117272;
	padding: 3px;
	margin-top: 10px;
	margin-right:300px;
	margin-left: 400px;
	/*width: 187px;
	/*overflow: hidden;
 	display: block;*/
 	
}

/******************************************************************************************************************************************************
* Kopf
******************************************************************************************************************************************************/
/*#kopf {
	padding-top: 65px;
	background-image:url('./img/hg-kopf-punkte.png');
	background-repeat: repeat-x;
}*/
#logo {
	float: left;
	padding-bottom: 5px;
	margin-right: 25px;
		
}
#slogan{
font-size: 23px;
color:#391b4e;
text-shadow: 0px -1px 0px #eeeeee,
             0px 1px 0px #555555;
text-align:left;
padding-top: 50px;


}

#kopf nav.meta-navigation{
	float: right;
}
#kopf-unten {
	margin-top: 15px;
}
#key-visual{
	float: left;
}
#key-visual1{
	float: right;
}

/*******************************************************************************************************************************************************
* Navigation
******************************************************************************************************************************************************/

/*Hauptnavigation*/

#navigation{
	float: left;
	padding: 15px;
	/*background-image: url('../jpg/hg-punkt.png');*/
	background-color: #391b4e;
	font-size: 12px; 
}
#navigation ul{
	list-style-type: none;
	margin: 0px;
	line-height: 1 em;
	padding: 10px;
	min-height: 133px;
	width: 165px;
	background-color: white;
}
#navigation ul li a{
	display: block;
	text-transform: uppercase;
	margin--bottom: 3px;
	text-decoration: none;
	padding: 2px;
	-moz-transition: background-color 0,25 s;
	-webkit-transition: background-color 0,25 s;
	-o-transition: background-color 0,25 s;
	-ms-transition:background-color 0,25 s;
	transition: background-color 0,25 s;
}
#navigation ul li a:hover,
#navigation ul li a:focus 
{
	color: white; 
	background-color:  #391b4e;
}
#navigation ul li a.auswahl{
	color: white;
	background-color: #391b4e;
}

/*Druck und  .meta-navigation*/
#druck,
.meta-navigation{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	background-color: #117272;
}
#druck ul,
.meta-navigation ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#druck ul{
	margin-left: 10px;
}
#druck ul li,
.meta-navigation ul li{
	float: left;
}
#druck ul li a,
.meta-navigation ul li a{
	text-decoration: none;
	display: block;
	color: white;
	padding: 4px 5px 3px 5px;
	border-left: 2px solid  black;
}
.meta-navigation ul li a:hover,
.meta-navigation ul li a:focus,
.meta-navigation ul li a.auswahl{
	color: #003366; /*Schriftfarbe*/
	background-color: #339999; /*Hintergrundfarbe*/
}

#druck ul li:first-child a,
meta-navigation ul li:first-child a{
	border-left: 0px;
}


/*Aufklappbares Dropdown Menü*/

/* 	-Boxmodellveränderung mittels "boxsizing", so dass ein Innenabstand (padding das Element nicht mehr vergrößert.
	- Hintergrundfarbe und Schriftgröße für nav - Container
*/

#dropdown-nav {
  box-sizing: border-box;
  float: left;
  width: 100%;
  background: #117272;
  font-size: 16px;
}

/* 	-Deklaration Aufzählungslisten und Links. 
	-Deaktivieren Innen- und Außenabstand der Aufzählungslisten. 
	-Formatieren der Links als Blockelement, damit das gesamte Listenelement klickbar wird und nicht nur der Link selbst. 
	-Die Schriftfarbe weiß und ein Unterstreichen der Links abschalten.
*/

#dropdown-nav ul {
  margin: 0;
  padding: 0;
}
 
#dropdown-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
}

/* 	-Stylen Listenelemente sowie die darin liegenden Links der ersten Ebene. 
	-Listenelemente werden gefloatet, damit sie horizontal dargestellt werden. 
	-Deaktivieren der Aufzählungszeichen (list-style)
	-Listenelmenten bei hover andere Hintergrundfarbe. 
	-Links innerhalb der Listenelemente Innenabstand von 20 Pixel zu allen Seiten.

/*Untermenüs:*/
/*-Positionierung absolut und durch top/left außerhalb des sichtbaren Bereichs wegen hover_Effekt
-leicht veränderte Hintergrundfarbe und Schlagschatten (box-shadow)
*/

#dropdown-nav ul li {
  position: relative;
  float: left;
  list-style: none;
}
 
#dropdown-nav ul li:hover {
	background: #339999;
}
 
#dropdown-nav ul li a {
    padding: 20px;
}



#dropdown-nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #117272;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}

/*	-Listenelemente feste Breite
	-Rahmenlinie nach unten
 	vertikal durch float abschalten
	-Innenabstand herabsetzen
	*/
#dropdown-nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}
 
#dropdown-nav ul ul li a {
  padding: 10px 20px;
}

/*einblenden des Untermenüs beim hovern des Listenelements*/

#dropdown-nav ul li:hover > ul {
  top: 100%;
  left: 0;
}

/*Positionierung der Untermenüs*/


#dropdown-nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

/*der letzte Schliff*/
/*Wir nutzen dazu die Rahmen-Eigenschaft (border) indem wir drei Seiten des Rahmens transparent darstellen und nur der Rahmenlinie nach oben (dadurch zeigt der Pfeil nach unten) eine weiße Farbe geben.

Übrigens: dieser Trick funktioniert in alle Pfeilrichtungen. Immer die gegenüber liegende Seite in die der Pfeil zeigen soll, erhält die Farbe. Alle anderen Seiten sind transparent.

Mittel des Kombinators > geben wir an, dass nur das Kindelement a des Listenelements mit der Klasse submenu angesprochen wird. Würden wir auf den Kombinator verzichten, hätten sämtliche Listenelemente mit Links des Untermenüs und deren Untermenüs den Pfeil.

Mit margin richten wir den Pfeil aus, so dass er einigermaßen mittig angezeigt wird.*/


#dropdown-nav ul li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}
/*Nun haben wir zwar den Pfeil nach unten für die Hauptmenüebene, bei den Untermenüs der folgenden Ebenen passt das aber nicht mehr, da das Untermenü nach rechts aufgeht und nicht nach unten. Da wäre ein Pfeil nach rechts angebracht, oder?*/


#dropdown-nav ul ul li.submenu a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/*Noch eine Sache: den Listenelementen der Untermenüs haben wir eine Rahmenlinie nach unten verpasst. Beim letzten Listenelement eines Untermenüs wirkt das eher deplatziert. 
stellen wir die Rahmenlinie beim jeweils letzten li-Kindelement ab.*/

#dropdown-nav ul ul li:last-child {
  border-bottom: none;
}


/******************************************************************************************************************************************************
* Inhalt
******************************************************************************************************************************************************/
#inhalt{
	margin-top: 25px;
	min-height: 150px;
	font-size: 13px;
	border: 5px double #391b4e;
	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}
#inhalt.startseite {
	margin-top: 10px;
	border: none;
}

.content{
	float: left;
	padding: 10px;
	margin: 20px;
	background: #white;
	border: 5px solid #391b4e;
	width:90%; 
}

/*Zwei Boxen*/
.content1 {
	float: left;
	padding: 10px;
	margin: 20px;
	background: #white;
	border: 5px solid #391b4e;
	width:44%; 

	}
.content2 {
	float: right;
	padding: 10px;
	margin: 20px;
	background: #white;
	border: 5px solid #391b4e;
	width: 44%; 

	}
	/*Boxen ohne Rand*/
.content3 {
	float: left;
	padding: 10px;
	margin: 20px;
	background: #white;
	width:90%; 
}

/*Zwei Boxen ohne Rand*/
.content4 {
	float: left;
	padding: 10px;
	margin: 20px;
	background: #white;
		width:44%; 

	}
.content5 {
	float: right;
	padding: 10px;
	margin: 20px;
	background: #white;
	width: 44%; 

	}	
.bildlinks {
	float: left;
	padding: 3px;
	border: 5px solid #117272;
	margin-left: 10px;
	margin-right:10px;
	margin-top: 10px;
	margin-bottom: 5px;
}
.bildrechts {
	float: right;
	border: 5px solid #117272;
	padding: 3px;
	margin-top: 10px;
	margin-right:10px;
	margin-left: 3px;
	margin-bottom: 10px;
}
.bildmitte {

	border: 5px solid #117272;
	margin-top:10px;
	margin-right:400px;
	margin-left:400px;
	margin-bottom:10px;
}

.bildohne {
	float: left;
	padding: 3px;
	margin-top: 10px;
	margin-right:10px;
	margin-left: 3px;
	margin-bottom: 10px;
}

 


/*********************************************************************************************************************************************************************************************
* Fuß
**********************************************************************************************************************************************************************************************/
#fuss-oben{
	background-color: white;
}
#fuss-oben,
#copyright{
	
	margin-top: 20px;
	/*background-image: url('../img/hg-punkt.png');*/
	background-color: #391b4e;
	padding: 15px;
}
#copyright p{
	color: white; 
	background-color: #117272;
	margin: 0px;
	width: 170px;
	padding-left: 10px;
	font-size: 10px;
	text-transform:capitalize;
}
#druck{
	float: left;
}
#fuss nav.meta-navigation{
	float: right;
}