@charset "utf-8";
.menuhigh {
    color:#ffffff;
}
.menudim {
    color:#666666;
}
.selected a{
    color:#ffffff;
}
.lavalamp li a {
	/* so that the mouse isnt required to touch the bottom of the text */
	display: block;
	height: 25px;
	padding: 0px 10px; /* padding so that the mouse isnt required to touch the sides of the text */
}
#menucontainer {
	z-index:49;
	float:right;
	position:fixed;
	right:0px;
	top:0px; /*Added when trying to center*/
	padding-right:20px;
}
#menu {
	position:relative; /* you must set it to relative, so that you can use absolute position for children elements */
	text-align:center; 
	width:450px;
	height:37px;
	/*Lowercase
	font-size: 1.5em; */
	/*Uppercase*/
	font-size: 1.2em; 
	letter-spacing:1px; 
}
#menu ul {
	/* remove the list style and spaces*/
	margin:0; 
	padding:0; 
	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*/
	padding-top:10px;
	left:10px;
	top:0; 
	
	/* should be higher than #box */
	z-index:100;
}
#menu ul li {
	/* give some spaces between the list items */
	margin:0 5px; 
	/* display the list item in single row */
	float:left;
}
#menu #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:url(../images/tail.png) no-repeat right center; 
	height:37px;
	/* add padding 8px so that the tail would appear */
	padding-right:9px;
	/* self-adjust negative margin to make sure the box display in the center of the item */
	margin-left:-10px;
}
#menu #box .head {
	/* image of the left rounded corner */
	background:url(../images/head.png) no-repeat 0 0; 
	height:37px;
	/* self-adjust left padding to make sure the box display in the center of the item */
	padding-left:10px;
}