@charset "UTF-8"; #navSidebar { padding:0; margin:0; border:0; line-height:1; } #navSidebar ul, #navSidebar ul li, #navSidebar ul ul { list-style:none; margin:0; padding:0; } #navSidebar ul { position:relative; z-index:597; float:left; } #navSidebar ul li { float:left; min-height:1px; line-height:1em; vertical-align:middle; position:relative; } #navSidebar ul li.hover, #navSidebar ul li:hover { position:relative; z-index:599; cursor:default; } #navSidebar ul ul { visibility:hidden; opacity:0; position:absolute; top:100%; left:0px; z-index:598; width:100%; } #navSidebar ul ul li { float:none; } #navSidebar ul ul ul { top:-2px; right:0; } #navSidebar ul li.hover > ul, #navSidebar ul li:hover > ul { visibility:visible; opacity:1; } #navSidebar ul ul { top:1px; left:99%; } #navSidebar ul li { float:none; } #navSidebar ul ul { margin-top:1px; } #navSidebar ul ul li { font-weight:normal; } /* Custom CSS Styles */ #navSidebar { zoom:1; } #navSidebar:before { content:''; display:block; } #navSidebar:after { content:''; display:table; clear:both; } #navSidebar > ul a { display:block; padding:0.7em 1em; text-decoration:none; } #navSidebar > ul { width:80%; } #navSidebar ul ul { /* box-shadow:0 0 0.5em rgba(0,0,0,0.4); */ width:100%; } #navSidebar > ul > li > a { border-right:4px solid #FC0; } #navSidebar > ul > li.active a { background:#FC0; } #navSidebar > ul > li a.hover, #navSidebar > ul > li a:hover, #navSidebar > ul > li.hover a, #navSidebar > ul > li:hover a { background:#FC0; } #navSidebar li { position:relative; } #navSidebar ul li.has-sub > a:after { content:'+'; position:absolute; top:50%; right:1em; margin-top:-0.6em; } #navSidebar ul ul li.last { border-bottom:0; } #navSidebar ul ul { border:1px solid #DA0; } #navSidebar ul ul a { font-size:0.7em; padding:0.5em 1em; -webkit-border-radius:0 !important; -moz-border-radius:0 !important; border-radius:0 !important; } #navSidebar ul ul li { border-bottom:1px solid #DA0; } #navSidebar ul ul li.hover > a, #navSidebar ul ul li:hover > a { background:#DA0; } /* MEDIA QUERIES */ @media only screen and (max-width: 1250px) { #navContainer { padding:1em; width:12em; } #navSidebar > ul { width:100%; } #navSidebar > ul > li { margin:1em 0; } #navSidebar > ul a { padding:0.5em 0.5em; } } @media only screen and (max-width: 650px) { #navContainer { padding:0.5em 0.1em; width:2.5em; } #navHome, #navSidebar > hr, #navSidebar > ul > li > a > span:nth-child(2) { display:none; } #navSidebar ul ul { min-width:8em !important; } #navSidebar > ul a { /* padding:0.15em 0.25em; */ } #navSidebar ul li.has-sub > a:after { content:none; display:none; } #navSidebar ul ul ul { width:15em !important; } } @media only screen and (max-height: 700px) { #navSidebar ul ul ul { width:200%; display:flex; flex-wrap:wrap; align-content:stretch !important; } #navSidebar ul ul ul li { flex-basis:50%; flex-grow:1; display:block; } #navSidebar ul ul ul li, #navSidebar ul ul ul li a { height:auto; } #navSidebar ul ul ul li:nth-of-type(2n) { border-left:1px solid #DA0; } }