/*########################################################################################################## 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*/ #qm_top_bar.qm {z-index:3;color:#999;font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;font-size:1.1em;} /*All Menu Links*/ #qm_top_bar.qm a, #qm_top_bar.qm a:visited, #qm_top_bar.qm a:hover, #qm_top_bar.qm a:active {color:#999;} /* All Menu Containers */ #qm_top_bar .qm_sub, #qm_top_bar .qm_main {} /* All Menu Items */ #qm_top_bar .qm_main>li>*:first-child, #qm_top_bar .qm_sub>li>*:first-child {background-repeat:no-repeat;background-position:right center;} /* -- DROP DOWN MENU STYLES -- */ /* Main Container */ #qm_top_bar.qm_drop .qm_main {padding-left:10px;} /* Main Items */ #qm_top_bar.qm_drop .qm_main>li>*:first-child {padding:5px 9px 3px 9px;font-weight:bold;border-radius:8px;border:solid 1px transparent;} /* Main Home Button */ #qm_top_bar.qm_drop .qm_main>li.qm_home_button>*:first-child {padding:4px 8px 0px 8px;} /* Main Parent Items */ #qm_top_bar.qm_drop .qm_main>.qm_parent>*:first-child {padding-right:25px;background-image:url(/images2/top_bar_menu/plus.png);} /* Main Items Hover */ #qm_top_bar.qm_drop .qm_main>li:hover>*:first-child {background-color:#000;} /* Main Items Active */ #qm_top_bar.qm_drop .qm_main>.qm_item.qm_active>*:first-child {position:relative;z-index:2;border-color:#222;border-bottom-color:transparent;background-color:#000;border-radius:8px 8px 0px 0px;background-image:url(/images2/top_bar_menu/minus.png);} /* Sub Containers */ #qm_top_bar.qm_drop .qm_sub {margin-top:-1px;border-radius:0px 8px 8px 8px;box-shadow:3px 3px 5px #333;padding:10px;border:solid 1px #222;background-color:#000;} /* Sub Items */ #qm_top_bar.qm_drop .qm_sub>li>*:first-child {margin:0px;padding:3px 40px 3px 10px;background-color:transparent;color:#aaa;border-radius:7px;} /* Sub Parent Items */ #qm_top_bar.qm_drop .qm_sub>.qm_parent>*:first-child {background-image:url(/images2/index_menu/arrow_right.png);} /* Sub Items Hover */ #qm_top_bar.qm_drop .qm_sub>li:hover>*:first-child {background-color:#444;color:#ccc;} /* Sub Items Active */ #qm_top_bar.qm_drop .qm_sub .qm_item.qm_active>*:first-child {background-color:#ccc;} /* Sub Animation */ #qm_top_bar.qm_pure li:hover>.qm_sub, #qm_top_bar.qm_drop .qm_item.qm_active>.qm_sub {opacity:1;} #qm_top_bar.qm_drop .qm_sub {opacity:0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; } /* -- FILL MENU STYLES -- */ /* All Containers */ #qm_top_bar.qm_fill .qm_menu {} /* All Items */ #qm_top_bar.qm_fill .qm_item>*:first-child {padding:8px 10px 8px 10px;border:dotted 0px #333;border-bottom-width:1px;background-color:#000;} /* All Parent Items */ #qm_top_bar.qm_fill .qm_parent>*:first-child {background-image:url(/images2/top_bar_menu/plus_fill.png);background-size:contain;background-position:95% center;} /* -- PARENT ITEM ARROWS FOR PURE CSS MENUS */ /* Main Parent Items */ #qm_top_bar.qm_pure .qm_main>li>*:first-child {background-image:url(/images2/top_bar_menu/arrow_plus.png);} #qm_top_bar.qm_pure .qm_main>li>*:only-child {background-image:none;} /* Sub Parent Items */ #qm_top_bar.qm_pure .qm_sub>li>*:first-child {background-image:url(/images2/top_bar_menu/arrow_plus.png);} #qm_top_bar.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_top_bar.qm .qm_button {cursor:pointer;} /* Mobile Site Menu Button */ #qm_top_bar.qm_fill .qm_button_open {padding:5px 9px 3px 9px;font-weight:bold;} /* hover effect */ #qm_top_bar .qm_button_open:hover {text-decoration:underline;} /* Blockout Background */ #qm_top_bar.qm_fill .qm_blockout {background-color:rgba(0,0,0,.8);} /* The Window */ #qm_top_bar.qm_fill .qm_window {width:90%;height:90%;top:5%;left:5%;border:solid 4px #000;background-color:#333;border-radius:8px 8px 0px 0px;background-image:url(/images2/top_bar_menu/tile_bg.png);} /* Top Bar */ #qm_top_bar.qm_fill .qm_topbar {background-color:#444;color:#eee;border-radius:8px 8px 0px 0px;} /* title */ #qm_top_bar.qm_fill .qm_title {width:70%;height:70%;} /* menu icon */ #qm_top_bar.qm_fill .qm_icon {width:15%;height:90%;} #qm_top_bar.qm_fill .qm_icon>div {background-image:url(/images2/top_bar_menu/menu_icon.png);left:10px;top:0px;margin:auto 0px;background-position:left center;} /* back button */ #qm_top_bar.qm_fill .qm_button_back {width:15%;height:90%;} #qm_top_bar.qm_fill .qm_button_back>div {background-image:url(/images2/top_bar_menu/back.png);} /* close button */ #qm_top_bar.qm_fill .qm_button_close {width:15%;height:90%;} #qm_top_bar.qm_fill .qm_button_close>div {background-image:url(/images2/top_bar_menu/close.png);} /* Slide animation timing */ #qm_top_bar.qm_fill .qm_doc { -webkit-transition: .4s ease-out; -moz-transition: .4s ease-out; -o-transition: .4s ease-out; transition: .4s ease-out; } /* ######## Optionally Right Align Main Menu Items ######## */ /* Right align main items */ #qm_top_bar.qm_drop .qm_main>li {float:right;}