a:link {
	text-decoration: none;
	color: #000;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
	color: #000;
}
#lava {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative; 
		text-align:center; 
		width:500px; 
		height:40px;
		float: right;
		/* font: 17px Georgia, "Times New Roman", Times, serif; */
		font: 17px  "Times New Roman", Times, Arial, serif;
		/* font: 18px/27px 'Theano Old Style Regular', Arial, sans-serif; */
	text-decoration: none;
}
	
	#lava ul {
		/* remove the list style and spaces*/
		/* margin:0; */
		margin-top: 25px;
		padding:0; 
		list-style:none; 
		display:inline;
		color:#000;
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		left:100px; 
		top: 10px; 
		
		/* should be higher than #box */
		z-index:100;
	
}
	
	#lava ul li { 
		
		/* display the list item in single row */
		float:left;
	margin: 0 5px 0 15px;
}
	
	#lava #box {
		
		/* position absolute so that z-index can be defined and able to move this item using javascript */
		position:absolute; 
		left:0; 
		top:0; 
		
		/* should be lower than the list menu */
		z-index:50; 

		/* image of the right rounded corner */
		background: #cc3333; 
		height:20px;
		
		/* add padding 8px so that the tail would appear */
		padding-right:8px;
		
		/* self-adjust negative margin to make sure the box display in the center of the item */
		margin-left:-10px;
		margin-top: 36px;
}
	
	#lava #box .head {
		/* image of the left rounded corner */
		background: #ff9999 url(images/nav/stripe.jpg);
		height:20px;

		/* self-adjust left padding to make sure the box display in the center of the item */
		padding-left:10px;
	}