table { page-break-inside: avoid;
}

/* styles for the list pages */
table.listtable {
    margin-left:auto;
    margin-right:auto;
    border-collapse: separate;
    border-spacing: 2px;
}

table.listtable th {
    padding-left:4px;
}

table.listtable thead {
    background-color: #ccc;
}

table.listtable td {
    vertical-align:top;
    padding: 5px;
}

span.list_description {
  font-style: italic;
}
span.list_reading {
}
span.list_materials {
}

/* Each month in the full html table is a table.monthtable */
table.monthtable {
    table-layout:fixed;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 32px;       /* breathing room between months */
    border-collapse:collapse;
    /* background-color:#f8f8f8; */
}

table.monthtable td {
    vertical-align:top;
    border: 1px solid #888;
}

/* These control the general properties of an individual date entry. */

/* Month name banner above each monthtable. The React renderer emits
   <th class="month-header"> spanning every weekday column; this rule
   turns that into a prominent centered banner. No bottom border so
   it reads as a heading sitting above the table rather than the
   table's first row. */
th.month-header {
  text-align: center;
  font-size: 1.75em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a2540;
  padding: 18px 0 14px;
  border: 0;
  background: transparent;
}

/* Weekday header row (Monday, Tuesday, ...). Border matches the
   1px solid cells below so the table reads as one continuous grid. */
th.day-header {
  text-align: center;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  color: #4a5568;
  padding: 6px 0;
  background-color: #f5f5f5;
  border: 1px solid #888;
}

/* Legacy selectors retained for older generated pages. */
td.monthtd {
  text-align:center;
  font-size:large;
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
  background-repeat: repeat-x;
}

td.daytd {
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
  background-repeat: repeat-x;
  width:100%;
  text-align:center;
}

/* An entry that has something in it */
td.eventtd {
  font-size:75%;
  letter-spacing:-0.5px;
}

/* An entry not during the quarter */
td.notinquarter {
    background-color:LightGray;
}

/* Highlights today's entry in the calendar */
table.monthtable td.today {
    border-width : 5px 5px 5px 5px;
    border-color : SkyBlue;
    marker : 1;
}

/* The date label */
span.datespan {
  font-size: medium;
  float:right;
  margin-right:5px;
  color:DimGray;
}


/* these control the styles of the entries inside
   an individual date entry. The span's are intended
   to control font styles.  The div's are intended
   for properties applying to the entire entry.
*/

span.summary{
}
span.description {
  font-style: italic;
}
span.reading {
}
span.materials {
}
/* Room number is useful but secondary to the topic; ease it back. */
span.location {
  color: #555;
  font-size: 92%;
}
span.location a {
  color: inherit;
}

/* Event-cell links (e.g. "HW1 due") default to the browser's blue, which is
   low-contrast on the pale event backgrounds : notably the homework purple.
   Use a dark, readable color that works on every event color; keep the
   underline for affordance. Location links keep inheriting (rule above). */
div.lecture a, div.section a, div.exam a, div.exercise a,
div.homework a, div.oh a, div.holiday a {
  color: #1a2540;
  text-decoration: underline;
}
div.lecture a:hover, div.section a:hover, div.exam a:hover,
div.exercise a:hover, div.homework a:hover, div.oh a:hover,
div.holiday a:hover {
  color: #000;
}

/* Per-type event coloring. Each event div gets a soft flat background so the
   seven event types are distinguishable at a glance even in a dense month
   grid. The shared rule handles spacing + line-height; one rule per type
   sets the color. */
div.lecture, div.section, div.exam, div.exercise, div.homework,
div.oh, div.holiday {
  line-height: 1.3;
  padding: 4px;
  margin: 2px;
}

div.lecture  { background: #c4e3f3; }  /* blue   */
div.section  { background: #d0e9c6; }  /* green  */
div.exam     { background: #ebcccc; }  /* red    */
div.homework { background: #d6c9ee; }  /* purple */
div.exercise { background: #f9d9b8; }  /* orange */
div.oh       { background: #faf2cc; }  /* yellow */
div.holiday  { background: #e8e8e8; }  /* gray   */

div.lab {
    background-color:Peru;
    padding: 4px;
    margin:  2px;
}

div.other {
    background-color:Plum;
/*    background: -moz-linear-gradient(top, Plum, White);    */
    padding: 4px;
    margin:  2px;
}


@media print {
  TABLE, IMG { page-break-during: avoid }
}