/* INSTRUCTION FOR STYLING: # Change background, color of the horizontal menu bar: .em_nav .hnav { } # Change font, color of hyperlinks: .em_nav a { } .em_nav a:hover { } # Menu item's links when hover or active: .em_nav li:hover > a, .em_nav li.active > a { } # Top level's menu: # ----------------- # Change padding, font, color of top menu item: .hnav .menu-item-depth-0 a { } # Change position of the drop-down menu of top level menu: .hnav .menu-item-depth-0 > .menu-container, .em-catalog-navigation.horizontal > li > ul, .em-catalog-navigation.horizontal > li:hover > ul { top:50px } # Level 2+ menu: # ----------------- # Change background color, padding of container of level 2+ menu container: .em_nav .menu-item-link > ul, .em_nav .em-catalog-navigation ul { } # Change font, color of hyperlink of level 2+ menu items: .em_nav .menu-item-depth-1 a, .em_nav .em-catalog-navigation li li a { } # Change font, color of hover/active hyperlink of level 2+ menu items: .em_nav .menu-item-depth-1 li:hover > a, .em_nav .menu-item-depth-1 li.active > a, .em_nav .em-catalog-navigation li li:hover > a, .em_nav .em-catalog-navigation li li.active > a { } # ---------------- # Add a gutter between 2 children of hbox: .em_nav .menu-item-hbox > .menu-container > li { margin-left:10px } .em_nav .menu-item-hbox > .menu-container > li:first-child { margin-left:0 } # Fix hbox on mobile view .adapt-0 .menu-item-hbox > .menu-container { white-space:normal } .adapt-0 .menu-item-hbox > .menu-container > li { display:block; margin-left:0 } BELOW BASE CSS SHOULD NOT BE CHANGED: =============================================================================== */ ul ul, ul ol, ol ol, ol ul { font-size:100% } .em_nav { } .em_nav code,.em_nav em{word-wrap:break-word;-ms-word-wrap: break-word;white-space: normal; } .em_nav ul { margin:0; } .em_nav li { margin:0; } .em_nav .menu-item-depth-0 a ,.nav-container .menu-item-depth-0 a{ display:block; padding:5px 20px } .em_nav .menu-item-vbox .menu-container .menu-item-text{padding-left:10px} .em_nav .menu-item-vbox > .menu-container > .menu-item-text > ul > li > a{padding:5px 0} /* horizontal menu */ .hnav .menu-item-depth-0 { float:left; position:relative } .hnav .menu-item-depth-0 a { display:block; /*height:20px; line-height:20px; */padding:5px 10px } .hnav .menu-item-depth-0 > .menu-container { position:absolute; top:30px; left:-9999px; z-index:9999 } /* vertical menu */ .vnav {} .vnav .menu-item-depth-0 { position:relative } .vnav .menu-item-depth-0 > .menu-container { position:absolute; top:-1px; left:-9999px; z-index:999 } /* general */ .menu-item-parent > a { margin-right:31px } .em_nav a.arrow { position:absolute; margin-right:0 !important; width:20px; /*text-indent:-99999px;*/ overflow:hidden; top:0; right:0 } .em_nav a.arrow span { display:block; /* add background arrow here */ text-indent:-999em; } /* ---------- level 2+ ---------- */ /* horizontal menu */ .hnav .menu-item-depth-0:hover > .menu-container, .hnav .menu-item-depth-0.hover > .menu-container {/* left:0 */} /* vertical menu */ .vnav .menu-item-depth-0:hover > .menu-container, .vnav .menu-item-depth-0.hover > .menu-container { left:100% } .nav-right.vnav .menu-item-depth-0:hover > .menu-container, .nav-right.vnav .menu-item-depth-0.hover > .menu-container { left:auto; right:100% } .menu-item-hbox > .menu-container { white-space:nowrap } .menu-item-hbox > .menu-container > li {/* ;float:none;display:inline-block*/white-space:normal; vertical-align:top; } .menu-item-link > .menu-container { min-width:150px; background:#fff; box-shadow:6px 0px 14px #ededed inset} .menu-item-depth-0 .menu-item-link { position:relative } .menu-item-depth-0 .menu-item-link > .menu-container { position:absolute; top:0; left:-9999px; z-index:9999 } .menu-item-depth-0 .menu-item-link:hover > .menu-container, .menu-item-depth-0 .menu-item-link.hover > .menu-container { left:100%; top:-11px } .nav-right .menu-item-depth-0 .menu-item-link:hover > .menu-container, .nav-right .menu-item-depth-0 .menu-item-link.hover > .menu-container, .col-right .menu-item-depth-0 .menu-item-link:hover > .menu-container, .col-right .menu-item-depth-0 .menu-item-link.hover > .menu-container { left:auto; right:100% } /* Catalog Navigation */ .em-catalog-navigation li.parent > a { margin-right:31px } .em-catalog-navigation li.parent > a.arrow { margin-right:0 } .em-catalog-navigation ul { min-width:150px; background:#fff; box-shadow:7px 0px 10px #f3f3f3 inset} .em-catalog-navigation li { position:relative } .em-catalog-navigation li > ul { position:absolute; top:0; left:-9999px; z-index:999 } .em-catalog-navigation li:hover > ul, .em-catalog-navigation li.hover > ul { left:100%; top:-11px } .nav-right .em-catalog-navigation li:hover > ul, .nav-right .em-catalog-navigation li.hover > ul, .nav-right .em-catalog-navigation li:hover > ul, .nav-right .em-catalog-navigation li.hover > ul { left:auto; right:100% } /* Catalog Navigation with vertical style of top level */ .em-catalog-navigation.horizontal > li { float:left } .em-catalog-navigation.horizontal > li > ul { top:30px } .em-catalog-navigation.horizontal > li:hover > ul { left:0; top:30px } .menu-title{display:none} /* Mobile view */ .adapt-0 .menu-item-link, .adapt-0 .menu-item-text, .adapt-0 .menu-item-hbox, .adapt-0 .menu-item-vbox, .adapt-0 .em-catalog-navigation li { display:block; float:none } .adapt-0 .em_nav .menu-item-vbox .menu-container .menu-item-text{padding-right:20px} /* workaround for touch devices */ .adapt-0 .menu-item-depth-0.menu-item-parent > .menu-container { display:none!important } .adapt-0 .menu-item-hbox.grid_6 > .menu-container > li.menu-item-text{padding-right:20px} .adapt-0 .em-catalog-navigation li.parent > ul { display:none } .adapt-0 .menu-container, .adapt-0 .em-catalog-navigation ul { width:100% !important; top:-1px !important; } .adapt-0 .menu-item-link > .menu-container, .adapt-0 .em-catalog-navigation li > ul { left:100% !important; right:auto !important; display:none } .adapt-0 .menu-item-link.mhover > .menu-container, .adapt-0 .em-catalog-navigation li.mhover > ul { left:100% !important; right:auto !important; display:block!important } .adapt-0 .nav-right a.arrow span{} .adapt-0 .col-right a.arrow span {} .adapt-0 .col-right .vnav > .menu-item-depth-0 > a.arrow span, .adapt-0 .col-right .vnav > .menu-item-depth-0 > .em-catalog-navigation > li.level0 > a.arrow span {} .adapt-0 .menu-item-depth-1 .em-catalog-navigation.vertical{ margin:0 -20px 15px -20px;} .adapt-0 .menu-item-depth-1 .em-catalog-navigation.vertical li.level0 { padding:0 20px !important} .adapt-0 .vnav .menu-item-depth-1 .em-catalog-navigation.vertical{ margin:0 -31px 15px -20px;} .adapt-0 .menu-item-hbox.grid_6 > .menu-container > li.menu-item-text .em-catalog-navigation.vertical{margin:0 -20px 15px -3px} .adapt-0 .menu-item-hbox.grid_6 > .menu-container > li.menu-item-text .em-catalog-navigation.vertical li.level0{padding:0 5px!important} .adapt-0 .hnav .menu-item-depth-0 .menu-item-hbox.grid_6 > .menu-container > li.menu-item-vbox .menu-item-text{padding-left:10px;} /* Clear Divs */ .em_nav .hnav:after, .em_nav .vnav:after, #nav > .menu-container:after, .menu-item-hbox:after { content:'.';display:block;clear:both;visibility:hidden;height:0;overflow:hidden } /* workaround for touch devices */ .em_nav > ul > .menu-item-depth-0.menu-item-parent > .menu-container { display:none } .em_nav > ul > .menu-item-depth-0.menu-item-parent:hover > .menu-container { display:block } .em_nav > ul > .em-catalog-navigation li.parent > ul { display:none } .em_nav > ul > .em-catalog-navigation li.parent:hover > ul { display:block }