/* based on https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
/* Add a dark background to the top navigation */
.topnav {
	clear: both;
	max-width:1024px;
	margin-left:auto;
	margin-right:auto;
	background-color: #AAA;	
	background: linear-gradient(#999, #BBB); /* Standard syntax */
  overflow: hidden;
	box-shadow: 2px 2px 3px #DDD;
	margin-bottom:12px;
}

/* Style the links inside the navigation bar */
.topnav ul {
	margin:0;
	padding: 0;
	overflow:auto;
}
/* Add same dark background in case menu folds onto new line*/
.topnav li {
    float: left;
    display: block;
    padding: 0;
		margin: 0;
    text-decoration: none;
		list-style:none;
}

.topnav a {
	display: block;
	color: #f2f2f2;
	font-size: 16px;
	text-align: center;
	padding: 13px 16px;
	text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
	background-color:#69E;
	background: -webkit-linear-gradient(#58D, #7AF); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#58D, #7AF); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#58D, #7AF); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#58D, #7AF); /* Standard syntax */
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
		/*font-size:15px;*/
}

/* When the screen is less than 640 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 640px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 640px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav li:last-child {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 640px) {
  .topnav.responsive {
		position: relative;
		background-color: #AAA;	
	}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
		background-color: #AAA;	
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
		width:100%;
		background-color: #AAA;	
		border-bottom: 1px solid #CCC;
  }
	.topnav.responsive a {
	padding: 13px 16px 12px;
	}
}