@charset "utf-8";
/* CSS Document */
/* Define the body style */
/* body {
    font-family:Arial;
    font-size:14px;
}
*/
/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
	font-family:Arial;
	font-size:16px;
	padding:0;
	list-style:none;
	width:272px;
	z-index:2000;
}
/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
	background-color:#D2FFA5;
	width:272px;
	margin:1px;
	margin-bottom:14px;
	box-shadow: 3px 3px 2px #888;
	border-style:groove;
	border-width:2px;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	border-bottom-right-radius:7px;
	border-bottom-left-radius:7px;
	overflow-y: visible;
}
/* We apply the background hover color when user hover the mouse over of the li component - WAS #8679e9; */
#menuwrapper ul li:hover{
	background-color:#005500;
	position:relative;
}
/* We apply the link style */
#menuwrapper ul li a{
	padding:4px;
	color:#040;
	display:inline-block;
	text-decoration:none;
}
#menuwrapper ul li:hover a{
	padding:5px;
	color:#FFF;
	display:inline-block;
	text-decoration:none;
	cursor:pointer;
}
/* this adds an arrow to every link
#menuwrapper li > a:after {
		content: ' --->'; 
} 
#menuwrapper li < ul {
		content: ' P>'; 
} 
*/
/* this removes the arrow when the link is the only child */
#menuwrapper > a:only-child:after { content: ''; }   


/**** 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:272px;
	top:-200px;
	display:block;
}
/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{
	width:220px;
	background-color:#E2DCC5;
	padding-left:5px;
	box-shadow: 3px 3px 2px #888;
	border-style:groove;
	border-width:2px;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	border-bottom-right-radius:7px;
	border-bottom-left-radius:7px;
	overflow-y: visible;
}
/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
	background-color:#8669C9;
	color:#FFF;
}
/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
	color:#FFF;
	display:inline-block;
}

/**** THIRD LEVEL MENU ********************************************************************************************************************/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
	position:absolute;
	display:none;
}
/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li ul li:hover ul{
	display:block;
	left:140px;
	top:-48px;
}
/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{
	background-color:#D2FFA5;
	width:220px;
}
/* We change the background color for the level 3 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover ul li:hover{
	background-color:#8679e9;
	color:#FFF;
}
/* We change the level 3 link color */
#menuwrapper ul li ul li ul li a{
	color:#ffffff;
}
/* Clear float */
.clear{
	clear:both;
}