body { position: absolute; margin: 0; height: 100%; width: 100%; background-color: #EEE; } /* Font */ #welcome, #exit span, #menu-title, #menu a { font-size: 1.1em; } /* Header */ #header, #exit { height: 4.2em; } #header { position: relative; background-color: #333; width: 100%; z-index: 1; } #header * { color: white; } #header-bar { position: relative; height: 100%; overflow: hidden; } #logo { width: 16em; float: left; padding: 1em; padding-top: 1.2em; } #loader { float: left; margin-left: 0.4em; margin-top: 1.4em; visibility: hidden; } #welcome { float: right; padding: 0 1.5em; } #welcome span { font-size: 1em; } #welcome, #exit span { margin-top: 2em; } #exit { float: right; background-color: #E80; width: 4em; text-align: center; } #exit:hover { background-color: #F91; } #exit span { display: block; } #header, #content { margin: auto; width: 100%; } /* Body */ #body { position: absolute; top: 4.2em; bottom: 0; left: 0; right: 0; } #content { position: relative; height: 100%; } /* Top bar */ #top-bar { height: 3em; overflow: hidden; background-color: #CE8; } /* Menu */ #menu-button { display: none; float: left; border: none; background-color: transparent; padding: 0; margin: 0; margin-left: 0.6em; height: 4.2em; } #menu-button img { height: 2em; } #menu-background { z-index: 10; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(10, 10, 10, 0.6); display: none; } #menu-box, #menu > li { width: 15em; } #menu-box { z-index: 20; position: absolute; left: 0; bottom: 0; top: 0; background-color: white; z-index: 20; box-shadow: 0 0.2em 0.2em #AAA; } #menu { position: absolute; top: 0; left: 0; right: 0; bottom: 4em; margin: 0; padding: 1em 0; list-style-type: none; overflow: auto; } #menu > li { display: block; float: left; clear: both; padding: 0; } #menu > li > a { line-height: 2.8em; width: 70%; padding: 0 15%; } #menu a { float: left; } #menu a:hover { background-color: #DDD /* #AC6 */; } ul.submenu { display: none; position: fixed; border: none; border-radius: 1px; background-color: white; box-shadow: 0 0.2em 0.2em #CCC; z-index: 10; list-style-type: none; padding-left: 0; width: 14em; } ul.submenu a { width: 60%; padding: 0.7em 20%; } #menu li.selected { background-color: #EEE; } /* Links */ #links { position: absolute; bottom: 0; right: 0; padding: 0.8em; } #links a { padding: 0.1em; display: block; float: left; } #links img { height: 1.8em; } /* Form */ #form { position: absolute; top: 0em; bottom: 0; right: 0; left: 15em; overflow: auto; } @media screen and (max-device-width: 1100px) and (min-resolution: 100dpi) { #menu-button { display: block; } #menu-box { display: none; } #form { left: 0; } }