html, body, #page-wrapper { height: 100%; } .fullscreen #centred > #main { padding-left: 0; padding-right: 0; } .column:first-child { margin-left: 0; } .column.column-1 { overflow: hidden; } .fullscreen #main > .column.column-1 { float: none; left: 30px; top: 50px; top: calc(4em + 6px); } .fullscreen .column.column-1 { position: absolute; bottom: 0px; } .fullscreen .main-column-wrapper { position: absolute; overflow: hidden; margin-left: 0; margin-right: 0; left: 345px; right: 30px; top: 50px; top: calc(4em + 6px); bottom: 20px; } .fullscreen .main-column-wrapper > .column { margin-left: 0; margin-right: 0; } .fullscreen .column.chart-column { clear: both; overflow: hidden; margin-bottom: 0; } .chart-column h2 { font-weight: bold; } .chart-column.fullscreen h2 { font-size: 28px; padding-bottom: 15px; } .chart-column .chart-parameter-bar { padding-top: 10px; padding-bottom: 6px; } .chart-column .controls > .burger { margin-top: -2px; } .next-chart, .prev-chart { position: absolute; top: 0; bottom: 0; width: 32px; opacity: 0.5; -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; transition: background-color 0.3s linear; } .next-chart { right: 0; top: 32px; } .prev-chart { left: 0; } .next-chart:hover { background: #f4f4f4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAABkklEQVQoz+3RQW3DQBCGUUMIlEohUAiFECiFUAiBEAiGEAiFUAbuRvKpahTv7Gyjdd9I38GSD6v/TcuyTHpeRgAAQAAACAAAAQAgAAAEAIAAABAAAAIAQAAACAAAAQAgAAC0Z4Dj8XgozaWldL19Tw0HoB7gvI6/ZCAAqAeYfwA0IQCoBzj9AhBGAFD7oHKZCAACAJkIAIIAWQgAGgBWhI8WBACNACvCOYoAIAGgBQFAEkAUAUAiQAQBQDJALQKADgA1CAA6AWxFANARYAsCgM4AoyPsAmBkhN0AjIqwK4AHCBcAfwPwcgdgBtAZYB3/6w7ACUBHgBHH3w3AqOPvAmDk8YcHeDT+7R8AnQC2jA+gE8DW8QF0AKgZH0AyQO34ABIBIuMDSAKIjg8gAaBlfACNAGXgQ+kzOj6ABoB1/GvL+ACCAFnjAwiUOT6AGMAla3wAMYA5a3wAMYC3rPEBRB5Uroz+Wnq/YUyNB0AAAAgAAAEAIAAABACAAAAQAAACAACAEQAAEAAAAgBAAAAIwD/qG5XegI8D0sP/AAAAAElFTkSuQmCC) -32px 50% no-repeat; } .prev-chart:hover { background: #f4f4f4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAABjUlEQVRIx+3XUW3DMBiF0UIolEkhMAiFUCiDMAiFUAiBUAiDMAaZM60vk9I09m9vsU6k7yFSnu5R5OQwTdNBf5cRAAAQAAACAEAAAAgAAAEAIAAABACAAAAQAAACAEAAAAgAAPUOEHUNw3BM3VJTapzvATQC+DX+vQuABgAL43+/BQAqAzwYf+4MoCLA3sbvCmCP43cDsNfxuwBYGf99fgZAJYCV8S/35wBUAHh2fAAVALaMDyAYYOv4AAIBcsYHEASQOz6AAICS8QEUApSOD6AAIGJ8AJkAUeMDyChyfAB5ANeo8QHkAYwLAC8A2gCcFwA+cxAA5B3CYQgA8j9DQxAAlP2IFSMAKACIQABQCFCKACAAoAQBQBBALgKAQIAcBADBAFsRAFQA2IIAoBLAswgAKgKsIHykjgAqA6wg3P4zQjcAe0XoCmCPCN0BrCBcATQAeIAwAmgEsIBwAtAQ4AfhlHpLvTqEBQCAAAAQAAACAEAAAAAwAgAAAgBAAAAIAAABACAAAAQAgAB03hdbUla5txrAJQAAAABJRU5ErkJggg==) -32px 50% no-repeat; } .column-1 .facets { overflow: hidden; } #main .column-2 .head br.clear { width: 0; height: 0; }