/* Add a black background color to the top navigation */
.topnav {
  position: absolute;
  top:0;
  left:0;
  background-color: #333333;
  overflow: hidden;
  z-index: 100;
}
/* Image style */
.topnav a img {
  height: 15px;
  border: none;
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: flex;
  align-items: center;
  color: #f2f2f2;
  border-radius: 10px 10px 0 0;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 15px;
}

.tn0 {background-color:red;}
.tn1 {background-color:green;}
.tn2 {background-color:blue;}
.tn3 {background-color:orange;}
.tn4 {background-color:purple;}
.tn5 {background-color:turquoise;}

/* Initially hide the text for all links */
.topnav a .hed {
  display: none;
}

/* Show the text for the active link */
.topnav a.active .hed {
  display: inline;
}
.topnav a.active:hover {
  color: black;
}

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

/* Show the text when the link is hovered over */
.topnav a:hover .hed {
  display: inline;
}

/* Change the image source on hover and when active */
.tn0:hover img {content: url('../_but/home_0.png');}
.tn1:hover img {content: url('../_but/draft_0.png');}
.tn2:hover img {content: url('../_but/form_0.png');}
.tn3:hover img {content: url('../_but/progress_0.png');}
.tn4:hover img {content: url('../_but/map_0.png');}
.tn5:hover img {content: url('../_but/gallery_0.png');}


/* Add an active class to highlight the current page */
.topnav a.active {
  color: white;
}