::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-thumb { border: 4px solid transparent; } ::-webkit-scrollbar, ::-webkit-scrollbar-track-piece { box-shadow: 0 0 0 1px black inset; } ::-webkit-scrollbar, ::-webkit-scrollbar-track-piece { border-radius: 8px; width: 16px; height: 16px; } ::-webkit-scrollbar, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner, ::-webkit-resizer { background: white; } ::-webkit-scrollbar-thumb:vertical { border-top-width: 6px; border-bottom-width: 6px; box-shadow: -1px 0 0 0 black inset, 1px 0 0 0 black inset, 0 0 0 2px white inset, 0 0 0 6px black inset; } ::-webkit-scrollbar-thumb:horizontal { border-left-width: 6px; border-right-width: 6px; box-shadow: 0 -1px 0 0 black inset, 0 1px 0 0 black inset, 0 0 0 2px white inset, 0 0 0 6px black inset; }* { text-align: center; font-family: sans-serif; padding: 0; margin: 0; } a { text-decoration: none; color: inherit; } .home-box { padding: 1px; border-radius: .25em; border: 1px solid; margin-bottom: 2px; } table { width: 100%; text-align: center; border-collapse: collapse; } pre { text-align: left; white-space: pre-wrap; padding-left: 1em; } pre a { color: royalblue; } #main { display: flex; flex-flow: row nowrap; } #players { flex: 15; font-size: 75%; display: flex; flex-flow: column wrap; justify-content: flex-start; align-content: center; position: -webkit-sticky; position: sticky; top: 20px; } .player-box { border-radius: .25em; border-style: solid; border-width: 2px; margin: 0 1px 2px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; align-content: center; box-shadow: 0 0 1px 1px silver; } .color-box { align-self: stretch; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; align-content: center; color: white; font-size: 80%; text-shadow: 0px 0px 3px black; } #form { flex: 85; } #tabs { display: flex; } .tab { background: black; color: white; border: inset silver; border-radius: 1em 1em 0 0; border-width: 2px 2px 0; padding: 8px 8px 0; margin: 0 -4px; } .tab:first-child { margin-left: 0; } .tab:last-child { margin-right: 0; } .tab:hover { background: silver; color: black; } .tab.selected { position: static; z-index: 2; background: white; color: black; border: outset black; border-bottom: 2px solid white; margin-bottom: -2px; } .tabbox { display: none; background: white; border: 2px outset black; width: 100%; padding: 0.5em; } table.tabbox:target { display: table; } div.tabbox:target { display: block; } .group { table-layout: fixed; border: 2px outset black; } select { text-align: center; margin-right: 1em; } .double { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; align-content: center; padding: 6px 2px; } .double .player-box, .double select { flex: 1; min-width: 160px; } select:not(.home) { max-width: calc(100% - 2em); } .cut { border: dashed #aaaaaa; border-width: 2px 0; } .group-head .player-box { margin: 1em auto 0; max-width: 50%; } legend { margin:0 auto; font-weight: bold; } textarea { width: 100%; height: 6em; text-align: justify; } .wide { width: 75%; }