/* 	====================================
	On Top Bar - Menubutton für mobile Anwendung
	==================================== */	

#menubar {
	display:none; 
	position:relative;	
	background-color:yellow;
}

#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}

#menubar ul li {
	display:inline; 
}

#menubar ul li a.menubutton {
	display:none; 
	position:absolute;
	top:2em;
	left:4em;
}

/* 	====================================
	Navigation
	
	Anmerkung: Hier osvaldas.info/drop-down-navigation-responsive-and-touch-friendly  findet sich ein jQuery Codeschnipsel 
	um ein touchfriendly Dropdown zu machen. Ich hab gerade keine Probleme damit, daher nicht eingebaut!
	==================================== */
	
nav {
	/*display:block;
	/*display:none;*/
	/* position:relative;  verschoben in nav li*/
	height:2.5em;
	background: rgba(33,45,80, 0.85);  /*rgba(38, 43, 57, 0.64);  grau */  
	text-align:center;
	box-shadow: white 0em 0em 3em 1em;
	Z-index:100;
}

nav li {
position:relative;
}

/* first level */
nav ul {
	display:block;  /*wird benötigt damit im Responsive Design das Menü ausgeklappt bleibt*/
	text-align:center;
	margin:0;
}

nav ul li {
	color:white;
	font-size: 1.125em;
	font-family:Helvetica;
	font-weight:100;
	line-height:2.5em;
	
	display:inline-block;
	margin:0em 0.188em 0em 0.188em;
	/*padding-bottom:0em ;  Sonst kann man die Dropuntermenuepunkte nicht einfangen*/
	font-weight:100;
	letter-spacing:0.2em;
	/*position:relative; verschoben nach nav li /*damit das Dropdown Menü an der richtigen Position sitzt*/
}
/* gibts nicht ???
nav div {
	position:absolute;
	top:0.25em;
	left:3em;
	margin:0em;
	padding-bottom:0em 20em 1em 1em;
}
*/
nav ul li a {
	color:white;
	padding:0.563em 0.938em 0.375em 0.983em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}

nav ul li a:hover {
	color:rgb(17, 151, 224); /*#08c2ff;	#ece91c;*/ 
}

nav ul li a.active {
	border-bottom: 0.188em solid #08c2ff;
}

/*	Listenpunkte 1. Level die als Ersatz für die Dropdowns auf den kleinen Screens erstellt wurden, sollen nicht sichbar sein!	*/
.dropdown1Level{ display:none;}

/* nicht in verwendung 
.dropUeberschrift{padding:0.563em 0.938em 0.375em 0.983em;}
*/
/*
	====================================
	Dropdown Punkte	2. Level
	====================================	*/
/* für das responsive Design wird das eine Menü ausgeblendet und das andere ein*/
/*#menubar{display:none}*/
.dropdownS{display:none;}
.dropdownL{display:block;}

/* Unternavigation ausblenden */
nav ul li ul {
	Z-index:90;
	/*font: 0/0 serif;  /*durch die 0/0 Schreibweise werden die Unterpunkte schöner eingeblendet von links kommend*/
	/*neu*/
	display:none;
/*!!!!!position absolute und die ensprechende TOP-Ausrichtung
des Untermenüs zu den übergeordneten Menüpunkten ist 
dafür verantwortlich dass die Unterpunkte nicht wieder 
verschwinden!!!!!! Muss überlappen sonst sind die 2.Levelpunkte nicht anklickbar!!!!!!!*/
position:absolute; 
/* top:100%; funktioniert, aber dann hab ich einen kleinen Abstand */
top:1.9em;
left:0.3em; 
/*transition:all 800ms; */
/*opacity:1;  /* ist unsichtbar im Normalzustand*/
overflow:hidden; 
height:0; /*nur beim hovern ist es sichtbar*/
width:auto;
background: rgba(33,45,80, 0.85);
}

/*  Unternavigation einblenden */

nav ul li:hover ul {
	
	/*font: inherit; /*die Schrift wird beim hovern erst sichtbar*/
	z-index: auto;
	height:auto; 
/*opacity:1;  /* Alternative zu font: 0/0.  beim hovern wirds sichtbar*/
/*color:#88ACED;  /* beim überfahren mit der Maus gelb*/
/*neu*/
display:block;
}



nav ul li ul li{line-height: 1em;}

nav ul li ul li a{
color:white;
width:192px; 
text-align:left;  /* wenn ein bildchen davor soll macht center evtl sinn, oder mit padding platzschaffen? */
display:block; /* damit die Unterthemen untereinander stehen*/
	font-size: 0.9em; /* muss so sein, damit es die gleiche Größe wie der übergeordnete Punkt hat (der aber fontsize:1.25 hat) KOMISCH!*/
	line-height: 1.1em;
	/*transition: background 0.2s;
	-webkit-transition: background 0.2s;*/
	text-decoration: none;
}

