/* CSS Document */



	body {
		font-family: Arial, Helvetica, sans-serif; 
		font-size:12px;
		font-weight:bold; 
	}
	a {
		text-decoration:none; 
		color:#333;
	}
	a:hover {
		text-decoration:none; 
		color:#A0271F;
	}
	
	
	#lava {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative; 
		text-align:center; 
		width:380px; 
		height:40px;
		
		
	}
	
	#lava ul {
	/* remove the list style and spaces*/
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
	width:380px;
	/* position absolute so that z-index can be defined */
	position:absolute;
	/* center the menu, depend on the width of you menu*/
	left:-5px;
	top:16px;
	/* should be higher than #box */
	z-index:100;
	height: 26px;

	}
	
	#lava ul li {
		
		/* give some spaces between the list items */
		margin:0 10px; 
		
		/* display the list item in single row */
		float:right;
	}
	
	#lava #box {
		
		/* position absolute so that z-index can be defined and able to move this item using javascript */
		position:absolute; 
		left:4px; 
		top:14px; 
		
		/* should be lower than the list menu */
		z-index:50; 

		/* image of the right rounded corner */
		background:#dbc379; 
		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;
	}
	
	#lava #box .head {
		/* image of the left rounded corner */
		background:#f4e0a2;
		height:20px;

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