body {
   xfont-family: sans-serif, Arial;
   Xfont-size: 18px;
   font-family: Verdana, sans-serif;
   background: lightgrey;
   -webkit-text-size-adjust: 100%;
}

A {
  color: #0000FF;
  text-decoration: none;
}

A.slides {
  color: #0000FF;
  text-decoration: none;
  font-weight: bold;
}


A.reading {
  color: green;
  text-decoration: none;
}

.tentative {
  color: gray;
}

A.homework {
  color: red;
  font-weight: bold;
  text-decoration: none;
}

A.reading:hover, A.homework:hover, A.slides:hover, a:hover {
        text-decoration: underline;
}

A.code {
  comment-out-font-family: Monospace;
  font-weight: bold;
  color: darkgreen;
  text-decoration: none;
}

table {
  background: white;
  border: 1pt solid black;
  width: 100%;
  min-width: 100%;
}

table.course-details,
table.syllabus {
  border-collapse: collapse;
  border-spacing: 0;
}

tr.header, td.projectheader, thead {
  border: 0pt solid black;
  border-bottom: 1pt solid black;
  padding-left: 10pt;
  padding-right: 10pt;
  color: white;
  font-weight: bolder;
  background-color: black;
}


td, th {
  border: 0pt solid black;
  border-bottom: 1pt solid black;
  padding-left: 10pt;
  padding-right: 10pt;
}

th[scope="row"] {
  text-align: left;
  vertical-align: top;
}

tr.midterm {
  background-color: #f5c2c7;
}

tr.break {
  background-color: #d3d3d3;
}

tr.course-bg-pink { background-color: #ffc0cb; }
tr.course-bg-gray,
tr.course-bg-grey,
tr.course-bg-lightgray,
tr.course-bg-lightgrey { background-color: #d3d3d3; }
tr.course-bg-lightblue { background-color: #add8e6; }
tr.course-bg-lightyellow { background-color: #ffffe0; }
tr.course-bg-yellow { background-color: #ffff00; }
tr.course-bg-hex-dde293 { background-color: #dde293; }
tr.course-bg-hex-f0f0ff { background-color: #f0f0ff; }

TD.pagemenu {
  color: blue;
  align-text: right;
}

TD.pagemenu-current {
  font-weight: bold;
  color: blue;
  background: white;
}

/* *********************************************************************

  Mobile support. Long slide titles and URLs must wrap rather than push
  the page wide; on a narrow screen the two table layouts used by the
  course pages (course-details and syllabus) stack into blocks.

************************************************************************/
/* break-word, not anywhere: "anywhere" also shrinks a cell's min-content
   width, which squeezes the narrow label column of table.course-details
   and hyphenates its headings mid-word on a wide screen. */
td, th {
  overflow-wrap: break-word;
}

img, iframe {
  max-width: 100%;
}

@media (max-width: 700px) {
  body {
    margin: 0.4rem;
  }

  /* Here the cells are full-width blocks, so the aggressive form is safe
     and is what keeps a long URL from widening the page. */
  td, th {
    overflow-wrap: anywhere;
  }

  /* Unclassed tables in the older course pages: scroll inside the page
     instead of widening it */
  table {
    display: block;
    overflow-x: auto;
    min-width: 0;
  }

  td, th {
    padding-left: 4pt;
    padding-right: 4pt;
  }

  /* course-details: each label sits above its value */
  table.course-details, table.course-details tbody, table.course-details tr,
  table.course-details th, table.course-details td {
    display: block;
    width: auto;
  }

  table.course-details th[scope="row"] {
    border-bottom: 0;
    padding-top: 6pt;
  }

  /* syllabus: each class meeting becomes one block */
  table.syllabus thead {
    display: none;
  }

  table.syllabus, table.syllabus tbody, table.syllabus tr, table.syllabus td {
    display: block;
    width: auto;
  }

  table.syllabus tr {
    border-bottom: 2pt solid black;
    padding: 4pt 0;
  }

  table.syllabus td {
    border-bottom: 0;
    padding: 2pt 6pt;
  }
}