/* focus bei Verwendung des Tab taste*/
/* betrifft alle Anker 
nav ul li a:focus,*/

/* 	====================================
	 Navigation - aktive Seite anzeigen
	==================================== */	
/* die erste klasse bestimmt die aktive Seite, die zweite klasse das auf der aktuellen Seite aktive li*/
body.home li.home a, 
body.news li.news a,
body.help li.help a, 
body.dashboard li.dashboard a, 
body.pets li.pets a { background-color:rgb(17, 151, 224);}



/* 	====================================
	Mobile Style
	==================================== */	


	
@media screen and (max-width:896px) {
	body {
		font-size:80%;
	}
	
	#main aside p {
		margin:0em 1.5em;
	}
}

@media screen and (max-width:754px) {
	body {
		font-size:70%;
	}
}

@media screen and (max-width:720px) {  
		#main article h1{
			font-size:1.7em;			
		}
}

@media screen and (max-width:655px) {
	body {
		font-size:60%;
	}
	
	#loesungen section img{ 
		max-height:21%;
		top:4.5em;
	}
}


/*	_______________________

		responsive einstellungen zur Navigation
	________________________*/

@media screen and (min-width:550px) {
	nav.nav {
		display:block !important;
	}
}

@media screen and (max-width:550px) {
	body {
		font-size:50%;
	}
	
	#menubar {
		display:block;   
	}
	#menubar ul li a.menubutton {
		display:block;   
	}
	
	#menubar ul li a.menubutton  img{
		height:auto;
		width:24%;
	}
	
	/*nav {
		display:none;
		height:auto;
	}
	*/
	nav ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
	}
}

@media screen and (max-width:506px) {
	#main article h1{
			font-size:1.3em;			
		}
}

@media screen and (min-width:355px) {
	#main article section .breakB {
			display:none;		
	}	
}

@media screen and (max-width:355px) {
		#logo img{
			width:27%;
			box-shadow: 0em 0em 0.7em 1em white;
			margin-bottom:0em;
		}
		
		#main{
			width:29em; 
			padding:2em 0em;
		}
		
		#main article h1{
			border-right: 0em;
			margin: -1em 0em;  
		}
		
		#main article h3{
			line-height:0em;
			margin:0em;
		}
		
		#main article {
		width:auto; 
		display: block;
		padding:1em;
		margin-left:auto;
		margin-right:auto;
		}
		
		#main aside {
		width:auto;
		display: block;
		padding:1em;
		margin-left:auto;
		margin-right:auto;
		}
		
		#loesungen{
			width: 90%;
		}
	}


@media screen and (max-width:320px) {
		body {
			text-align:center;
		}
		nav ul li ul {display: none;}
		nav ul li ul {position:static;}  /* static ist default einstellung, die abslolute einstellung verhindert, dass bei Toggeln das Menü nach unten geschoben wird*/
	
	nav ul li:hover ul {
	
	/*font: inherit; /*die Schrift wird beim hovern erst sichtbar*/
	z-index: 0;
	
	height:0; 
/*opacity:1;  /* Alternative zu font: 0/0.  beim hovern wirds sichtbar*/
/*color:#88ACED;  /* beim überfahren mit der Maus gelb*/
/*neu*/
display:none;
}

/*#menubar ist die section in der der Resopnsive Button fürs Menü drin ist*/
#menubar {
	display:block; 
	position:relative;	
	left: 10em;
}
		/* dropdown smartphone */
		.dropdown2Level{display:none;}
		
		/*	Listenpunkte 1. Level die als Ersatz für die Dropdowns auf den kleinen Screens erstellt wurden, sollen nicht sichbar sein!	*/
		.dropdown1Level{ display:block;}
		
.dropdownS{display:block;}
		.dropdownL{display:none;}
		
		
		.dplNone{display:none;}
/*.toggle	, .dplNone{
	display:block;
	background-color: #254441;
	  padding: 0 20px;
	  color: #FFF;
	  font-size: 20px;
	  line-height: 60px;
	  text-decoration: none;
 	  border: none;
}*/

		#logo img{
			width:27%;
			box-shadow: 0em 0em 0.7em 1em white;
			margin-bottom:0em;
		}
		
		#menubar ul li a.menubutton {
			top:1.5em;
			left:-2em;
		}
		
		section.containerUeber{
			margin-top: 3.25em;
		}
		
		section.containerUeber h1{
			font-size:2.2em;
		}
		
		section.breakC h3{	
			font-size:1em;
			line-height: 3.5em;
		}
		
		#main{
			width: 30em;   
			margin-top:2em;
		} 
		
		#main article{
			text-align:center;
			margin:0em;
			padding:2em;
		}
		
		#main aside {		
		text-align:center;
		padding:0.75 2em 2em;
		}
		
		#break h3{
			font-size:0.8em;
			text-align:left;
		}
		
		
	}