/* Area setup */
div.sched * {
    position: relative; box-sizing: border-box; overflow: visible;
    z-index: 5; margin: 0; text-align: center;
}
div.sched { width: 100%; }
div.sched + div.sched { margin-top: 1em; }
div.appt { overflow: hidden }

/* Header area layout, giving the day of the week and date.  Also contains
   some appoint specs that are made together for convienence and
   consistency. */
div.header, div.dategroup, div.schedcols, div.apptgroup, div.datehdr {
    vertical-align: top; 
}
/* div.dotw, div.date { text-align: center; } */
div.dayhdr, div.dategroup, div.datehdr, div.timecol, div.apptgroup,
div.apptcol { display: inline-block; }
div.dayhdr, div.timecol { height: 100%; width: 5em; }
div.dategroup, div.apptgroup { height: 100%; width: calc(100% - 5em); }
div.datehdr, div.apptcol { width: 20% }
div.dotw, div.date, div.comment, div.time, div.appt {
    width: 100%; padding-left: 0.25em; padding-right: 0.25em;
}

/* Time area layout, containing the schedule information itself, starting
      	 with the time column, then the appointments. */
div.time, div.appt { position: absolute; left: 0; padding-right: 0.5em; }
div.time { text-align: right; }
div.schedcols { height: 30em; }
div.appt:hover { z-index: 10; overflow: visible; }
div.timecol, div.apptcol { height: 100%; }

/* Rules. */
div.header { border-bottom: 1pt solid blue; }
div.timecol, div.apptcol { border-right: 1px solid blue; }

/* Colors. */
div.dotw, div.date { background-color: #ccffcc; }
div.comment { color: green; font-style: italic; }
div.appt {
    background-color: #dedeee;
    border-top: 1px solid blue; border-bottom: 1px solid blue;
}

/* Appointment appearance. */
div.appt:hover { overflow: visible; background-color: #cecedd;; }
div.appttime { font-size: 80%; }
/* div.appt:hover div.appttime { visibility: visible; } */
span.exam { color: red; }