#menu *  /* applies to all elements in the menu div  */
{
	margin:0;
	padding:0;
	border:0;
}
#menu
{
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.9em;
	width:43em;
	float:right;
	behavior:url(csshover.htc); /* link to the hover.htc file for menu to work in IE6 and earlier */
}
/* pseudo-class link states */
#menu a:link
{
	color:#000;
}
#menu a:visited
{
	color:#000;
}
#menu a:hover
{
	color:#00a;
	background-color:#eff;
}
#menu a:active
{
	color:#060;
}
/* end pseudo-class link states */
/* formating of list and link elements */
#menu li {
	list-style-type:none; /* removes bullet points from list*/
	position:relative;
	width:6.7em;
	margin:0 1px;
	float:left;
	text-align:center;
	color:#333;
	background-color:#eff;
}
#menu a {
	text-decoration:none;
	display:block; /* converting the link into a block element so that its attributes affect the containing list element */
	padding:0 6px;
	border:solid;
	border-width:3px;
	border-color:#ccc #888 #555 #bbb;	
}
/* width and text alignment for drop-down and pop-out menu */
#menu li ul li /* covers drop down and pop-out */
{ 
	text-align:left;
	margin:0;
}
#menu .width1 li
{
	width:10em;
}
#menu .width2 li
{
	width:12em;
}
#menu .width3 li
{
	width:13em;
}
#menu .width4 li
{
	width:7.8em;
}
/* end width and text alignment for drop-down and pop-out menu */
/* drop down part */
#menu li ul /* covers drop down and pop-out */
{ 
	position: absolute;
	display:none;
}
/* pop-outs starts here */
#menu ul li ul li ul
{
	position:absolute;		/* associated menu with parent li positioning context */
	visibility:hidden;		/* ensures that level 3 menu is not revealed when level 2 is revealed */
	left:99%;
	top:0px;				/* aligns level 3 with previous level */
}
#menu li:hover ul {
	display:block;
}
#menu ul li ul li:hover ul
{
	visibility:visible;		/* shows level 3 menu when associated level 2 li is hovered */
}