body { display: flex; flex-direction: column; background-color: white; color: black; margin: 0; min-height: 100vh; } .content, main { display: block; margin: 0 auto; padding: 0 1em; max-width: 1000px; width: 100%; } header { padding: 10px 0px; } header.flavor-test { background-color: #33cc33; } header.flavor-devel { background-color: #cc77cc; } main { padding: 1em; } header .content { display: flex; } header img { height: 60px; } header h1 { margin: auto 20px 0px; color: #222; } #nav-wrapper { position: sticky; top: 0; background-color: #222; border: 1px #222 solid; z-index: 10; } footer { margin-top: auto; } .error { color: red; font-weight: bold; } .okay { color: green; font-weight: bold; } .hint { color: #737373; } span.unknown { font-weight: bold; color: red; } table.data { border-collapse: collapse; margin-top: 2ex; margin-bottom: 2ex; } table.data.full { width: 100%; } table.data tbody tr:hover { background-color: #ddd; } table.data tr td, table.data tr th { border: 1px solid #222; padding: 0.1ex 0.5ex; } table.data.center th, table.data.center td { text-align: center; } table.data thead, table.data tfoot { background-color: #aaa; } table.data thead a, table.data tfoot a { color: rgb(0, 22, 121); } table.data thead th { padding: 0.4ex 0.5ex; } table.data td.sol { background-color: lightgreen; } table.data td.sol a { color: black; } table.data td.sol-warn { background-color: #ffaaaa; } table tr.bonus--1{ color: red; } table tr.bonus-0{ font-weight: bold; } table tr.bonus-1{ color: blue; } nav#main-menu { display: flex; flex-wrap: wrap; } nav#main-menu a, nav#main-menu input[type=submit] { background: none; border: none; margin: 0px; color: white; font-size: 1em; text-align: center; padding: 14px 16px; text-decoration: none; } /* Only the first item with .right class does the margin trick */ nav#main-menu > .right { margin-left: auto; } nav#main-menu > .right ~ .right { margin-left: 0px; } nav#main-menu a:hover:not(.active), nav#main-menu input[type=submit]:hover { cursor: pointer; background-color: #555; color: white; } nav#main-menu a.active { background-color: #ddd; color: black; } .form-group.required .control-label:after { content:"*"; color:red; } .form-frame { padding: 10px; border: 1px #ddd solid; border-radius: 4px 4px; } .checked_toggle input.toggle:checked ~ .checked_hide { display: none; } .checked_toggle input.toggle:not(:checked) ~ .checked_show { display: none; } /* Tabs - source: https://codepen.io/MPDoctor/pen/mpJdYe */ .tabbed { margin: 15px 0px; } .tabbed [type="radio"] { /* hiding the inputs */ display: none; } .tabs { display: flex; align-items: stretch; list-style: none; padding: 0; margin-bottom: 0px; border-bottom: 1px solid #ddd; } .tab > label { display: block; margin-bottom: -1px; padding: 12px 15px; border: 1px solid #ddd; background: #eee; color: #666; font-size: 16px; cursor: pointer; transition: all 0.3s; } .tab:hover label { border-top-color: #333; color: #333; } .tab-content { display: none; margin: 0px; padding: 10px; border: 1px solid #ddd; border-top: 0px; } /* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */ .tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label, .tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label, .tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label, .tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label, .tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label { border-bottom-color: #fff; border-top-color: #999; background: #fff; color: #222; } .tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1), .tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2), .tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3), .tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) { display: block; } /* Icons */ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.ttf?azc5ov') format('truetype'), url('fonts/icomoon.woff?azc5ov') format('woff'); font-weight: normal; font-style: normal; font-display: block; } .icon { /* Use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better font rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Collapsible */ .collapsible { position: relative; } .collapsible input[type="checkbox"].toggle { position: absolute; top: 0; left: 0; opacity: 0; } .collapsible label.toggle { cursor: pointer; margin-left: 15px; } .collapsible label.toggle::before { position: absolute; content: ""; width: 0; height: 0; left: 0px; border-left: 8px solid black; border-top: 8px solid transparent; border-bottom: 8px solid transparent; transition: 0.5s ease; } .collapsible input[type="checkbox"].toggle:checked ~ label.toggle::before { transform: rotate(90deg); } .collapsible .collapsible-inner { max-height: 0; overflow-y: hidden; transition: 0.5s ease; } .collapsible input[type="checkbox"].toggle:checked ~ .collapsible-inner { max-height: 100vh; }