/* =========================================================================================================================================================================== */                                                                                                                                                         
/* menu specific CSS file 
/* =========================================================================================================================================================================== */

/* =========================================================================================================================================================================== */
/* In order for the responsive menu to work we need to keep the following structure: 
/* wihtout it the responsive part will not work.
/*
/* <div class="menuoverflow">
/* 	<div class="menuoverflow">
/* 		menu hier
/* 	</div>
/* </div>
/* 
/* =========================================================================================================================================================================== */

/* menu overflow
============================================================================================================== */
	.menuoverflow { overflow:visible; }
/* ============================================================================================================ */

/* full page menu
============================================================================================================== */
@media screen and (min-width: 960px) {	

	#menuTrigger { display: none; }   
        
    /* top level main menu */
    .menu 				{ width: 100%; margin: 0 auto; text-align: center; padding-top: 20px;}
	.menu a 			{ padding: 0px 10px 10px 10px; font-size: 13pt; text-decoration: none; text-transform: uppercase; color: #999; border: 0px solid #000; }
    .menu ul 			{ margin: 0; opacity: 0; visibility: hidden; position: absolute; top: 30px; z-index: 1; transition: all .2s ease-in-out; }
    .menu li 			{ display: inline-block; position: relative; }
    .menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; }
    .menu li:hover > a 	{ color: #f58220; }
    .menu li a:hover 	{ color: #f58220; }
    
    /* end of top level main menu */
    
    
    /* top level dropdown driven by wordpress sub-menu */    
    .sub-menu 					{ width: 200px; background-color: #222;  text-align: left;}
    
	.sub-menu ul 				{ background-color: #111;}    
    .sub-menu li 				{ display: block; }
	
    .sub-menu a 				{ color: #FFF !important; font-size: 13px; display: block;  padding-top: 10px;}
    .sub-menu a:hover 		{ color: #f58220 !important; background-color: #333; }
    /* end of top level submenu */

	/* current item */
	.current_page_item a, 
	.current_page_parent a, 
	.current-page-ancestor a, 
	.current-post-parent a, 
	.current-post-ancestor a, 
	.current-menu-item a, 
	.current-menu-parent a 			{ color: #FFF !important; }
	/* end of current item */ 		   
}
/* =========================================================================================================== */

/* smaller menu. when width is bigger than 768 px it will kick in 
============================================================================================================== */
@media screen and (max-width: 960px) {
    #menuTrigger 			{ display: block; height: 40px; padding-top: 15px; cursor: pointer; color: #eeeeee; font-weight: bold; text-align: center; }
	
	#menu-mainmenu  	{ display: none; top: 50px; width: 100%; margin: 0; padding: 0; margin-bottom: 20px;}
	#menu-mainmenu li	{ position: static; display: block; border: 0; margin: 5px; text-align: center; }
	
    #menu-mainmenu a				{ display: block; color: #999;  font-size: 13pt; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 7px; border: 1px solid #999; }
    #menu-mainmenu a:hover 	{ color: #777; border: 1px solid #666; background-color: #333; }		
}