@charset "utf-8";
/*
* This is the responsive menu bar used by CanvasMap (and other websites).
*/

/* 
* styles for the menu when it is along the top (no button) 
*/

/* Main nav bar style when along the top and without the button */
.SpaNavBar {
	position:fixed;
	top:0px;
	width:100%;
	
	overflow: hidden;
	background-color: rgba(200,200,200,1.0);
  	z-index:98;
}

.SpaNavBar a {
	float:left;
	display: block;
	color: black;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
  	z-index:99;
}

.SpaNavBar a:hover {
  background-color: rgba(200,200,200,1.0);
  color: black;
}

.SpaNavBar a.active {
  background-color: rgba(33,150,243,1.0);
  color: white;
}
/* 
* styles for the menu when it is a drop-down menu
*/

/* Main nav bar style when along the top and without the button */
.SpaNavDropDown {
	position:fixed;
	top:0px;
	width:100%;
	
	overflow: hidden;
	background-color: rgba(200,200,200,1.0);
  	z-index:98;
}

/* style for a link in the drop down menu */
.SpaNavDropDown a {
	float: none;
	display: block;
	text-align: left;
	padding: 14px;
	width: 100%;
	margin: 0;
  	text-decoration: none;
  	font-size: 17px;
  	z-index:99;
	background-color: rgba(200,200,200,1.0);
}

.SpaNavDropDown a:hover {
	background-color: rgba(221,221,221,1.0);
  	color: black;
}

.SpaNavDropDown a.active {
 	background-color: rgba(33,150,243,1.0);
  	color: white;
}
/**
* Addtitional classes
*/
/* Class for the optional title object that appears to the left of the menu */
.SpaNavBarTitle {
	float:left;
	color: black;
	padding: 0px 0px;
	margin:0px;
	text-decoration: none;
	font-size: 17px;
  	z-index:99;
}

/* Class for the button that controls the drop-down menu */
.SpaNavButton {
  position: fixed;
  top: 0px; /* forces button to stay in the navbar */
  right: 0px; /* forces button to the right side of the window */
  height:32px;
  margin:6px; /* spacing around the button */
  
  z-index:100;
  visibility:hidden; /* hidden to start */
  border-radius: 5px;
  border:1px gray solid;
}
</style>