/*
 *
 * Version: 1.2.0 (20190215)
 * Requires:
 *
 * Copyright © 2015-2024 Tod W. McNamara. All Rights Reserved
 *
 *
 */
@charset "utf-8";
/* Top Navigation Bar */
#navbar {
  background-color: rgba(0, 0, 0, 0); /* white */
  position: fixed;
  top: 1%;
  left: 1%;
  width: 98%;
  height:2%;
  display: none;
  font-family: Arial, Helvetica, sans-serif;
  transition: top 0.3s;
  z-index: 5;
}
@media (hover: hover) {
#navbar a:hover, .dropdown:hover .navbtn {
  background-color: black;
  }
}
#navbar a {
  color: white;
  float: left;
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar-right {
	position: relative;
	top: 45%;
	float: right;
	transition: top 0.3s;
}
#navbar-left {
	position: relative;
	top: 45%;
  	float: left;
  	transition: top 0.3s;
}
#top-bar-message {
   color: white;
   background-color: rgba(0, 0, 0, 0);
   position: relative;
   margin-top: 25px;
   top: 50%;
   float:none;
   font-size: 16px;
   text-align: center;
   width:30%;
   display:none;
   transition: top 0.3s;
}
#manual-load {
   display:none;
}
/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
#navbar {
    padding: 20px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
#navbar a {
    float: none;
    display: block;
    text-align: left;
    color:red;
  }
#navbar-right {
   float: none;
  }
#top-bar-message {
   float: none;
  }
#navbar-left {
 	float: none;
  }
}
/* Navigation Bar Buttons */
.navbtn {
 	border-radius:14px; /* previously 10px, container 18px */
 	background-color:rgba(0,0,0,0.1);

/* 	color:black;*/
	display:block;
	opacity:0.6;
	height:54px;
}
.navbtn:hover {
	opacity: 1;
	transition: opacity 0.3s;
}
.clearnavbtn {
 	border-radius:8px;
	display:block;
	opacity:0.1;
	height:50px;
}
.clearnavbtn:hover {
	opacity: 1;
	transition: opacity 0.3s;
}
.smallnavbtn {
 	border-radius:8px;
	display:block;
	opacity:1.0;
	height:50px;
}
.smallnavbtn:hover {
	transition: background-color 0.3s;
}
.smallnavbar a {
  float: left;
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Left Mid Navigation Bar */
#left-side-navbar {
  background-color: rgba(255,255,255,0.1);
  position: fixed;
  top: 55px;
  left: 1%;
  height: 92%;
  width:1px;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 5;
  transition: 0.3s;
}
#left-side-navbar a {
  float: left;
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#toLeft {
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transfore: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
@media (hover: hover) {
#left-side-navbar a:hover {
  background-color: rgba(0,0,0,1.0); /* black */;
  color: white;
  }
#left-side-navbar a:hover.light {
  background-color:rgba(0,0,0,1.0); /* black */
  color: white;
  }
#left-side-navbar a:hover.page {
  background-color: rgba(0,0,0,1.0); /* black */
  color: rgba(255,250,205,1.0);
  }
}

/* Right Mid Navigation Bar */
#right-side-navbar {
  background-color: rgba(255,255,255,0.1);
  position: fixed;
  top: 55px;
  left: 100%;
  width:1px;
  height: 92%;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 5;
  transition: 0.3s;
}
#right-side-navbar a {
  float: left;
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
@media (hover: hover) {
#right-side-navbar a:hover {
  background-color: rgba(0,0,0,1.0); /* black */
  color: white;
  }
#right-side-navbar a:hover.light {
  background-color: rgba(0,0,0,1.0); /* black */
  color: white;
  }
#right-side-navbar a:hover.page {
  background-color: rgba(0,0,0,1.0); /* black */
  color: rgba(255,250,205,1.0);
  }
}
#toRight {
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transfore: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

/* Bottom Navigation Bar */
#lower-navbar {
  position: fixed;
  bottom: 20px;
  left: 1.5%;
  width: 99.5%;
  height:56px;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  transition:  0.3s;
  z-index: 5;
}
#navbar-left{
  z-index: 5;
  transition: 0.3s;
}
#lower-navbar a {
  float: left;
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/*
#lower-navbar a.txtcolors {
  float: left;
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
*/
@media (hover: hover) {
#lower-navbar a:hover {
  background-color: rgba(0,0,0,1.0); /* black */
  color:white;
  }
#lower-navbar a:hover.light {
  background-color: rgba(0,0,0,1.0); /* black */
  color:white;
  }
#lower-navbar a:hover.page {
  background-color: rgba(0,0,0,1.0); /* black */
  color:rgba(255,250,205,1.0);
  }
}
#toTop {
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transfore: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}
#toBottom {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transfore: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}