/**
* Menu
*/
#menu{
    height: 20px;
    width: 900px;
    margin: 10px;
}

#menu ul{
    padding:0; 
    margin: 0;
    list-style: none;
    position: relative; 
}

/* 
	LEVEL ONE
*/
#menu ul.menu li{
    font-size: 12px;
    font-weight: bold;
    display: inline;
    padding: 0 10px;
    border-right: 3px red solid;
    display: block;
    text-align: center;
    letter-spacing: 0.1em;
    float: left;
}

#menu ul.menu li:last-child{
    border-right: none;
}

#menu ul.menu li.top_li{
    padding: 5px 5px;
}

#menu ul.menu li ul.sub_menu li{
    padding: 5px 15px;
    border-right: none;
}

#menu ul.menu li a{
    color: #000;
}

#menu ul.menu li a:hover{
    color: #a50000;
}

/* Doesn't work in IE */
#menu ul.menu li.hover,
#menu ul.menu li:hover,
#menu ul.menu li.active,                
#menu ul.menu li:active
{  
    color: #a50000;
    position: relative; 
    background: url("../images/menuhoverimg.png") no-repeat scroll 0 0 #FFFFFF;   
}

/* 
	LEVEL TWO
*/
#menu ul.menu ul{
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0;
}

#menu ul.menu ul li{ 
    font-weight: normal;
    color: #000;     
    /*background: url("../images/menuhoverimg.png") no-repeat scroll 0 0 #FFFFFF;*/ 
    background: #FFFFFF;             
    width: 110px;     
    font-size: 11px;
}
								  
/* IE 6 & 7 Needs Inline Block */
#menu ul.menu ul li a{ 
    border-right: none; 
    width: 100%; 
    display: inline-block;
} 

/* 
	LEVEL THREE
*/
#menu ul.menu ul ul{ 
    left: 100%; 
    top: 0;
}

#menu ul.menu li:hover > ul{ 
    visibility: visible;
}

/*LEVEL 2 & ABOVE*/
#menu ul.menu ul li.hover,
#menu ul.menu ul li:hover,
#menu ul.menu ul li.active,                
#menu ul.menu ul li:active
{  
    background: #e7f3e5;   
}