@charset "utf-8";

	/*hide the sub menus by targeting any UL’s within a UL with the display:none;*/
	nav ul ul { display: none; }
	
	/*to make these menus reappear they need to be converted back to block elements on hover of the LI.
	The > child selector makes sure only the child UL of the LI being hovered is targeted, 
	rather than all sub menus appearing at once.*/
	nav ul li:hover > ul { display: block; }
	
	
	nav ul {
		/*background: #bdc3c7;
		background: linear-gradient(top, #efefef 0%, #f3e135 100%);  
		background: -moz-linear-gradient(top, #efefef 0%, #f3e135 100%); 
		background: -webkit-linear-gradient(top, #efefef 0%, #f3e135 100%); 
		/*box-shadow: 0px 0px 9px rgba(0,0,0,0.15);*/
		background:#FFF;
		padding: 0 0px;
		border-radius: 0px; 
		list-style: none;
		position: relative;
		display: block; z-index:100; float:right;
		margin-top:-10px;  margin-right:0px; 
		font:12px Arial, Verdana, Helvetica, sans-serif;
		font-weight:bold;
	}
	
	
	nav ul:after { content: ""; clear: both; display: block; }
	
	/*We can then start to style up the main navigation menu with the help of CSS3 properties such 
	  as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely 
	  position the sub menus according to this main nav bar, then display:inline-table will condense the 
	  width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list 
	  items without the use of overflow:hidden, which would hide the sub menus and prevent them from
	  appearing.*/
	  
	  
	nav ul li { float: left; }
	
	
	nav ul li:hover {
		background:#F00;
		/*background: #bdc3c7; 
		background: linear-gradient(top, #efefef 0%, #DD0 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #DD0 100%);
		background: -webkit-linear-gradient(top, #efefef 0%, #FF0 100%); 
		/*box-shadow: 0px 0px 9px rgba(0,0,0,0.15)*/;
	}
	nav ul li:hover a { background: #77856c; color:#FFF; }	
	nav ul li a {
		display: block; padding: 8px 12px; color:#000;
		 text-decoration: none;		 
	}	
	.small	{ 	font-size:10px; padding-bottom:5px; }	
	
	.bar	{ 	margin-top:7px; color: #768078; font-weight:bold; }
			
	.selected { 
		background-color: #c3cabd; display: block; padding: 8px 12px;
		color: #cc3300; text-decoration: none; }
			
	.selected:hover { background-color: #c3cabd; }
	
	.dropdwn { 
		margin-top:15px; margin-left:-1px; display:block; position:absolute;
	}	
		
	.contxt:hover { 
		cursor:context-menu; text-decoration:none; /*color:#000 !important;*/
	}
	
	/*The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. 
	  In the browser this will make the link change to a blue gradient background and white text. 
	  hover-#5f6975  active-#5f6975;*/
	
	nav ul ul { 
		background: #FF9; border-radius: 0px; padding: 0;
		position: absolute; top: 40px; width:245px; font-size:12px;
	}
	
	nav ul ul li {
		float: none; 
		border-top: 1px solid #FFF;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
	nav ul ul li a { /*padding: 7px 20px;*/ background: #d8d8c7 !important; color: #0B1515 !important; font-weight:normal !important; }	
	nav ul ul li a:hover {  color: #cc3300 !important; }
	
	/*The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the
	  sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) 
	  of the relative position of the parent <li>.*/
			
	nav ul ul ul { position: absolute; left: 90%; top:20%; }