/* index */

.index	/* the main box */
	{
	position: relative;
	text-align: right; 
	font-size:1em;
	font-weight: bold;
	width: 30em;
	margin-top:1.2em;
	font-family: verdana, arial, sans-serif; 
	z-index: 101;
	}
		
.index ul /* remove the bullets and set margin and padding = 0  */
	{
	padding: 0; 	
	margin: 0;	
	list-style-type: none;	
	border: 0;	
	}

.index ul li
	{
	float: left;
	}

.index ul li a, .index ul li a:visited			/* main index at rest */
	{
	display:block; 
	text-align:center; 
	text-decoration:none; 	
	width: 5em; 	
	height: 2em; 		
	color: #0069aa;		
	background-color: #eeeeee; /* <--- requires # or it will not work for IE */	 
	line-height: 2; 
	}

.index ul li:hover a						/* main index on hover */
	{
	color: #0069aa;
	background: transparent;
	}

.index ul li ul 		/* make the dropdown invisible */
	{	
	display: none;	
	}

.index ul li:hover ul	/* make visible and position it beneath the index */
	{
	font-size: 1em;	
	text-align: left;
	display: block; 
	position: absolute; 
	top: 2em;
	left:-40em; 
	z-index:101;
	}
	
.index ul li:hover ul li 		/* make sub index full width. Add border and auto scroll bar */
	{
	font-size: 1em;	
	background:#fff;
	color: #000;	
	width: 45em;
	height:20em;
	padding-left:1em;
	overflow:auto;	
	border: 1px solid black;
	border-bottom: 2px solid black;
	}

.index ul li:hover ul li a	/* sub-index links at rest */
	{	
	display:inline;	
	background:#eee;
	color: #0000ff;	/* blue */
	text-decoration:none; 
	border:0;	
	}

.index ul li:hover ul li a:hover		/* sub-index links on hover */
	{	
	text-decoration: underline;	
	color:#000;	
	}