a.navi {
		text-decoration:none; 
		color:#FFFFFF;
		font-family: Geneva, Arial, Helvetica, sans-serif;
		font-weight: 800;
	}
	a.navi :active{
	color:#ffffff;	
	}
	a.navi :hover{
	color:#ffffff;	
	}
	
	#lava {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:absolute; 
		text-align:center; 
		width:100%; 
		height:30px;
		padding-top:30px;

	}
	
	#lava ul {
		/* remove the list style and spaces*/
		margin:0; 
		padding:40; 
		list-style:none; 
		display:inline;
				
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		left:0px; 
		top:0px; 
		
		/* should be higher than #box */
		z-index:1;

	}
	
	#lava ul li {
		
		/* give some spaces between the list items */
		margin:0 11px; 
		
		/* display the list item in single row */
		float:left;
	}
	
	#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:0; 

		/* image of the right rounded corner */
		background-image: url(Layout/Lava-Ende.png);
		background-position:right;
		background-repeat:no-repeat;
		height:36px;
		
		/* add padding 8px so that the tail would appear */
		padding-right:18px;
		
		/* 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-image:url(Layout/Lava-Anfang.png);
		background-repeat:no-repeat;
		
		height:36px;

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

	}