@charset "utf-8";
/* CSS Document */
.navigation, .mobile_navigation {
	width:100%;
	text-align:right;
	padding-right:0%;
	font-size:95%;
}
.navigation ul, .mobile_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:0; 
	padding:0; 
	float:right;
	text-align:left;
	
/* styling: */
}
        
/* we're using the direct descendant selectors > to ONLY affect the main menu items */
.navigation > ul > li {
/* positioning */ 
	position: relative;
	float: left;
/* styling: */
	margin: 0;

	padding:0 5px;
}
.mobile_navigation > ul > li {
/* positioning */ 
	position: relative;
	float: left;
/* styling: */
	margin: 0;

	padding:0 1px;
}
.navigation > ul > li > a {
/* positioning */ 
	display:block;
/* styling: */
	background-color:transparent;
	margin: 0.4% 0%;
	text-decoration:none;
	color:#808080;
	padding:4px 6px;
	font-weight:normal;
}
.mobile_navigation > ul > li > a {
/* positioning */ 
	display:block;
/* styling: */
	background-color:#666;
	margin: 0% 0%;
	text-decoration:none;
	color:#fff;
	padding:4px 1px;
	font-weight:normal;
}
.navigation > ul > li > a:hover{
/* styling: */
	background-color:#aaa;
	color:#fff;
}
.mobile_navigation > ul > li > a:hover{
/* styling: */
	background-color:silver;
	color:#333;
}
.navigation ul ul, .mobile_navigation ul ul {
	position:absolute;
	z-index:100;
	height: 0;
	background-color:transparent;
	overflow: hidden;
	margin-top:0px;
	margin-left:-5px;
	-webkit-transition: height 0.5s ease-in;
	-moz-transition: height 0.5s ease-in;
	-o-transition: height 0.5s ease-in;
	-ms-transition: height 0.5s ease-in;
	transition: height 0.5s ease-in;
}
.navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul {
	height:150px; /* need a height to accommodate any tertiary menus */
	background-color: transparent;
}
        
        /* 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:#e0e0e0; /* grey */
	width:150px;
	margin:0 2px 0 5px;
	padding:0 5px;
	border-left:2px solid #a0a0a0;
	border-right:1px solid #a0a0a0;
	box-shadow:3px 3px 3px #333;
	-webkit-transition: background-color 0.5s ease;
	-moz-transition: background-color 0.5s ease;
	-o-transition: background-color 0.5s ease;
	-ms-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;

}
        
.navigation ul ul li:hover {
	background-color:#aaa; /* grey */
}
        
.navigation ul ul li a {
	display:block;
	text-decoration:none;
	margin:0 5px;
	padding:3px 0;
	color:#808080;
	font-weight:normal;
}
.navigation ul ul li a:hover, .navigation ul ul li:hover > a {
	color:#ffffff; /* white */
}
.navigation ul ul ul li a{
            border:0 !important;
        }
        .navigation ul ul ul li + li a{
            border-top:1px dashed #a0a0a0 !important;
        }
        .navigation ul ul li + li a{
            border-top:1px dashed #a0a0a0;
        }
        .navigation ul ul li:hover + li a{
            border-top:1px solid #e0e0e0;
        }
        .navigation ul ul ul li:hover + li a{
            border: 0 !important;
        }
        .navigation ul ul ul li:hover + li{
            border-top:1px solid #e0e0e0 !important;
        }
		.navigation ul li + li {
			border-left:2px solid #a0a0a0;
		}