.fixed-nav-bar {
  
	position: fixed;
  
	top: 0;
  
	left: 0;
  
	right: 0;
  
	z-index: 9999;
  
	width: 100%;
  
	height: 50px;
  
	background-color: #fff;
	
    border-top: 3px solid red;


	text-align:center;
	}



/* The element at the top of the page right after the fixed navigation bar
   
MUST have sufficient top margin or else it will be covered by the bar */


.content {
  
	margin-top: 10px;

	}



/* Example responsive navigation menu  */
	

.fixed-nav-bar li, .fixed-nav-bar a { 
  
	height: 50px;
  
	line-height: 20px;

	}


.menu {
  
	width: 90%;
  
	max-width: 960px;
  
	margin: 0 auto;
	
}


.menu a, .menu a:visited {
  
	color: #777;

	}


.menu a:hover, .menu a:target {
  
	color: #c53333;
	
}


.menu-items {
  
	display: inline-block;
	
}


.sitename {
  
	display: inline-block;
  
	margin-right: 20px;
  
	margin-left: 10px;

	}


a.sitename, a:visited.sitename {
  
	color: #e0e0e0;

	}


.menu-items li {
  
	display: inline-block;
  
	margin-right: 10px;
  
	margin-left: 10px;
	}


.menu-items a {
  
	text-decoration: none;
	
}


.show, .hide {
  
	display: none;
  
	padding-left: 15px;
  
	background-color: transparent;
  
	background-repeat: no-repeat;
  
	background-position: center left;
  
	color: #dde1e2;
	
}


.show {
  
	background-image: url(assets/down-arrow-icon.png);
	
}


.hide {
  
	background-image: url(assets/up-arrow-icon.png);
	
}



@media only screen and (max-width: 800px) {
  
	.menu { 
    
		position: relative;
    
		width: 100%;
  
		}
  

	.sitename {
    
		position: absolute;
    
		top: 0;
    
		left: 15px;
    
		margin-left: 0px;
  
		}
  

	.menu-items {
    
		display: none; 
    
		width: 100%;
    
		margin-top: 50px;
    
		background-color: #008378;
  
		}
  

	.menu-items li {
    
		display: block;
    
		text-align: center;
  
		}
  

	.show, .hide {  
    
		position: absolute;
    
		top: 0;
    
		right: 15px;
  
		}
  

	.show {
    
		display: inline-block;
  
		}
  

	.hide {
    
		display: none;
  
		}
  

	#menu:target .show {
    
		display: none;
  
		}
  

	#menu:target .hide, #menu:target .menu-items {
    
		display: inline-block;
  
		}

	}




@media only screen and (max-width: 220px) {
  
	.sitename, .show, .hide {
    
		font-size: 14px;
  
		}

	}