html, body { position: relative; width: 100%; height: 100%; } body { color: #333; margin: 0; padding: 8px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } a { color: rgb(0,100,200); text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: rgb(0,80,160); } input, button, select, textarea { font-family: inherit; font-size: inherit; -webkit-padding: 0.4em 0; padding: 0.4em; margin: 0 0 0.5em 0; box-sizing: border-box; border: 1px solid #ccc; border-radius: 2px; } input:disabled { color: #ccc; } button { color: #333; background-color: #f4f4f4; outline: none; } button:disabled { color: #999; } .button { color: #333; background-color: #f4f4f4; border: 1px solid lightgrey; padding: 0.2em 0.4em; grid-column: 2/3; margin-right: 0.2rem; } button:not(:disabled):active { background-color: #ddd; } button:focus { border-color: #666; } /* custom part */ .formgrid { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem; margin-top: 1rem; } #sandpoints { width: 80%; margin-left: 1rem; margin-top: 1rem; } label, .filepath { grid-column: 1/2; text-transform: capitalize; } input, button, textarea, .selecttier, .relpath { grid-column: 2/3; } textarea { height: 10rem; } .hasinput { line-height: 0.2rem; border: 0px; padding: 0px; margin: 0px; font-weight: bold; } .hasinput:focus { outline: none; } .tierline { display: flex; align-items: baseline; } .tiertitle { font-style: italic; } .buttons { display: flex; margin-left: auto; padding-left: 0.2rem; } select { align-self: start; border: 0; padding: 0.1rem; } .selecttier { margin-top: 0.5rem; } .buttons button { border: solid #999 1px; padding: 0; padding-left: 0.1rem; padding-right: 0.1rem; margin: 1px; } .filepath { font-size: large; font-style: italic; margin-bottom: 1rem; } .relpath { font-size: large; font-weight: bold; } .tierbox, #selecthas { margin-top: 0.5rem; } .fmHidden { display: none; } .fmShown { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem; padding-bottom: 1rem; margin-bottom: 0.5rem; } .fmCollapse, .fmExpand { padding-top: 0.5rem; margin-top: 0.5rem; padding-bottom: 0.5rem; } .fmCollapse::before { margin-right: 0.3rem; content: "⇲"; } .fmExpand::before { margin-right: 0.3rem; content: "⇱"; } #fmicon, #frontmatter, input.hasinput { background-color: #ffccbc; } #newtier { display: none; } .news { grid-column: 2/3; }