html { padding:0; margin:0; height:100%; position:relative; }
body { display:flex; flex-direction:column; height:100%; padding:0; margin:0; }
#display { flex:1 1 auto; position:relative; }

body { color:#222; background:#026cb3; padding-top:0em; font-family:sans-serif; }
header, footer { padding:0.5em; background:#ffd600; position:relative; overflow:auto; }
header label, header div, header table, header button { vertical-align:middle; display:inline-block; }
header table { display:inline-table; border-collapse:collapse; box-sizing:border-box; margin-right:2em; }
header table td { font-weight:bold; border:thin solid #e3be37; }
header table td, header table th { text-align:right; padding:0.25em; box-sizing:border-box; }
tr:first-child > th { border:none; }
header table th { font-weight:normal; text-align:left; border-color:transparent; }
input[type='number'] { width:4em; text-align:right; border:thin solid #e3be37; }
button { padding:0.75em 2em; color:#fff; background:#026cb3; border:none; transition:background 0.25s ease-in-out; }
input, button { font:inherit; }
button:hover { background:#048ce3; }
label { display:inline-block; /*padding:0.25em 0.5em;*/ margin:0; }
.input-group { display:block; white-space:nowrap; margin:0 1em 0.5em 0; }
#pattern-controls div > span, label > span { display:inline-block; }
#general-controls { text-align:center; }
.pattern-select-button { padding:12px 32px; height:152px; width:192px; margin:4px; border-radius:4px; max-width:45%; }
.pattern-select-button > img { width:128px; max-width:90%; }
.pattern-select-button:disabled { border:thin solid #e3be37; color:#026cb3; background:transparent; }
#toggle-endstones { border:none; }
#size-display { margin-left:2em; }
#cancel-button { float:left; display:block; }

#logotype { max-height:100%; vertical-align:middle; }

#pattern-controls, #general-controls { position:relative; background:inherit; }

footer > button { vertical-align:middle; }
footer > a { vertical-align:middle; float:right; height:2.5em; display:inline-block; text-decoration:none; color:#026cb3 important; font-weight:bold; }
footer > a:active, footer > a:visited { color:#026cb3; }
footer img { max-height:2.75em; }
