/* CSS styles for drop-down menu in menubar.php */
/*  with audio player appended at the right     */

#menushell {
/* change to first width when audiobar is put in place */
	width: 472x;
/*	width: 100%; */
	height: 2.45em; 
/*	margin-bottom: .6em;
	margin-left: -1em; */
	margin: 0 5px .6em 1em;
	float: left; 
	box-shadow: 2px 2px 5px black;
}

#menuwrapper {
	width: 100%;
	font-size: .7em;
}

#menulogo {
	border-left: 1px solid white;
	height: 1.3em; 
}

#menulogo img {
	float: left;
	height: 3.15em;
	margin-top: 0;
}

#menuwrapper img {
	margin: -8px 0 0 -15px ;
}

/* remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
	height: 2.8em;
	margin: 0 -1px 0 -4px;
	padding: 0 0 4px 0;
	list-style:none;
}

/* float the li list to the left and apply background color and border right white */
#menuwrapper ul li{
	float:left;
	background-color: lightsteelblue;
	cursor:pointer;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	border-top: 1px solid white;
}

#menuwrapper li.menhead {
	font-weight: bold;
	text-decoration: underline;
}

/* apply the link style */
#menuwrapper ul li a{
	padding: 8px 15px;
	color: black;
	font-weight: bold;
	display:inline-block;
	text-decoration:none;
}

/* 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{
	color: orange;
	background-color: steelblue;
	position:relative;
}


/**** SECOND LEVEL MENU ****/
/* 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, show the ul list by applying display:block, note: 25px is the menu height.  */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul,
#menuwrapper ul li.iehover ul{
	left: .81em;
	top:30px;
	display:block;
}

/* As the parent li has float:left property, overwrite for the submenu (level 2) to float none (normal position)  */
#menuwrapper ul li ul li{
	float:none;
	width:175px;
	background-color: lightsteelblue;
	border: none;
	border-bottom: 1px solid gray;
	border-top: 1px solid lightgray;
}

/* 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: steelblue;
}

/* style the color of level 2 links */
#menuwrapper ul li ul li a{
	color: black;
	display:inline-block;
	width:140px;
}

/**** THIRD LEVEL MENU ****/
/* hide the 3rd menu, when hovering the first level menu */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul li ul,
#menuwrapper ul li.iehover ul li ul{
	position:absolute;
	display:none;
}

/* show the third level menu only when they hover the second level menu parent */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul li:hover ul,
#menuwrapper ul li.iehover ul li.iehover ul{
	display:block;
	left:182px;
	top:0;
}

/* change the background color for the level 3 submenu*/
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul li:hover ul li,
#menuwrapper ul li.iehover ul li.iehover ul li{
/*	background-color:#86d3fa; */
	background-color: lightsteelblue
}

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

/* change the level 3 link color */
/* for IE < 9 use class .iehover */
#menuwrapper ul li:hover ul li:hover ul li a,
#menuwrapper ul li.iehover ul li.iehover ul li a{
	color: black;
}