#lava .a {
		text-decoration:none; 
		color:#333;
	}
	
	#lava {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative; 
		/*background: url(menu_images/menu_left.png) no-repeat left; */
		text-align:center; 
		width:990px; /*  should be equal to widths: #lava .menu_table #lava_container*/
		height:77px;
	}
	
	#lava ul {
		/* remove the list style and spaces*/
		margin:0; 
		padding:0; 
		list-style:none; 
		display:inline;
		/*background: url(menu_images/menu_center.png) repeat-x center bottom;*/ 		
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		left:30px; 
		top:0; 
		
		/* should be higher than #box */
		z-index:100;

	}
	
	#lava ul.menu{
		padding-right: 24px;
		height:77px;
		}
	#lava .menu a{
	/* font */
		
   font: normal 18px 'Trebucher MS', Helvetica, Arial, sans-serif;
   font-weight: bold;
   background: none;
	color: #f6f6f6;
	text-shadow: black 1px 1px 5px;	
	}
		
	
	
	.menu_table {
		text-align:center; 
		width:990px; /*  should be equal to widths: #lava .menu_table #lava_container*/
		height:77px;
		border-collapse: collapse;
	}
	.menu_left{
		background: url(images/top_menu/menu_left.png) no-repeat left 0;
		height:77px;
		margin-left: 85px;
		width: 24px;
		padding: 0 0 0 0;
	}
	
	.menu_center{
		background: url(images/top_menu/menu_center.png) repeat-x;
		height:77px;
		
		display: table-cell;
	}
	
	.menu_right{
		background: url(images/top_menu/menu_right.png) no-repeat;
		height:77px;
		margin-left: 80px;
		width: 24px;
		padding: 0 0 0 0;
	}
	
	#lava ul li {
		
		/* give some spaces between the list items */
		margin: 23px 15px 0px 15px; 
		
		/* 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:23px; 
		
		/* should be lower than the list menu */
		z-index:50; 

		/* image of the right rounded corner */
		background:url(images/top_menu/tail.png) no-repeat right 0; 
		height:29px;
		
		/* add padding 20px so that the tail would appear */
		padding-right:20px;
		
		/* self-adjust negative margin to make sure the box display in the center of the item */
		margin-left:-14px;
	}
	
	#lava #box #lava_head {
		/* image of the left rounded corner */
		background:url(images/top_menu/head.png) no-repeat 0 0; 
		height:29px;

		/* self-adjust left padding to make sure the box display in the center of the item */
		padding-left:10px;
	}
	
	
	#lava_container {
		text-align:left;
		width:990px; /*  should be equal to widths: #lava .menu_table #lava_container*/
		margin-left: auto;
		margin-right: auto;
			
	}