div#navigation{
    background: #727240; /* Old browsers */
    border-radius: 4px;
}
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
#navigation ul li{ float:left; position:relative; }
#navigation ul li a{
	width:58px;
    display:block;
    padding:5px 3px;
    margin:4px;
    font-size:15px;
	font-weight:bold;
	color:#FFFFFF;
	background:#888856; 
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
    white-space:nowrap;
    border-radius:3px;
}
#navigation ul li a:hover{ background:#A0A060;}
#navigation ul ul{
    position:absolute;
    top:-99999px;
    left:0;
    opacity: 0; /* Hide sub level */
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    z-index:497;
    background:#727240;
    padding: 2px;
    border:1px solid #444;
    border-top:none;
    box-shadow:#111 0 3px 4px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}
#navigation ul ul ul {
    position:absolute;
    top:-99999px;
    left:100%;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #444;
}
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#727240; }

/* Larger than 640px */
@media (min-width: 640px) {
	#navigation ul li a{ width:95px;  }
}