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

.navigation {
    position:absolute;
    z-index:1000;
    width:500px;
    /* [disabled]text-align:center; */
    background-color: #7D7171;
    left: 0px;
    bottom: 0px;
}
.navigation ul {
    display:inline-block;
    white-space: nowrap;
    /* positioning */
    position:relative;
    /* get rid of any default or inherited margins and padding: */
    margin:0;
    padding:0;
    /* styling: */
    font:bold 9.5px Verdana, Geneva, sans-serif;
    list-style-image: none;
    list-style-type: none;
}
/* we're using the direct descendant selectors > to ONLY affect the main menu items */
 .navigation > ul > li {
	/* positioning */
    position: relative;
	float: left;
	border-right-width: 0.5px;
	border-right-style: dashed;
	border-right-color: #8a7f7f;    /* styling: */
}
.navigation > ul > li > a {
    /* positioning */
    display:block;
    /* styling: */
    background: #7D7171;
    text-decoration:none;
    color:#e5e3e3;
    
    padding-right: 11px;
    padding-left: 11px;
    height: 32px;
    line-height:32px;
}
.navigation > ul > li > a:hover {
    /* styling: */
    background:#3c2929;
    color:#ffffff;
}
.navigation ul ul {
	position:absolute;
	z-index:100;
	height: 0;
	overflow: hidden;
	-webkit-border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
	-webkit-transition: height 0.4s ease-in;
	-moz-transition: height 0.4s ease-in;
	-o-transition: height 0.4s ease-in;
	-ms-transition: height 0.4s ease-in;
	transition: height 0.4s ease-in;
	top: 28px;
}
.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:280px;
    /* 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:#3c2929;
    width:auto;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    -ms-transition: background-color 0.4s ease;
    transition: background-color 0.4s ease;
}

.navigation ul ul li:last-child {
    -webkit-border-radius: 0 0px 6px 6px;
    -moz-border-radius: 0 0px 6px 6px;
    border-radius: 0 0px 6px 6px;
}
.navigation ul li:last-child {
	border-right-width: 0px;
	border-right-style: none;
}
	
.navigation ul ul li:hover {
    background-color:#504040;
    /* grey */
}
.navigation ul ul li a {
    display:block;
    text-decoration:none;
    margin:0 11px;
    padding:10px 0;
    color:#beb8b8;
}
.navigation ul ul li a:hover, .navigation ul ul li:hover > a {
    color:#ffffff;
    /* white */
}
.navigation ul ul li:hover:last-child >a {
    -webkit-border-radius: 0 0px 6px 6px;
    -moz-border-radius: 0 0px 6px 6px;
    border-radius: 0 0px 6px 6px;
}
.navigation ul ul li:hover:first-child >a {
    -webkit-border-radius: 0 6px 0px 0px;
    -moz-border-radius: 0 6px 0px 0px;
    border-radius: 0 6px 0px 0px;
}