/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all.
   ---------------------------------------------------------*/
	body {
   
	}
	/* Default link styling */
	/*
	a:link { color:#0271fb; }
	a:visited { color:#bd02fb; }
	a:hover, a:focus { color:#000; }
	a:active { color:#fb0e02; }
	*/
	
	
/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/
	body {
		background: none repeat scroll 0 0 #fff;
		font-family: sans-serif,"Trebuchet MS",arial;
		margin: 0 auto;   
	}


	main {
		
		min-width:360px;	
		max-width:1000px;	
		
		/*position: relative;*/
		padding: 0;
		margin: 0 auto;
 
	}


	h1 {
		padding: 40px 0px 10px 0px;
		font-size: 2.0em;
	}
	
	h1, h2 {
		color: #9c11c8;
	}
	
	header {
		margin: 1em auto;

		min-width:360px;	
		max-width:1000px;	

		text-align: center;
		display: block;

		display: flex;
		flex-wrap: wrap;		
	}

	a { 
		text-decoration: none;
		color: #666;
	}

	a:visited { 
		color: #878787;
	}


	
	#Navi-Titel {
		
		margin: 10px; 
		width:100%; 
		text-align:left; 
		font-weight:bold; 
		font-size:0.8em;
		
	}

	nav {
		border: 0px dotted #666;
		width: 100%;
		height:100%;
		float: right;
		text-align:right;
		margin: 0;
		z-index: 2;
	
	}
	
	nav ul {
		margin: 0;
		padding: 0;
		font-size: 1.0em;
		list-style: none;
	
	}
	
	nav ul li{
		display:inline;

	}

	.menu-item {
		
		margin: 0px 10px 0px 10px;
		
	}
	
	
	.menu-item-active {

		font-size: 1.8em;
		font-weight:bold;
		text-decoration:underline;

	}
	
	
	
	
	section {
	
		width:100%; 
		min-height:600px;
		margin: 0 auto;
		text-align: center;
		background-color:#eee;
		display: block;		
	}

	footer {
		width:100%;
		color: #fff;
		background-color:#662e64;	
		margin: 0em auto;
		text-align: center;
		display: block;		
	}



	
	#head_left {
		height:110px; 
		max-width:50%;
		flex: 1 1 0;
		order: 1;
		border: 0px dotted green;
		text-align:left;
		padding-left: 15px;		
	}
	
	#head_right {

		max-width:50%;
		flex: 1 1 0;
		order: 2;
		border: 0px dotted red;
	}	

@media screen and (min-width:600px) {
	#head_left {
		min-width:40%;
		max-width:49%;
	}
 
	#head_right {
		min-width:35%;
		max-width:49%;
	}	
	
	#Navi-Titel {
		margin: 10px; 
		text-align:right; 
	}		
	
}

@media screen and (max-width:600px) {
	#head_left {
		min-width:98%;
		max-width:100%;
	}
	
	#head_right {
		background-color:#fff;
		min-width:98%;
		max-width:100%;
	}
	
	nav {
		float: center;
		text-align:center;
	}
	
	#Navi-Titel {
		margin: 10px; 
		text-align:left; 
	}		

		
}
	



	
	
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
		background:transparent !important;
    }
	html { background-color:#fff; }
	/* Hide navigation */
	nav { display:none; }

	/* Show link destinations in brackets after the link text */
	a[href]:after { content: " (" attr(href) ") "; }
	a[href] {
		font-weight:bold;
		text-decoration:underline;
		color:#06c;
		border:none;
	}
	/* Don't show link destinations for JavaScript or internal links */ 
	a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
	
	/* Show abbr title value in brackets after the text */
	abbr[title]:after { content: " (" attr(title) ")"; }

	figure { 
		margin-bottom:1em; 
		overflow:hidden;
	}

	figure img { border:1px solid #000; }
}