html, body { width:100%; height:100%; background-color:#fff; margin:0; } .head-background { background-image: url(https://image.jimcdn.com/app/cms/image/transf/none/path/sa7b67a2d4fc6e657/backgroundarea/ib8dbdf53b879f821/version/1560373724/image.jpg); height: 18em; width:100%; background-size: 100%; background-repeat: no-repeat; display:inline-block; position: fixed; left: 0; top: 0; opacity: 0.8; z-index: 0; } header { position: fixed; top: 1.5em; left: 0; right: 0; } h1, h2, h3, menu{ padding: 0; margin: 0; z-index: 1; position: relative; } h1 { color:#fff; text-align:center; line-height:3; } h2 { padding-top:0.5em; font-size:1.3em; } h3 { font-size:1.1em; font-weight:bold; } a { color: #00b; text-decoration:none; } th { text-align: left; } menu { background-color: rgba(68,68,68,0.5); position: fixed; z-index: 1; line-height: 2; text-align: center; margin: 0; left:0; right:0; } menu > a.intern, menu > div > span.intern { color: #ffb; font-size:1.2em; } menu > a:not(.intern) { color: #fff; font-size:1.2em; } menu > a { font-weight: normal; padding: 0 1em; line-height: 2; text-align: center; display: inline-block; transition: background 0.27s; } menu > a:hover { font-weight:normal; background-color: rgba(224,224,224,0.4); } menu > a.active { font-weight:bold; } menu > a > .menu-icon { max-width:16px; max-height:16px; } menu > .login { float: right; } menu .internal-menu-main { display:inline-block; } menu .internal-menu-sub { padding: 0 6px; display: none; position: absolute; background-color: rgba(0, 0, 0, 0.7); min-width: 160px; border: 1px solid #666666; z-index: 1; box-shadow: 1px 1px 0 #aaa; } menu .internal-menu-sub a { display: block; text-align:left; color: #fa0; text-shadow: -0.5px 0.5px #666; } menu .internal-menu-sub a:hover { background-color: rgba(224, 224, 224, 0.2); } menu .internal-menu-main:hover { color:#ff0000; } menu .internal-menu-main:hover .internal-menu-sub { display: block; } menu .header-main-space { height:9.5em; } main { padding: 0 10%; background-color: #e0e0e0; position: absolute; bottom: 2em; top: 18em; left:0; right:0; z-index: 0; } footer { display:block; position:fixed; height: 2em; background-color:#e0e0e0; bottom:0; width:100%; line-height:2em; } footer > span, footer > a{ padding: 0 1em; } .footer-imprint { float:right; } .error { color: #c00; } .form th { text-align: left; } .messages { border: 1px solid black; text-align: center; font-weight: bold; margin: 0.5em 0; } .content { background-color: #fff; height: 100%; padding: 0.5em 1em; overflow: auto; margin-top: -1.2em; } .toggle-collapse { border: 1px solid #333; width: 1em; height: 1em; display: inline-block; line-height: 1; text-align: center; cursor: pointer; } .emailattachments { margin-top: 1em; } .planboard-discussion { border: 1px solid #000000; padding: 2px 2px 2px 16px; min-height: 5em; width:99%; cursor:text; position: relative; overflow: auto; } .planboard-settings > div { display: inline-block; width: 49%; vertical-align: top; height: 100%; } .emailinbox { display: flex; height: 100%; } .emailinbox-headers { width: calc(100% - 20em); overflow: auto; } .emailinbox-folders { width: 20em; background-color: #e0e0e0; padding: 1em; margin-right: -0.5em; }