#menuwrapper > h3 { margin: 0; padding: 0.7em 0 0.4em 3.2em; } .main_wrapper > div { height: 100%; } #menuwrapper { position: absolute; z-index: 20200; left: 0; top: 8em; height: calc(100% - 8em); font-size: 1.1em; transition: left 0.7s; } #menuwrapper.fixed { position: fixed; top: 0; height: 100% !important; } #menuwrapper > div { position: static; /*height: 100%;*/ } #menuwrapper.open { left: 0; } #menuwrapper #menu { font-size: 1.1em; /*height: 100%;*/ } #menuwrapper #menu > nav { width: 17em; padding-top: 1em; padding-bottom: 1em; transition: padding-top 0.25s; border-right: 1px solid #5b9; background-color: rgba(255, 255, 255, 0.95); } #menuwrapper.fixed #menu > nav { padding-top: 1.7em; } #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/f47df581-2639-4134-a5bc-41d760172d71"); 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 { display: none; position: absolute; top: 0; right: -3em; box-sizing: content-box; padding: 0; width: 3em; height: 100%; border: 0; border-right: 1px solid #5b9; background: url("/data/b41ce2a0-73a8-49b2-ba4c-4a2301f17900") rgba(255, 255, 255, 0.95) no-repeat; background-position: center center; cursor: pointer; } #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; } #menu a[data-active] { font-weight: bold; } @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: 15em; } #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; } } /*# sourceMappingURL=style.css.map */ #menuwrapper #menu a > img { display: none; } #menu button.oppgaver + ul a.active { font-weight: bold; }