@charset "utf-8";

/* This is the button which opens the drop menu. */
.menuIconContainer{
	display: inline-block;
	margin: 0px auto;
	padding: 4px;
	text-align: center;
	background-color: #696969;	
	font-size: 32px;
	color: #ffffff;
	line-height: .6;
	text-align: center;
	cursor: pointer;
}

.menuIconContainer:hover{
	opacity: 0.7;
}

/* This is the page-wide transparent menu background. It is necessary so that clicking outside the menu, on this div, closes the drop menu.*/
#dropMenuBackground{
	z-index: 10; 
	width: 100%; 
	height: 100%; 
	position: fixed; 
	top: 0; 
	left: 0;
	overflow: scroll;
	display: none;
}

/* This is the drop menu. */
#dropMenu{
	display: none;
	position: fixed;
	top: 0px;
	right: 0px;
	background-color: #808080;
	border: 1px solid #000000;
	font-family: Arial, Helvetica, sans-serif;
	width: 190px;
	color: #ffffff;
	z-index: 20;
	text-align: left;
	animation: animateMainMenu 0.4s;
	overflow: visible;
}
@keyframes animateMainMenu{
	from{
		top: -100px;
		opacity: 0;
		}
	to{
		opacity: 1;
	}
}

/* In case you're using links instead of JavaScript functions in the menu, this removes link effects. */
#dropMenu a:link, #dropMenu a:visited{
	text-decoration: none;
	color: #ffffff;
}

/* This is a line item in the main menu. */
.menuItem{
	padding: 16px 5px 5px 5px;
	border-top: 2px solid #f0f0f0;
	border-bottom: 2px solid #000000;
	font-size: 14px;
	cursor: pointer;
}

.menuItem:hover, .menuItem:active{
	background-color: #a9a9a9; 
}

/* This is a sub-item in the menu. */
.subMenuItem{
	padding: 4px 4px 4px 15px;
	cursor: pointer;
	font-size: 12px;
}
.subMenuItem:hover, .subMenuItem:active{
	background-color: #989898; 
}

.nonLinkItem{
	padding: 5px;
	font-size: 14px;
	cursor: default;
}

/* This is the button within the drop menu which closes it. */
.closeMenuIcon{
	font-style: italic;
	font-weight: bold;
	text-align: right;
	border-bottom: 0px;
	padding: 8px;
	cursor: pointer;
}

.closeMenuIcon:hover, .closeMenuIcon:active{
    color: #e81123;
}