/* Global */ /* Content Container */ /* Content box */ /* Navigation */ /* Colors */ /* Accordion */ /* Log */ /* Blockquote */ /* Breadcrumbs */ /* Input */ /* Button */ /* Canvas */ /* Article */ /* Form */ /* Icon */ /* Img */ /* list */ /* pagination */ /* pre */ /* tag */ #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: #3b3b3b; } #nav-side span { width: 20px; display: inline-block; } #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 label { display: block; padding: 7px 0 7px 7px; cursor: pointer; } #nav-side > li { color: #fff; } #nav-side > li a { display: block; padding: 7px 0 7px 7px; } #nav-side > li a:hover { color: #252525; background: #FBA026; } #nav-side > li li { border-top: 1px solid #505050; color: #fff; border-bottom: 1px solid #252525; } #nav-side > li li:not(:first-child) { background: #444; } #nav-side > li li:hover, #nav-side > li li.active { color: #252525; background: #FBA026; border-top: 1px solid #ffc06e; } #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); } .nav-trigger:checked ~ main { width: calc(100% - 175px); left: 175px; } label[for="nav-trigger"] { font-size: 2.0em; height: 30px; width: 30px; cursor: pointer; } .nav-top { user-select: none; margin-top: 5px; display: block; background: #fff; border: 1px solid #b7b7b7; } .nav-top > li { -moz-box-shadow: inset 0px 1px 0px 0px #fff; -webkit-box-shadow: inset 0px 1px 0px 0px #fff; box-shadow: inset 0px 1px 0px 0px #fff; } .nav-top > li:first-child { -moz-box-shadow: inset 1px 1px 0px 0px #fff; -webkit-box-shadow: inset 1px 1px 0px 0px #fff; box-shadow: inset 1px 1px 0px 0px #fff; } .nav-top > li > a { display: inline-block; padding: 10px 10px; } .nav-top li { background: #fff; display: inline-block; position: relative; cursor: pointer; } .nav-top li:hover, .nav-top li.active { -moz-box-shadow: inset 0px 1px 0px 0px #FFC06E; -webkit-box-shadow: inset 0px 1px 0px 0px #FFC06E; box-shadow: inset 0px 1px 0px 0px #FFC06E; background: #FBA026; color: #252525; } .nav-top li:hover:first-child, .nav-top li.active:first-child { -moz-box-shadow: inset 1px 1px 0px 0px #FFC06E; -webkit-box-shadow: inset 1px 1px 0px 0px #FFC06E; box-shadow: inset 1px 1px 0px 0px #FFC06E; } .nav-top li:hover > ul, .nav-top li.active > ul { display: block; opacity: 1; visibility: visible; } .nav-top li > ul { padding: 0; z-index: 5; position: absolute; top: 36px; left: 0; width: 150px; display: none; opacity: 0; visibility: hidden; border-left: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7; } .nav-top li > ul li { display: block; color: #000; padding: 7px; } .nav-top li > ul li:hover { color: #252525; background: #FBA026; } @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 */