/**
 * Menu system version 0.1
 */

#menu_container {
	position            : relative;
	transition-property : left;
	transition-duration : 500ms;
	z-index             : 1000;
}

.menu_toggle {
	display                   : none;
	position                  : fixed;
	top                       : 0;
	right                     : 5px;
	width                     : 50px;
	height                    : 35px;
	text-align                : center;
	background-color          : black;
	color                     : white;
	z-index                   : 1200;
	border-bottom-left-radius : 5px;
	line-height               : 35px;
	font-size                 : 18pt;
}

.menu_bar_spacer {
	height : 30px;
}

.menu_bar {
	cursor           : default;
	background-color : black;
	top              : 0;
	left             : 0;
	width            : 100%;
	line-height      : 24px;
	height           : 24px;
	font-size        : 15px;
}

.menu_item, .menu_spacer {
	position      : relative;
	display       : inline-block;
	height        : 100%;
	padding-left  : 5px;
	padding-right : 5px;
	color         : white;
	width         : 140px;
	cursor        : pointer;
}

.menu_spacer {
	cursor           : default;
!important;
	background-color : black;
	width            : 98%;
}

.menu_item:hover {
	background-color : white;
	color            : black;
}

.menu_item:hover > .sub_menu, .menu_item:active > .sub_menu {
	display : block;
	opacity        : 1;
	pointer-events : all;
}

.sub_menu {
	background-color           : #1e1e1e;
	color                      : white;
	display                    : none;
	opacity                    : 0;
	position                   : absolute;
	top                        : 1.6em;
	left                       : 0;
	width                      : 100% /*calc(100% - 2px)*/;
	padding                    : 4px;
	/*transition-timing-function : ease-out;*/
	/*transition-property        : opacity;*/
	/*transition-duration        : 250ms;*/
	pointer-events             : none;
}

.sub_menu_item, .menu_item a {
	cursor : pointer;
	color  : white;
}

.sub_menu_item:hover, .menu_item:hover > a {
	background-color : white;
	color            : black;
}

.sub_menu_item:hover > a {
	color: black;
}

.sub_menu > a, .menu_item > a {
	text-decoration : none;
}

@Media only screen and (max-width : 1090px) {
	#menu_container {
		background-color : black;
		width            : 100%;
		height           : 100%;
		overflow-x       : hidden;
		overflow-y       : scroll;
		position         : fixed;
		top              : 0;
		left             : -1090px;
	}

	.menu_toggle {
		display : block;
	}

	.menu_bar {
		height        : auto;
		margin-bottom : 20px;
		border-top    : 1px solid white;
	}

	.sub_menu {
		position : unset;
	}

	.menu_item {
		width         : 100%;
		display       : block;
		padding       : 10px;
		border-bottom : 1px solid #5a5a5a;
	}
}