.navigation {

	margin: 0px;
	padding: 0px;
	height: 22px;
	color: #efddb3;
	font-weight: 600;
        }
        .navigation ul {
        /* positioning */
        	position:relative;
            z-index:1000;
        /* remove the dots next to list items: */
            list-style:none; 
        /* get rid of any default or inherited margins and padding: */
            margin:0px auto 0px auto; 
            padding:0;
			float: right;
			display: block;
			width: 100%;
			height: 22px;
        }
        
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
        .navigation > ul > li {
        /* positioning */ 
            position: relative;
			margin-right:0px;
			text-align: left;
			
			height: 22px;
			line-height: 22px;
		}
		.navigation ul li, .navigation ul li ul li {
			list-style-image: none !important;
			height: 22px;
			line-height: 22px;
        }        
		
		.navigation > ul > li:last-child {
        /* positioning */ 
            margin-right: 0px;
			padding-top: 0px;
        }
        .navigation > ul > li > a {
        /* positioning */ 
            display:block;
        /* styling: */
            text-decoration:none;
            color:#efddb3; 
            
			height: 22px;
			line-height: 22px;
        }
        .navigation > ul > li > a:hover, .navigation  ul li li a:hover{
        /* styling: */
            text-decoration:none;
            color:#501310;
        }
		
.navigation ul ul{
            
            width:206px; /* you need a width to accommodate tertiary menus */
            
            position:absolute;
			left: 0px;
			top: 22px;
            z-index:100;
            
            height: 0;
            overflow: hidden;
			
			line-height: normal;
			font-size: 12px;
			
			-webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;
			border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
			border-left: solid 2px #501310; border-right: solid 2px #501310; border-bottom: solid 2px #501310;
        }
        

        /* don't display tertiary box yet */
        .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
            height:0;
            
        }
        /* tertiary drop-down box */
        .navigation ul ul ul{
            left:200px;
            width:200px;
        }
        
        .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
        .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
            height:auto; /* need a height to accommodate any tertiary menus */
        }
        
        /* drop-down item styles */
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */
        
        .navigation ul ul li {
            background-color:#501310;
            width:206px;
			
			height: 22px;
			line-height: 22px;
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
			
        }
        
        .navigation ul ul li:hover {
            
	background: #efddb3;
        }
        
        .navigation ul ul li a {
            display:block;
            text-decoration:none;
            margin:0px 0px 0px px;
            padding: 0px 0px 0px 5px;
            color:#efddb3;
			height: 22px;
			line-height: 22px;
        }
		li.reservation:hover {
			color: #501310;
		}
		
/* unfortunate ie7 gap fix */
        .ie7 .navigation ul ul li{
            margin-bottom:-3px;
        }