/* We remove the margin, padding, and list style of UL and LI components  */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
		z-index: 10000;
}

/* We apply background color and border bottom white and width to 150px  */
#menuwrapper ul li{
	background-color:#252d38;
	border-bottom:1px solid #bcb393;
	width:200px;
	font-size: 13px;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 8px;
	text-align: right;
	color: #F00;
}

/* We apply the background hover color when user hover the mouse over of the li component  */
#menuwrapper ul li:hover{
    background-color:#6679e9;
    position:relative;
}

/* We apply the link style  */
#menuwrapper ul li a{
	color:#FFC600;
	display:inline-block;
	text-decoration:none;
	font-weight: normal;
}

/**** SECOND LEVEL MENU *** */
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item  */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.   */
#menuwrapper ul li:hover ul{
	left:208px;
	top:0px;
	display:block;
}

/* we apply different background color to 2nd level menu items */
#menuwrapper ul li ul li{ background-color:#FFC600; 
}

/* We change the background color for the level 2 submenu when hovering the menu  */
#menuwrapper ul li:hover ul li:hover{ background-color:#f4df98; 
}

/* We style the color of level 2 links  */
#menuwrapper ul li ul li a{
	color:#454444;
	display:inline-block;
}