/* ---------------------------------------------------------
   CSS für die Navigation; navigation.css 
   ---------------------------------------------------------*/
@media screen {

/* Basisnavigation */ 
* {
	box-sizing: border-box;
}
nav {
	background: white;
	color: #0F0;
}
nav ul {
  padding: 0;
  margin: 0; 
}
/*nav li {
	display: inline;
	padding: 0;
	margin: 0;
	width: 50%;
	float: left;
}
*/nav li a {
	text-decoration: none;
	color: #666;
	padding: 1em;
}
nav li.active a {
  color: black; 
  text-decoration: underline;
}
/* siehe http://www.drweb.de/magazin/css-for-runaways-5-unterschaetzte-selektoren-44651/ */ 
nav li:first-child a {
  padding-left: 0; 
}

/* Mobile Navigation */  

body { position: relative; }
.pageheader { box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

/* Button positionieren */ 
/*div.menubutton {
  display: block; 
  position: absolute;
  right: 1em;
  top: 1em;
  z-index: 1000;
}*/
/* Button gestalten */
div.menubutton a {
	display: block;
	color: white;
	background: #333333;
	text-decoration: none;
	padding: 0.5em;
	border: none;
	border: 1px solid #333333;
	border-radius: 0.3em;
	box-shadow: 2px 2px 4px 0px #CCC;
	-webkit-border-radius: 0.3em;
	-webkit-box-shadow: 2px 2px 4px 0px #CCC;
	-moz-box-border-radius: 0.3em;
	-moz-box-box-shadow: 2px 2px 4px 0px #CCC;
	margin-bottom: 5px;
}
div.menubutton a:hover, div.menubutton a:focus {
	color: black !important;
	background: white !important;
	text-decoration: none !important;
	border: 1px solid #333333 !important;
}
/* Unicode-Zeichen checken: unicode-table.com */ 
div.menubutton a.shownavlist:after {
  content: " \25bc"; /* triangle down */ 
  font-size: 0.7rem;
}
div.menubutton a.hidenavlist:after {
  content: " \25b2"; /* triangle up */
  font-size: 0.7rem; 
}
div.menubutton a.hidenavlist {
  display: none; 
}

/* Navigationsbereich gestalten */ 
nav {
	/* [disabled]background: red; */
	margin: 0px;
	/*padding-top: 5;*/
	padding-bottom: 8px;
	padding-right: 5px;
	padding-left: 5px;
	/* [disabled]position: relative; */
	/*padding-left: 1em;
	padding-right: 1em;*/
}
/*nav ul#navlist {
	max-height: 0;
	overflow: hidden;
	transition: 0.5s;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
*/
/*nav li {
	display: inline-block;
	border-bottom: 1px solid #ddd;
	padding: 5px;
	line-height: 0.8px;
}*/
nav li:last-of-type {
  /*border-bottom: none;*/ 
}
/* Attributselektor wg. Spezifität */ 
nav[role="navigation"] li a {
	display: block;
	text-decoration: none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bcbcbc+0,ededed+100 */
	background: #bcbcbc; /* Old browsers */
	background: -moz-linear-gradient(top,  #bcbcbc 0%, #ededed 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #bcbcbc 0%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #bcbcbc 0%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcbcbc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
	color: #333;
	padding: 1em;
	text-align: center;
	border: 1px solid #666666;
	border-radius: 0.5em;
	box-shadow: 2px 2px 4px 0px #CCC;
	-webkit-border-radius: 0.5em;
	-webkit-box-shadow: 2px 2px 4px 0px #CCC;
	-moz-box-border-radius: 0.5em;
	-moz-box-box-shadow: 2px 2px 4px 0px #CCC;
}
nav[role="navigation"] a:hover, nav[role="navigation"] a:focus {
	/*text-decoration: underline;*/ 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cecece+0,7f7f7f+100 */
background: #cecece; /* Old browsers */
background: -moz-linear-gradient(top,  #cecece 0%, #7f7f7f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #cecece 0%,#7f7f7f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #cecece 0%,#7f7f7f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#7f7f7f',GradientType=0 ); /* IE6-9 */
	border: 1px solid black;
	color: white;
} 
nav li.active a {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff94ff+33,96b8ff+100 */
background: #ff94ff; /* Old browsers */
background: -moz-linear-gradient(top,  #ff94ff 33%, #96b8ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ff94ff 33%,#96b8ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ff94ff 33%,#96b8ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff94ff', endColorstr='#96b8ff',GradientType=0 ); /* IE6-9 */
	color: black;
	text-decoration: none;
	border: 1px solid blue;
}
nav li.hover {
  background: #08c; 
  color: red;
  text-decoration: none; 
}

/* Right on :target - die mobile Navigation in Aktion */
/* #menu:target = wenn in der URL #menu hinten dran hängt */ 
#menu:target ul#navlist {
  max-height: 25em;
}
#menu:target a.shownavlist {
  display:none;
}
#menu:target a.hidenavlist {
  display:block;
}


}  /* Ende @media */   
.hideme {
  position: absolute;
  top: -32768px;
  left: -32768px; 
}