* { box-sizing: border-box; } body { font-family: sans-serif; max-width: 600px; margin: auto; padding-bottom: 1em; background: #fefefe; } h1, #search { text-align: center; width: 100%; font-weight: bold; } h1 a { text-decoration: none; color: initial; } #results { margin-top: 1em; } .result { background: #eee; padding: 1em; margin: 1em 0; } .result a { text-decoration: none; color: #03d; } .result.hidden { display: none; } #results.showhidden .result.hidden { display: block; } .result.filtered { display: none; } .loc { float: right; font-weight: normal; font-size: 0.8em; } .type { font-size: 0.8em; } h2 { margin: 0; font-size: 20px; } .name { font-weight: normal; } .content { margin-top: 1em; } .note:empty { display: none; } .note { background: #aef; padding: 1em; margin-top: 1em; } .btn { display: block; width: 100%; border: 1px solid; padding: 0.5em; text-decoration: initial; color: initial; font-weight: bold; text-align: center; font-size: 1.5em; margin: 0.5em 0; cursor: pointer; } .btn.green { background: #0a0; color: white; } .btn.red { background: #a00; color: white; } form label { display: block; width: 100%; font-weight: bold; margin-bottom: 0.3em; } form label[for=coords_bl], form label[for=coords_tr], #coords_bl, #coords_tr { display: inline-block; min-width: unset; width: 50%; } input, textarea, select { display: block; width: 100%; max-width: 100%; min-width: 100%; margin: 0 0 1em 0; padding: 0.3em; font-family: monospace; font-size: 1.4em; background: initial; border: 1px solid gray; } input[type=checkbox] { width: initial; display: initial; min-width: initial; } textarea { min-height: 8em; } #plan { position: relative; border: 1px solid black; background: #fff; } #plan img { width: 100%; display: block; } form #plan { margin: 0.3em 0 1em 0; } #grid { position: absolute; pointer-events: none; outline: 2px solid #f00; background: #ff08; } #grid:not([style]) { outline: none; }