#menuwrapper {
	position: relative;
	margin: 10px 0 0 90px;
}

#menuwrapper ul,
#menuwrapper ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li {
	/*background: url(../image/menu-bg.png);*/
	background: rgba(208, 153, 32, 0.8);
	text-align: right;
	width: 160px;
	cursor: pointer;
}

/* We apply the background hover color when user hover the mouse over of the li component */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover,
#menuwrapper ul li.iehover {
	background-color: #CAC45A;
	position: relative;
}

/* We apply the link style */
#menuwrapper ul li a {
	padding: 9px 20px 9px 15px;
	color: #ffffff;
	font-size: 14px;
	font-family: 'Cinzel';
	display: inline-block;
	text-align: left;
	text-decoration: none;
}

/**** 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.  */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul,
#menuwrapper ul li.iehover ul {
	left: 160px;
	top: 0px;
	display: block;
}

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

/* We change the background color for the level 2 submenu when hovering the menu */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover {
	background-color: #b1b536;
}

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

@media all and (max-width: 1220px) {
	#menuwrapper {
		position: relative;
		margin: 5px 0 0 0px;
	}
}

@media all and (max-width: 900px) {
	#menuwrapper {
		display: none;
	}
}