/*
	  -------------------------------------------------------------------------
	  CSS-Stylesheet für
	  hobby-elektroniker.de                       
	  -------------------------------------------------------------------------
	  Teil: Navigationsleiste
	  -------------------------------------------------------------------------
	  Autor: Torsten Just
	  Datum: 1.4.2018
	  angelehnt an die Tutorials von Oliver Gast (http://www.olivergast.de)
	  -------------------------------------------------------------------------
	*/

	nav {
		box-sizing: 				border-box;
		float: 						left;
		width: 						100%;
		background: 				#555;
		font-size: 					1em;
		margin-left: 				0px;
	}

	nav ul {
		margin: 					0;
		padding: 					0;
	}

	nav a {
		display: 					block;
		color: 						#fff;
		text-decoration: 			none;
	}

	nav ul li {
		position: 					relative;
		float: 						left;
		list-style: 				none;
	}

	nav ul li:hover {
		background: 				#4096ee;
	}

	nav ul li a {
		padding: 					8px 20px;
	}

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

	nav ul ul li {
		float: 						none;
		width: 						200px;
		border-bottom: 				1px solid #555;
	}

	nav ul ul li a {
		padding: 					8px 20px;
	}

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

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

	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;
	}

	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;
	}

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

	input#responsive-nav,
	label.responsive-nav-label {
		display: 					none;
	}

	@media screen and (max-width: 1000px) {
		label.responsive-nav-label {
			position: 				relative;
			display: 				block;
			padding: 				8px 20px;
			background: 			#555;
			cursor: 				pointer;
			color: 					#fff;
		}
		
		label.responsive-nav-label span {
			margin-right: 			10px;  
		}
		
		header {
			padding-top: 			1px;
			padding-bottom: 		20px;
		}
		nav {
			position: 				absolute;
			top: 					-9999px;
			padding: 				10px;
		}

		input#responsive-nav[type=checkbox]:checked ~ nav {
			position: 				relative;
			top: 					0;
		}
		
		nav a:after {
			display: 				none;
		}
		
		nav li {
			float: 					none !important;
			width: 					100% !important;
			border-bottom: 			none !important; 
		}

		nav li a {
			margin-bottom: 			5px !important;
			padding: 				8px 20px !important; 
		}

		nav ul li:hover {
			background: 			none;
		}

		nav ul li a:hover {
			background: 			#4096ee;
		}
		
		nav ul ul {
			position: 				relative !important;
			width: 					100%;
			left: 					0 !important;
			top: 					0 !important;
			background: 			none !important;
			box-shadow: 			none;
		}

		nav ul ul li {
			padding-left: 			20px;
		}
	}