/* This file is (C) Captain ALM Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License */ *{ margin: 0; padding: 0; box-sizing: border-box; } #st{ position: absolute; left: -1080px; top: -1080px; font-size: 1em; visibility: hidden; white-space: nowrap; } main{ display: block; padding-top: 70px; padding-left: 6px; } .no-dec{ text-decoration: none; } .no-lst-style{ list-style: none; } .centered{ text-align: center; } .content, .content > *{ word-break: break-word; -ms-word-wrap: break-word; word-wrap: break-word; } .content > p, .content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6{ margin-top: 0.5em; margin-bottom: 0.5em; } .header{ position: fixed; top: 0; width: 100%; z-index: 100; border-style: solid; border-width: 0 0 2px; } .home-button, .sort-button{ display: inline-block; width: 84px; height: 66px; overflow: hidden; text-align: center; } .sort-button{ cursor: pointer; } .home-button > div, .sort-button > div{ display: inline; font-size: 48px; padding: 10px; vertical-align: middle; } .nav{ width: 100%; height: 100%; overflow: hidden; max-height: 0; } .vnav{ max-height: none; top: 0; position: relative; float: right; width: auto; height: 100%; overflow: hidden; } .so-pane{ display: none; overflow: hidden; position: fixed; max-height: 0; } .so-pane > form > div{ display: table-row; background-color: transparent; box-sizing: inherit; max-width: 100%; width: 100%; } .so-pane > form > div > div, .so-pane > form > div > span{ background-color: transparent; box-sizing: inherit; padding: 2px; text-align: center; vertical-align: middle; } .so-pane > form > div > div{ display: table-cell; max-width: 50%; width: 50%; } .so-pane > form > div > span{ display: block; max-width: 100%; width: 100%; } .so-pane-full{ display: table-caption !important; caption-side: bottom; } .so-pane > form > div > * > *{ max-width: 100%; width: 100%; vertical-align: middle; font-size: 16px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .so-pane > form > div > div > *{ text-align: left; } .so-pane > form > div > div > label{ background-color: transparent; text-align: center; } .nav-menu, .sort-menu{ display: none; } .menu a, .vmenu a{ display: block; } .menu a, .vmenu a, #st{ padding: 24px 16px; font-weight: bold; } .vmenu li{ float: left; } .vmenu a:hover{ background-color: transparent; } .hmb{ cursor: pointer; float: right; background-color: transparent; padding: 32px 20px; } .hmb-line{ display: block; height: 2px; position: relative; width: 24px; } .hmb-line::before, .hmb-line::after{ content: ''; display: block; height: 100%; position: absolute; transition: all .1s ease-out; width: 100%; } .hmb-line::before{ top: 5px; } .hmb-line::after{ top: -5px; } .nav-menu:checked ~ #nav, .nav-open{ max-height: 100%; } .nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{ background: transparent; } .nav-menu:checked ~ .hmb .hmb-line::before, .nav-open-hmb .hmb-line::before{ transform: rotate(-45deg); top:0; } .nav-menu:checked ~ .hmb .hmb-line::after, .nav-open-hmb .hmb-line::after{ transform: rotate(45deg); top:0; } .sort-menu:checked ~ .so-pane, .so-pane-open{ display: block; z-index: 101; box-sizing: content-box; position: fixed; text-align: center; top: 70px; left: 20px; max-height: 100%; width: 230px; height: auto; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding: 4px; border-style: solid; border-width: 0 2px 2px; overflow: hidden; } .sort-menu:checked ~ .so-pane > form, .so-pane-open > form{ display: table; box-sizing: inherit; } .main-box > div, footer{ max-width: 100%; margin: 3px 0; padding: 2px; box-sizing: content-box; } .item-table{ display: table; box-sizing: content-box; background-color: transparent; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; border-width: 1px; border-style: solid; } .flex-col{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-content: center; align-content: center; max-width: 100%; width: 100%; overflow: hidden; } .item-table > div{ display: table-row; box-sizing: inherit; max-width: 100%; width: 100%; } .flex-row, .item-table > div{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; max-width: 100%; width: 100%; overflow: hidden; } .item-table > div > div > div{ padding: 4px; } .item-table-caption, .so-pane-caption{ display: table-caption !important; caption-side: bottom; } .item-table-full, .item-table-360, .item-table-caption, .so-pane-caption{ background-color: transparent; box-sizing: inherit; } .item-table-full{ display: table-cell; vertical-align: top; width: 100%; } .item-table-360{ display: table-cell; vertical-align: middle; max-width: 360px; width: 360px; overflow: hidden; text-align: center; } .image-box > a{ border-style: solid; border-width: 1px; margin: 2px; } @media (min-width: 600px){ .main-box > div{ padding: 12px; } footer{ padding: 4px; } .item-table > div{ -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .item-table-full{ max-width: -webkit-calc(100% - 361px); max-width: -moz-calc(100% - 361px); max-width: calc(100% - 361px); width: -webkit-calc(100% - 361px); width: -moz-calc(100% - 361px); width: calc(100% - 361px); } .image-box > a{ border-width: 4px; margin: 10px; } } @media (min-width: 680px){ .nav{ max-height: none; top: 0; position: relative; float: right; width: auto; } .vnav{ display: none; } .menu li{ float: left; } .menu a:hover{ background-color: transparent; } .hmb{ display: none; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .item-table-full, .item-table-360 { display: block !important; } .item-table-caption{ display: block !important; } }