/*##########################################################################################################

Welcome to Responsive QuickMenu!  The bulk of your menu is fully customizable by adding and editing the
styles outlined below.  Use a plain text editor to customize this file!

There are addtiional customizable features that are applied directly to the HTML for the menu, view and
edit the menu.html files source for more help and options.

-- Definitions of Terms Used --

     Drop Down Style:  This is the standard drop down style menu, which by default displays on large devices. 
     Fill Style:  The fill style menu fits the screen as a pop-up, similar to an iOS or Android system drill down menu.
     Pure CSS: The menu when the user has JavaScript disabled in the browser.
	 Parent Item: Items that have a child menu (sub menu).
	 Active Item: An item is active only when its child menu (sub menu) is visible.
	  
############################################################################################################ */


/* ######## Menu Styles ######## */
		
	/* -- GLOBAL STYLES -- */
	
		/*All Menus*/
		.qm {color:#333;}
		/*All Menu Links*/
		.qm a, .qm a:visited {color:#333;text-decoration:none;}
        .qm a:hover, .qm a:active {color:#2395d2;text-decoration:none;}
		/* All Menu Containers */
		.qm_sub, .qm_main {}
		/* All Menu Items */
		.qm_main>li>*:first-child, .qm_sub>li>*:first-child {background-repeat:no-repeat;}
		
	
	/* -- DROP DOWN MENU STYLES -- */
		
		/* Main Items */
		.qm_drop .qm_main>li>*:first-child {padding:0 17px 0 17px;text-transform:uppercase;}
		/* Main Parent Items */
		.qm_drop .qm_main>.qm_parent>*:first-child {background-image:url(../images/menu/arrow_down.png);background-position:right 16px;}
		/* Main Items Hover */
		.qm_drop .qm_main>li:hover>*:first-child {text-decoration:none;}
		/* Main Items Active */
		.qm_drop .qm_main>.qm_item.qm_active>*:first-child {text-decoration:none;background-position:right 21px;}
		
		/* Sub Containers */
		.qm_drop .qm_sub {padding:10px;border:solid 1px #333;background-color:#eee;border-radius:4px;}
		/* Sub Items */
		.qm_drop .qm_sub>li>*:first-child {margin:0px;padding:5px 40px 5px 10px;background-color:transparent;color:#333;border-radius:4px;}
		/* Sub Parent Items */
		.qm_drop .qm_sub>.qm_parent>*:first-child {background-image:url(../images/menu/arrow_right.png);background-position:92% center;}
		/* Sub Items Hover */
		.qm_drop .qm_sub>li:hover>*:first-child {background-color:#ddd;}
		/* Sub Items Active */
		.qm_drop .qm_sub .qm_item.qm_active>*:first-child {background-color:#cacaca;}
		
		/* Sub Animation */
		.qm_pure li:hover>.qm_sub, .qm_drop .qm_item.qm_active>.qm_sub {opacity:1;}
		.qm_drop .qm_sub {opacity:0;
			-webkit-transition: .5s ease-out;
			-moz-transition: .5s ease-out;
			-o-transition: .5s ease-out;
			transition: .5s ease-out;
		}
	
	
	/* -- FILL MENU STYLES -- */

		/* All Containers */
		.qm_fill .qm_menu {background-color:#bbb;}
		/* All Items */
		.qm_fill .qm_item>*:first-child {padding:8px 10px 8px 10px;border:solid 0px #333;border-bottom-width:1px;color:#444;}
		/* All Parent Items */
		.qm_fill .qm_parent>*:first-child {background-image:url(../images/menu/arrow_fill.png);background-size:contain;background-position:95% center;}
	
		
	/* -- PARENT ITEM ARROWS FOR PURE CSS MENUS */
	
		/* Main Parent Items */
		.qm_pure .qm_main>li>*:first-child {background-image:url(../images/menu/arrow_down.png);}
		.qm_pure .qm_main>li>*:only-child {background-image:none;}
		/* Sub Parent Items */
		.qm_pure .qm_sub>li>*:first-child {background-image:url(../images/menu/arrow_right.png);}
		.qm_pure .qm_sub>li>*:only-child {background-image:none;}
		


/* ######## Fill Window Styles (by default the fill style menu response is shown on smaller mobile devices) ######## */

	/* All Button Elements */
	.qm .qm_button {cursor:pointer;}

	/* Mobile Site Menu Button */
	.qm_fill .qm_button_open {padding:10px 20px 10px 20px;text-align:center;}
		/* hover effect */
		.qm_button_open:hover {text-decoration:underline;}

	/* Blockout Background */
	.qm_fill .qm_blockout {background-color:rgba(0,0,0,.7);}
	
	/* The Window */
	.qm_fill .qm_window {width:90%;height:90%;top:5%;left:5%;border:solid 2px #333;background-color:rgba(255,255,255,.8);}
		/* Top Bar */
		.qm_fill .qm_topbar {background-color:#333;color:#eee;}
			/* title */
			.qm_fill .qm_title {width:70%;height:60%;}
			/* menu icon */
			.qm_fill .qm_icon {width:15%;height:90%;}
			.qm_fill .qm_icon>div {background-image:url(../images/menu/menu_icon.png);}
			/* back button */
			.qm_fill .qm_button_back {width:15%;height:90%;}
			.qm_fill .qm_button_back>div {background-image:url(../images/menu/back.png);}
			/* close button */
			.qm_fill .qm_button_close {width:15%;height:90%;}
			.qm_fill .qm_button_close>div {background-image:url(../images/menu/close.png);}
			
	/* Slide animation timing */
	.qm_fill .qm_doc { 
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}
	
	
	
/* ######## Specific Menu Styles ######## */

	/* !!!!!! Target specific menus with a custom ID, add your custom ID to the menus NAV tag... id="my_id" !!!!!! */
	/* !!!!!! Add any desired css rules below, to target your menu add #my_id to the beginning of the css rule as shown below. !!!!!! */
	
	/* Drop Down - All Items */
	#my_id.qm_drop .qm_item>*:first-child {}
	/* Fill Style- All Items */
	#my_id.qm_fill .qm_item>*:first-child {}
	
	

/* ######## Optionally Set Main Menu Orientation Vertical ######## */

	/* !!!!!! Specify the menu to make vertical with a custom ID, add your custom ID to the menus NAV tag... id="my_id" !!!!!! */
	/* !!!!!! Remove or comment this section out for a default horizontal main menu. !!!!!! */
   	
	/* Vertically Stack Main Items */
	#my_id.qm_drop .qm_main>li {float:none;} 
	#my_id.qm_drop .qm_main>li>.qm_sub {left:100%;top:0px;}
	/* Menu Width */
	#my_id.qm_drop .qm_main {width:180px;}