/*====== css driven pop out menu =====*/

img, ul, li { 
	margin:0; 
	padding:0; 
	border:0; 
} 
#buttons {
	width:165px;
	float:left;
	margin-right:0px;
	z-index:100;
}

 /*========================= image menu bar =========================*/
.menu {
	position:relative; 
	float:left;   
	margin-top:10px;
	background-color:#FFFFFF;
	height:340px;                                  /* the menu's overall height */
	font-family: "Arial";
	font-size:12px;         										/* this sets the menu's font size */
}
.menu ul {
	list-style-type:none;          /* we don't want to view the list as a list */
	line-height:30px;          
}                               
.menu li {
	float:left;     /* this creates the side-by-side array of top-level buttons */
	position:relative;    /* create local positioning contexts for each button */
}
.drop span {        /* this simultaneously left and right aligns the text and */
	float:left;        /* the >> in the pop-out menus which link to sub-menus */
	margin-left:10px;
}

/*======================== TOP LEVEL MENU DEFINITIONS ========================*/
.menu ul li ul {
	display:none;                  /* initially hide the entire list hierarchy */
}
.menu ul li a,
.menu ul li a:visited {                    /* unselected top-level menu items */
	height:25px;
	display:block;
	float:left;  
	text-decoration:none;
	margin-top:5px;
}
.menu ul li:hover a,
.menu ul li a:hover {                        /* selected top-level menu items */
	height:25px;
	border:0px;
	background-color:#FFFFFF; 
	border:1px solid black;
}

/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
.menu ul li:hover ul,
.menu ul li a:hover ul {                           /* 2nd level pop-out box */
	display:block;
	position:absolute;
	top:0px;              /* place us just up underneath the top-level images */
	left:12.9em;       		/* left-align our pop-out to the previous button border */
	z-index:300;
	width:140px;     
}
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {                   /* 2nd level unselected items */
	left:0px;
	border:0;
	margin:0;
	padding:0 0 5px 0; 
	height:18px;
	color:#55035a;               /* this sets the unselected pop out text color */
	background:#bda3bf;   	     /* dark purple - pop out menu background color */
}
.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {                /* 2nd level selected item */
	color:#552858;
	background:#ebdeec;						/* light purple - pop out menu background color on hover*/
}
.menu ul li:hover ul.skinny li a,
.menu ul li a:hover ul.skinny li a,
.menu ul li:hover ul.skinny li a:hover,
.menu ul li a:hover ul.skinny li a:hover {     /* 2nd level unselected items */
	width:140px; 
}

/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
	visibility:hidden;
}    
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {             /* 3rd level pop-out box */
	visibility:visible;
	position:absolute;
	top:0;
	left:10.5em;          /*position of right flyout from main drop down menu*/
	width:140px;
}
.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
	width:140px;
	background:#ebdeec;	
}
.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
	width:140px;
	background:#bda3bf;
	color:#FFFFFF;
}