/* Pretty much always, whether I need it or not. */
* { box-sizing: border-box; }
h1,h2 { text-align: center; }
h1 { font-family: sans-serif; }
/* Whole area */
#box {
width: 96%;
margin-left: 2%;
margin-right: 2%;
}
/* Position prev and next controls. */
#ctls { position: relative; }
#ctls div:last-child {
position: absolute;
right: 0; top: 0;
}
/* Appearance styles for controls. */
#prev, #next {
cursor: pointer;
font-style: italic;
font-weight: bold;
}
#prev:hover, #next:hover { text-decoration: underline; }
/* Styling a week, and the divs for days. If I had any sense, I'd probably
use flex. */
.week { margin: 0; height: 12vh; }
.week div {
display: inline-block;
margin: 0;
height: 12vh;
width: 14.28%;
border-bottom: 1pt solid black;
border-right: 1pt solid black;
vertical-align: top;
text-align: right;
padding-right: 0.5em;
font-size: 110%;
}
/* Grid is the day boxes and also the row of day of the week names at top. */
#grid { width: 100%; }
#dlab h2 { display: inline-block; width: 14.28%; font-size: 90%; }
.week div:first-child { border-left: 1pt solid black; }
#w1 div { border-top: 1pt solid black; }
/* Not used in the HTML. Added by js to make unwanted rows disappear */
.hidden { display: none; }