/* 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; }