#layout { position: fixed; left: 0; top: 0; right: 0; bottom: 0; } #header { position: fixed; top: 0; left: 0; right: 0; } #sidebar { width: 13em; position: fixed; left: 0; top: 3.6em; bottom: 0; } #main { position: fixed; left: 13em; top: 3.6em; right: 0; bottom: 0; } #layout.fullscreen #header { display: none; } #layout.fullscreen #sidebar { display: none; } #layout.fullscreen #main { left: 0; top: 0; } /* tmp */ #main > .container { width: 100%; height: 100%; overflow: auto; float: left; } #layout.twocols #main > .container { width: 50%; } /*#layout.twocols #main > .container {*/ #layout.twocols #main .container { /* width: 100%;*/ /* font-size: 0.9em; */ } /* #layout.twocols #main > .container > .controls {*/ #layout.twocols #main .container > .controls { width: 100%; /* font-size: 0.9em; */ } .container > div { /* padding: 0 1.5% 0 1.5%; */ padding: 0; } .container .controls { top: 0; z-index: 1; background-color: white; padding: 0; } .controls h1 { font-size: 1.5em; margin-bottom: 0.2em; border-bottom: 1px solid black; } .container .fake-controls { padding: 0; } .container .controls .pagination { display: inline; } #main .dashboard { padding: 0; } .dashboard > div.container { font-size: 0.9em; vertical-align: top; width: 48.5%; display: inline-block; padding: 0; margin-top: 1em; margin-left: 1%; } .dashboard > div.container td.state { font-size: 1em; width: 5em; } .dashboard > div.container h1 { line-height: 2em; font-size: 1em; padding-left: 1em; background-color: #555; color: white; border: none; border-radius: 0.2em; -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; } .dashboard > div.container h1 a { text-decoration: none; color: inherit; } .dashboard > div.container h1 a:hover { text-decoration: underline; } #layout.twocols .dashboard > div.container { width: 96%; margin-left: 2%; margin-right: 2%; } .content { padding: 1em; } /* Not growing larger than 3840px at 1em=16px right now */ @media screen and (min-width: 240em) { #main { width: 227em; } #header { width: 240em; } /* .container { background-color: red; } */ } @media screen and (min-width: 100em) { .dashboard > div.container { width: 32%; margin-left: 1%; margin-right: 0; } } @media screen and (max-width:72em) { #layout { font-size: 0.8em; } } @media screen and (max-width: 47em) { .dashboard > div.container { width: 98%; margin-left: 1%; margin-right: 1%; } #layout.twocols { #main > .container { width: 99%; } #col1 { display: none; } } } @media screen and (max-width: 36em) { #sidebar { display: none; } #logo img { /* TODO: Quickfix, this needs improvement */ width: 0 !important; top: -100px; position: absolute; } #main { left: 0; } } @media screen and (min-width: 24em) and (max-width: 62em) { /* #layout .dashboard > div.container { width: 96%; margin-left: 2%; margin-right: 2%; } */ } @media screen and (min-width: 48em) and (max-width: 62em) { /* #main > .container { */ /* #main .container { font-size: 0.9em; } */ /* TEST .container { background-color: blue; } */ }