/* Global */ /* Content Container */ /* Content box */ /* Navigation */ /* Colors */ #nav-side { user-select: none; width: 175px; position: fixed; top: 79px; right: 0; bottom: 0; left: 0; z-index: 0; overflow-y: auto; font-size: 0.8em; background: #2F2F2F; } #nav-side input { display: none; } #nav-side input:checked + ul .max { display: inherit; } #nav-side input:checked + ul .min { display: none; } #nav-side input:checked + ul > li:nth-child(n+2) { display: inherit; } #nav-side input + ul .max { display: none; } #nav-side input + ul .min { display: inherit; } #nav-side input + ul > li:nth-child(n+2) { display: none; } #nav-side > li li { border-top: 1px solid #3f3f3f; border-bottom: 1px solid #252525; color: #fff; } #nav-side > li li:not(:first-child) { background: #353535; } #nav-side > li li:first-child { border-bottom: 1px solid #1a1a1a; } #nav-side > li li:first-child { padding: 7px 0 7px 7px; } #nav-side > li li a { display: block; padding: 7px 0 7px 7px; } #nav-side > li li a:hover { background: #3F3F3F; } #nav-side li:last-child li:last-child { border-bottom: none; } #nav-side .max, #nav-side .min { float: right; } #nav-side i { margin-right: 5px; } #nav-side::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5; } #nav-side::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #nav-side::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #555; } .nav-trigger { position: absolute; clip: rect(0, 0, 0, 0); } label[for="nav-trigger"] { font-size: 2.0em; height: 30px; width: 30px; cursor: pointer; } .nav-trigger:checked ~ main { width: calc(100% - 175px); left: 175px; } .nav-top { user-select: none; margin-top: 5px; display: block; background: #ffffff; border: 1px solid #b7b7b7; -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; } .nav-top > li { -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; text-shadow: 1px 1px 1px #ffffff; } .nav-top > li:first-child { -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; box-shadow: inset 1px 1px 0px 0px #ffffff; } .nav-top li { background: #fff; display: inline-block; margin-right: -4px; position: relative; cursor: pointer; } .nav-top > li > a { display: inline-block; padding: 10px 10px; } .nav-top li:hover { background: #555; color: #fff; text-shadow: 0 -1px 0 #000; } .nav-top li > ul { padding: 0; position: absolute; top: 36px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; } .nav-top li > ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } .nav-top li > ul li:hover { background: #666; } .nav-top li:hover > ul { display: block; opacity: 1; visibility: visible; } @media screen and (max-width: 600px) { .nav-trigger:checked ~ main { width: 100%; left: 0; } .nav-trigger:not(:checked) ~ main { width: 0; padding-right: 0; } #nav-side { width: 100%; } } /*# sourceMappingURL=nav.css.map */