ul.vertical, ul.vertical li {
	margin:0;
	padding:0;
	list-style-type:none;
}

ul.vertical {
	z-index:1000;
	cursor:default;
}

ul.vertical li {	
	/* shift list-items to collapse borders vertically */
	margin:-1px 0 0 0;
	padding-top: 1px;
	
	position:relative;
	text-align:left;
	cursor:pointer;
	
	font-size: 16px;
	font-family: Georgia;
	font-weight: bold;
	color: #999999;
	letter-spacing: -1px;
	
	background-image: url(../images/menu_background.gif);
	background-repeat: no-repeat;
	background-color: white;
	padding-left: 22px;
	height: 25px;
}

ul.vertical li:hover {
	cursor:pointer;
	background-image: url(../images/menu_background_mo.gif);
	z-index:2000;
}

ul.vertical ul {
	z-index:1020;
	cursor:default;
	position:absolute;
	
	/* menu offset, which already includes 1px compensation 
	   on TOP, for list-item border collapse */
	margin:0.0em 0 0 200px;
	
	/* position menus off the screen to hide 
	because using display, visibility, overflow or clip,  
	would hide them from browser-based screenreaders as well */
	top:-100em;
	
	/* shift menus to collapse navbar->menu borders */
	left:-1px;
	
	/* compensate for list-item border collapse */
	padding:1px 0 0 0;
}

ul.vertical ul li {
	/* duplicate menu width */
	width:200px;
}

ul.vertical li:hover ul {
	top:0;
	cursor:pointer;
}

ul.vertical a, ul.vertical a:visited {
	display:block;
	width:180px;
	height:20px;
	cursor:pointer;
	color: #999999;
	text-decoration: none;
}