#menuwrapper > h3 { margin: 0; padding: 0.7em 0 0.4em 3.2em; } .main_wrapper > div { height: 100%; } #menuwrapper { position: fixed; z-index: 20200; left: -32em; top: 0; height: 100%; font-size: 1.1em; transition: left 0.7s; } #menuwrapper > div { position: static; height: 100%; } #menuwrapper.open { left: 0; } #menuwrapper #menu { height: 100%; } #menuwrapper #menu > nav { float: left; width: 32em; height: calc(100% - 3em); padding-top: 3em; border-right: 0.4em solid #a3222a; background: #fd6; } #menuwrapper #menu > nav ul { display: none; margin: 0; padding: 0 0 0 1.4em; list-style-type: none; } #menuwrapper #menu > nav > ul { padding-left: 2em; } #menuwrapper #menu > nav button { font-size: 1em; display: block; box-sizing: content-box; margin: 0; padding: 0.25em 0.75em 0.25em 1.25em; width: calc(100% - 2em); line-height: 1.1em; text-align: left; border: 0; cursor: pointer; } #menuwrapper #menu > nav button { background-image: url("/data/6aa80eb8-0d78-453b-9b8e-1a1bbafabc05"); background-repeat: no-repeat; background-size: 1em 15em; background-color: transparent; transition: color 0.2s; } #menuwrapper #menu > nav button:focus, #menuwrapper #menu > nav button:active { outline: none; } #menuwrapper #menu > nav button.open { font-weight: bold; background-position: 0 -4.75em; } #menuwrapper #menu > nav button:not(.open) { background-position: 0 0; } #menuwrapper #menu > nav button:hover { color: #a24; } #menuwrapper #menu > nav a { font-size: 1em; display: block; padding: 0.25em 0.75em 0.25em 1.25em; width: calc(100% - 2em); line-height: 1.1em; color: #000; text-decoration: none; background-image: url("/data/6aa80eb8-0d78-453b-9b8e-1a1bbafabc05"); background-repeat: no-repeat; background-size: 1em 15em; background-color: transparent; background-position: 0 -9.5em; transition: color 0.2s; } #menuwrapper #menu > nav a:hover { color: #c46; } #menuwrapper #menu > nav > ul { display: block; } /* #menuwrapper #menu > nav > ul > li > a, #menuwrapper #menu > nav > ul > li > button { width: 15em; white-space: normal; } */ #menuwrapper #menu > button#show_hide_menu { float: left; box-sizing: content-box; padding: 0; width: 2.5em; height: 4.25em; border: 0; background: none; background-image: url("/data/25baa517-640b-4a56-a643-a8eef4bd19d2"); background-size: 2.5em 4.25em; cursor: pointer; position: relative; top: calc(50% - 2.5em); } #menuwrapper #menu > button#show_hide_menu:focus, #menuwrapper #menu > button#show_hide_menu:active { outline: none; } /* #menu > nav > ul > li > a { width: 13em; } #menu > nav > ul > li > ul > li > a { width: 9em; } #menu > nav > ul > li > ul > li > ul > li > a { width: 5em; } */ #menuwrapper #menu a[data-active] { font-weight: bold; } #menuwrapper #menu button[data-active] { font-weight: bold; } #menuwrapper #menu button[data-active] + ul { display: block; } /* @media screen and (max-width: 1365px) { #menuwrapper { position: fixed; top: 0; left: -18.7em; height: 100% !important; border-right: none; } #menuwrapper > div { position: relative; } #menuwrapper #menu > nav { padding-top: 1em; width: 17em; } #menuwrapper #menu > button#show_hide_menu { display: block; } } @media screen and (max-width: 1280px) { #menuwrapper #menu { font-size: 1.2em; } #menuwrapper { left: -$menu_width * 1.2; } } */ /* @media screen and (min-width: 1366px) and (max-width: 1649px) { #menuwrapper #menu { font-size: 1.04em; } #menuwrapper #menu > nav { width: 17em; } #menuwrapper.open { left: 0; } } @media screen and (min-width: 1650px) { #menuwrapper #menu > nav { width: 22em; } #menuwrapper.open { left: 0; } } */