@charset "utf-8";
/* CSS Document */

#lava {
	/* you must set it to relative, so that you can use absolute position for children elements */
	position: absolute; 
	background: url(../assets/bar.gif) no-repeat center bottom; 
	text-align: center; 
	width: 400px; 
	height: 40px;
	left: 520px;
	font: normal .75em/1.1em Arial, sans-serif;
	z-index: 1;
}
#lava a, #lavamenu a:visited, #lavamenu a:hover {
	color: #fff;
	text-decoration: none;
}
#lava ul {
	display: inline;
	/* position absolute so that z-index can be defined */
	position: absolute;
	/* center the menu, depend on the width of you menu*/
	top: 12px;
	left: 22px;
	/* should be higher than #box */
	z-index: 100;
	width: 370px;
}
#lava ul li {
	/* give some spaces between the list items */
	margin: 0 10px; 
	/* 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: 8px; 
	/* should be lower than the list menu */
	z-index: 50; 
	/* image of the right rounded corner */
	background: url(../assets/tail.gif) no-repeat right center; 
	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: url(../assets/head.gif) no-repeat 0 0; 
	height: 20px;
	/* self-adjust left padding to make sure the box display in the center of the item */
	padding-left: 10px;
}