body { margin: 0px; height: 100.1vh; display: flex; flex-direction: column; } #page { box-shadow: 30vw 0px 5vw -10vw green inset; flex: 1; display: flex; flex-direction: column; } /* * Menu configuration */ .nav, .nav-child { padding: 0px; } .nav > li, .nav-child > li { display: block; } .nav > li > .nav-child, .nav-child > li > .nav-child { padding-left: 5px; margin-left: 5px; border-left: solid gray 1px; font-size: smaller; } .nav > li > .nav-child .nav-child { font-size: x-small; } /* * Topmenu positioning and styling */ #topmenu { display: none; } /* * Header line positioning */ #header { flex: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; } #header > div { margin: 20px; align-items: center; } #logo, #slideshow { flex: 0; } #logo { display: inline-block; } #slideshow { display: none; } #logo > img { height: 150px; } #slideshow > img { height: 150px; } /* * Content positioning */ #content { flex: 1; } #left_menu { display: none; } #main_column { margin: 15px; } #right_column { display: none; } #footline { margin-top: 10px; } /* * Footer positioning */ #footer { flex: 0; background-color: black; color: white; text-align: center; margin-top: 30px; padding: 5px; } /* * Mobile menu positioning */ #mobile_menu li > a { margin: 5px 0px 5px 0px; background-color: rgb(200,255,200); padding: 0px; display: block; flex: 0; } #mobile_menu li.active > a { background-color: rgb(150,255,150); } #mobile_menu .nav { padding: 0px; border: none; margin-left: 0px; } #mobile_menu li { margin-left: 5px; margin-right: 5px; } #mobile_menu li > ul.nav { margin-left: -5px; margin-right: -5px; } #mobile_menu > .level-1 > li > ul { display: flex; flex-wrap: wrap; } #mobile_menu > .level-1 > li > ul > li { display: inline-block; flex: 1 1 40%; } #mobile_menu > .level-1 > li > ul > li > a { display: block; } /* * Debug */ /*#right_column,#left_menu,#main_content,#footline { background-color: rgba(0,0,0,0.1); }*/