main/public_html/css/menu.css

/* Menu Item Wrapper */
#MENU .menu-item-wrapper{
	display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 4em;

	flex: 0 0 1;

	font-size: .8em;

	overflow: hidden;
}

/* Menu Standard Item */
#MENU .menu-item-wrapper .menu-item{
	display: block;
		top: 0;
		left: 0;
		width: calc( 100% - 3em );
		height: calc( 100% - 1.4em );

	background: #fff url('/image/menu/dashboard.svg') center left 1em no-repeat;
	background-size: 1.2em auto;

	padding-top: 1.4em;
	padding-left: 3em;

	color: #888;
	letter-spacing: 2px;

	overflow: hidden;

	cursor: pointer;

	transition: background .2s ease-in-out,
				padding    .2s ease-in-out,
				color      .2s ease-in-out;
}

#MENU .menu-item[data-theme='emergency']{ background-image: url('/image/menu/emergency.svg@aaaaaa'); }
#MENU .menu-item[data-theme='event']{     background-image: url('/image/menu/event.svg@aaaaaa');     }
#MENU .menu-item[data-theme='inbox']{   background-image: url('/image/menu/messages.svg@aaaaaa');   }

/* HOVER */
#MENU .menu-item:hover,
#MENU .menu-item.active{
	color: #444;

	background-color: #eef2f5;
}

#MENU .menu-item[data-theme='emergency']:hover{ background-image: url('/image/menu/emergency.svg@f93e2b'); }
#MENU .menu-item[data-theme='event']:hover{     background-image: url('/image/menu/event.svg@2986d4');     }
#MENU .menu-item[data-theme='inbox']:hover{   background-image: url('/image/menu/messages.svg@23c795');   }





/****************************/

/* Minified Menu */
#WRAPPER.min #MENU{
	width: calc( 3.5em - 1px );
}


#WRAPPER.min #MENU .menu-item-wrapper .menu-item{
	width: calc( 100% - 5em );
	padding-left: 5em;

	background-position: 1.2em center;
	background-size: 2em;
}