/* look-n-feel V2 */ /* Styling for main layout < .outer > < .app > < header /> < main >

<.main-content /> < /main > < footer /> < /app> < /outer> < /body> */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: system-ui, sans-serif; background: var(--light); } /* Outer wrapper — fills the viewport, centres the app */ .outer { min-height: 100vh; background: var(--light); display: flex; align-items: flex-start; justify-content: center; padding: 0.5rem 0.3rem; margin:0; } /* App container — max 50rem, min mobile width */ .app { width: 100%; max-width: 60rem; min-width: 20rem; display: flex; flex-direction: column; min-height: calc(100vh - 1rem); /* -1Rem to allow space top and bottom */ border: 0.06rem solid var(--dark); border-radius: 0.75rem; overflow: hidden; } /* Header — sticky at top, never scrolls */ .app-header { position: sticky; top: 0; z-index: 100; background: var(--darkest); padding: 0 1rem 0 0; height: 3.5rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .app-header .logo { font-size: 1rem; font-weight: 500; background-color:var(--lightest); height:100%; border-bottom:thin var(--darkest) solid; } .app-header .logo img { margin-top:0.3rem; max-height:3rem; height:100%; } .app-header a { font-size: 0.8125rem; color: var(--light); text-decoration: none; cursor: pointer; transition: color 0.15s; margin-left:1rem; } .app-header button { background-color: var(--darkest); border:thin var(--darkest) solid; padding:0.3rem; } .app-header button:hover { border:thin var(--accent1) solid; } .app-header a:hover { color: var(--accent2); } /* Main content — scrolls independently */ .app-main { flex: 1; overflow-y: auto; background: var(--lightest); display:flex; } /* Footer — anchored to bottom when content is short */ .app-footer { background: var(--dark); color: var(--darkest); font-size: 0.75rem; text-align: center; padding: 0.75rem 1.5rem; flex-shrink: 0; border-top: 0.0625rem solid var(--darker); } .app main nav, .popupNav { background-color:var(--lighter); max-width:14rem; min-width:10rem; .menuButton { display:block; width:100%; color:var(--lighter); background-color:var(--dark); margin-bottom:0.1rem; border:none; padding:0.3rem 0.2rem; border-radius: 0; } .menuButton:hover { background-color:var(--accent2); } .menuButton .selected { color:white; font-weight:bolder; } .indent0, .indent1, .indent2 { text-align:left; margin-left:0.2rem; } .indent0 { padding-left:0.1rem; } .indent1 { padding-left:0.6rem; } .indent2 { padding-left:1.1rem; } } .app-main-content { padding:0.3rem; width:100%; } /* All Screens */ /* This block must be positioned ahead of the smallers screen block */ @media screen { html { font-size:16px; } .menuPopupButton, .popupNav { display:none; /* for large screen widths, hide the popup-menu button */ } } /* Smaller screens */ @media screen and (max-width: 700px) { html { font-size: 14px; } .menuPopupButton { display:inline-block; position:absolute; top:0.3rem; right:0.4rem; min-width:2rem; border:none; border-radius:2px; padding:0.3rem; } header { display:block; } h2:first-of-type { margin-top:1rem; /* Make space for the popup menu button above the first heading */ } nav { display:none; } .popupNav { position:absolute; display:block; top:3.5rem; right:-12rem; transition: right 0.5s; color:green; min-height:5rem; min-width:6rem; background-color:var(--accent2); border: thin black solid; } } /* for Menu Item Admin */ .right-aligned-link { float:right; text-decoration:none; color:navy; } .right-aligned-link:hover { color:blue; cursor: pointer; } /*** FORM v2 ***/ .form-v2 { >div { display: flex; flex-wrap:wrap; width: 100%; align-items:baseline; min-height:2rem; } >div>:first-child { width: 8rem; text-align: left; margin-top:0.5rem; } >div>:nth-child(2) { flex: 1; } input[type="checkbox"] { flex:0; align-self:baseline; } input, select { padding: 0.25rem 0.15rem; margin-bottom:0.3rem; } input { max-width:30rem; } textarea { max-width:30rem; height:3.6rem; padding-left:2px; padding-right:2px; } select { max-width:30rem; } button { padding: 0.1rem 0.3rem; } .w4 { min-width:4rem; } .w5 { min-width:5rem; } .w6 { min-width:6rem; } .w7 { min-width:7rem; } .w8 { min-width:8rem; } .w10 { min-width:10rem;} } /* end of Form V2 */ /* Stop bullets lists having negative indents */ ul, ol { list-style-position: inside; /* keeps marker + text aligned together */ } /*** FLEX DIV ***/ .flexDiv { display:flex; width:100%; flex-wrap: wrap; align-items:top; margin-top:0.5rem; } .flexTile { width:48%; min-width:15rem; min-height:4rem; border-width:thin; border-style:solid; border-radius:5px; padding:3px; margin-right:1%; margin-bottom:1%; background-color:var(--lighter); } .flexTile33 { display:inline-block; width:31%; max-width:48%; min-width:15rem; min-height:4rem; border-width:thin; border-style:solid; border-radius:5px; padding:0.8rem; margin-right:1%; margin-bottom:1%; background-color:var(--lighter); } .flexTile33 img { width:100%; } .link { color:var(--accent1); } .link:hover { color:blue; cursor: pointer; }