/* navigation */

.skipnav { text-align: left; }

.skipnav a { 
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skipnav a:focus, .skipnav a:active {
	position: static;
	left: 0;
	width: auto;
	height: auto;
	overflow: visible;
	text-decoration: underline;
} 

.togglemenu {
 display: none;
}

.handheld-show {
  display: none;
}

.handheld-hide {
  display: inherit;
}

header{
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  z-index: 10;
  margin: 0;
  padding: 0;
  background-color: #333333;
/*  background-image: url("../images/banner.jpg"); */
}

#logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  padding: 0 5px;
  float: left;
}

nav {
  display: table;
  float: right;
  color: #FFFFFF;
  font-size: 1.25em;
  text-decoration: none;
  border: none;
}

nav input {
  display: none;
}

nav::after {
  content: "";
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  line-height: 50px;
}

nav ul li {
  margin: 0px;
  float: left;
}

nav a,
nav label {
  display: block;
  padding: 0 1em;
  color: #ffffff;
  font-size: 1.25em;
  text-decoration: none;
}

nav a:hover,
nav label:hover { }

nav ul ul {
  display: none;
  position: absolute;
  top: 50px;
}

nav ul li:hover > ul { 
  display: inherit;
}

nav ul ul li {
  width: 23ch;
  float: none;
  position: relative;
  background-color: SlateGray;
  border: 1px solid White;/*	  background-color: Gray; */
}

nav ul ul ul li {
  position: relative;
  width: 23ch;
  top: -50px;
  left: 23ch;
  background-color: SlateGray;
}

[id^="drop"] + label:after  { content: ' \25BC'; }

/* Media Queries
--------------------------------------------- */
@media only screen and (min-width: 1000px) {
	[id^="handheld-show"] {display: none;}
	[id^="handheld-hide"] {display: inherit;}
}

@media only screen and (max-width: 999px) {

	[id^="drop"]:checked + label:after  { content: ' \25B2'; }
	[id^="drop"]:not(:checked) +label:after { content: ' \25BC'; }

	.menu { 
		display: none;
  		position: fixed;
  		top: 50px;
		width: 260px;
		font-size: 1.1em;	/* 20px/16 = 1.25em */
		padding-right: 10px;
		height: 100%;
		overflow: auto;
		background-color: #252525;
 	}

	[id^="handheld-show"] {display: none;}
	[id^="handheld-hide"] {display: inherit;}

	.togglemenu {
	  display: block;
	  float: right;
	  background-color: #252525;
	  padding-top: 10px;
	  text-decoration: none;
	  border: none;
	}

	.togglemenu:hover { background-color: #000000; }

	.toggle {
	  display: block;
/*	  background-color: SlateGray; */
	  color: #FFF;
	  text-decoration: none;
	  border: none;
	}

	.toggle:hover { background-color: #000000; }

	[id="drop"]:checked + label + ul { display: block; }

	[id^="drop-"]:checked + label + ul { display: block; }

	div#logo {
		display: inline;
	}
	
	nav {
		display: inline;
		width: inherit;
	}

	nav a,
	nav label {
	  line-height: 1.2em;
		font-size: 1em;	/* 20px/16 = 1.25em */
	  padding: 3px 0px;
  	  border-style: none;
  	  border-radius: 6px;
	  box-sizing: border-box;
	}
	
	nav ul {
		float: left;
	  background-color: SlateGray;
	}

	nav ul  .toggle{
	  background-color: Gray;
	}

	nav ul li {
	  width: inherit;
	  background-color: SlateGray;
	  padding: 3px;
  	  border-style: none;
  	  border-radius: 6px;
	  box-sizing: border-box;
	}

	nav ul ul {
	  float: none;
	  position: static;
	  color: #ffffff;
	}

	nav ul ul li {
	  margin: 2px 5px 2px 10px;
	  background-color: SlateGray;
  	  border-style: none;
  	  width: inherit;
	}

	nav ul ul .toggle,
	nav ul ul a { 
	  padding: 2px 5px 2px 10px;
	}
	
	nav ul ul .toggle {
	  background-color: Gray;
	}

	nav ul ul li:hover > ul,
	nav ul li:hover > ul { display: none; }

	nav ul ul ul li { 
	  width: inherit;
	  margin: 2px 0px 2px 10px;
	  top: 0px;
     left: 0px;
	  background-color: SlateGray;
  	  border-style: none;
	}
	
	nav ul ul ul a {
		background-color: SlateGray;
	}
}