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

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 --

     Standard 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 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*/
		#device_preview_menu.qm {color:#eee;}
		/* All Menu Containers */
		.qm_sub, .qm_main {}
		/* All Menu Items */
		#device_preview_menu .qm_main>li>*:first-child, #device_preview_menu .qm_sub>li>*:first-child {background-repeat:no-repeat;background-position:92% center;}
	
		
	/* -- DROP DOWN MENU STYLES -- */
		
		/* Main Container */
		#device_preview_menu.qm_drop .qm_main {padding-left:10px;background-color:#bbb;border:solid 1px #333;border-width:1px 0px 1px 0px;}
		/* Main Items */
		#device_preview_menu.qm_drop .qm_main>li>*:first-child {padding:10px 40px 10px 10px;border:solid 0px #333;border-left-width:1px;background-color:#888;}
		/* Last Main Item */
		#device_preview_menu.qm_drop .qm_main>.qm_last_main>*:first-child {border-right-width:1px;}
		/* Main Parent Items */
		#device_preview_menu.qm_drop .qm_main>.qm_parent>*:first-child {background-image:url(/images2/index_menu/arrow_down.png);}
		/* Main Items Hover */
		#device_preview_menu.qm_drop .qm_main>li:hover>*:first-child {background-color:#666;}
		/* Main Items Active */
		#device_preview_menu.qm_drop .qm_main>.qm_item.qm_active>*:first-child {background-color:#666;}
		
		/* Sub Containers */
		#device_preview_menu.qm_drop .qm_sub {border-radius:0px 8px 8px 8px;box-shadow:10px 10px 5px #888;padding:10px;border:solid 1px #333;background-color:#bbb;}
		/* Sub Items */
		#device_preview_menu.qm_drop .qm_sub>li>*:first-child {margin:0px;padding:5px 40px 5px 10px;background-color:transparent;color:#333;border-radius:7px;}
		/* Sub Parent Items */
		#device_preview_menu.qm_drop .qm_sub>.qm_parent>*:first-child {background-image:url(/images2/index_menu/arrow_right.png);}
		/* Sub Items Hover */
		#device_preview_menu.qm_drop .qm_sub>li:hover>*:first-child {background-color:#ccc;}
		/* Sub Items Active */
		#device_preview_menu.qm_drop .qm_sub .qm_item.qm_active>*:first-child {background-color:#ccc;}
		
		/* Sub Animation */
		#device_preview_menu.qm_pure li:hover>.qm_sub, #device_preview_menu.qm_drop .qm_item.qm_active>.qm_sub {opacity:1;}
		#device_preview_menu.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 */
		#device_preview_menu.qm_fill .qm_menu {}
		/* All Items */
		#device_preview_menu.qm_fill .qm_item>*:first-child {padding:8px 10px 8px 10px;border:solid 0px #333;border-bottom-width:1px;background-color:#888;color:#eee;}
		/* All Parent Items */
		#device_preview_menu.qm_fill .qm_parent>*:first-child {background-image:url(/images2/index_menu/arrow_fill.png);background-size:contain;background-position:95% center;}
	
		
	/* -- PARENT ITEM ARROWS FOR PURE CSS MENUS */
	
		/* Main Parent Items */
		#device_preview_menu.qm_pure .qm_main>li>*:first-child {background-image:url(/images2/index_menu/arrow_down.png);}
		#device_preview_menu.qm_pure .qm_main>li>*:only-child {background-image:none;}
		/* Sub Parent Items */
		#device_preview_menu.qm_pure .qm_sub>li>*:first-child {background-image:url(/images2/index_menu/arrow_right.png);}
		#device_preview_menu.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 */
	#device_preview_menu.qm .qm_button {cursor:pointer;}

	/* Mobile Site Menu Button */
	#device_preview_menu.qm_fill .qm_button_open {border:solid 1px #333;background-color:#888;padding:10px;text-align:center;}
		/* hover effect */
		#device_preview_menu.qm_fill .qm_button_open:hover {text-decoration:underline;}

	/* Blockout Background */
	#device_preview_menu.qm_fill .qm_blockout {background-color:rgba(0,0,0,.7);}
	
	/* The Window */
	#device_preview_menu.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 */
		#device_preview_menu.qm_fill .qm_topbar {background-color:#333;color:#eee;}
			/* title */
			#device_preview_menu.qm_fill .qm_title {width:70%;height:60%;}
			/* menu icon */
			#device_preview_menu.qm_fill .qm_icon {width:15%;height:90%;}
			#device_preview_menu.qm_fill .qm_icon>div {background-image:url(/images2/index_menu/menu_icon.png);}
			/* back button */
			#device_preview_menu.qm_fill .qm_button_back {width:15%;height:90%;}
			#device_preview_menu.qm_fill .qm_button_back>div {background-image:url(/images2/index_menu/back.png);}
			/* close button */
			#device_preview_menu.qm_fill .qm_button_close {width:15%;height:90%;}
			#device_preview_menu.qm_fill .qm_button_close>div {background-image:url(/images2/index_menu/close.png);}
			
	/* Slide animation timing */
	#device_preview_menu.qm_fill .qm_doc { 
		-webkit-transition: .4s ease-out;
		-moz-transition: .4s ease-out;
		-o-transition: .4s ease-out;
		transition: .4s ease-out;
	}