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

  Shared stylesheet for the recent course pages (2019 onwards), linked
  from each as ../course.css?v=N. Bump N in all of them when this changes.

  The look follows Turgut.css so the course pages read as part of the
  site. Pages carry no site navigation (they sit two levels deep).

************************************************************************/
body {
  font-family: serif;
  padding-left: 0.5cm;
  padding-right: 0.5cm;
  padding-top: 0.4cm;
  background-color: white;
  overflow-wrap: break-word;
}

/* :link/:visited, not a bare "a": some pages have a broken <a> with no
   href around ordinary text, which must not turn blue */
a:link, a:visited {
  color: darkblue;
  text-decoration: none;
}

a[href]:hover {
  background: #0000BB;
  color: white;
}

h1 {
  font-family: sans-serif, Arial;
  font-variant: small-caps;
  font-weight: bold;
  margin-top: 0;
  padding-left: 2px;
  padding-right: 2px;
  background-color: #cccccc;
  color: darkblue;
}

h2 {
  font-family: sans-serif, Arial;
  font-size: medium;
  font-weight: bold;
  background-color: #dddddd;
  color: darkblue;
  padding-left: 2px;
  padding-right: 2px;
}

h3 {
  font-family: sans-serif, Arial;
  font-weight: bold;
  font-style: italic;
  color: darkblue;
  padding-left: 2px;
  padding-right: 2px;
}

td {
  vertical-align: top;
  padding: 0.2em 0.4em;
}

html {
  -webkit-text-size-adjust: 100%;
}

img:not([height]) {
  height: auto;
}

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

  Phones. All screen-size dependent rules are here, so the desktop
  rendering is unaffected by them.

************************************************************************/
@media (max-width: 700px) {

  body {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    margin-left: 0;
    margin-right: 0;
  }

  img {
    max-width: 100%;
  }

  h1 {
    font-size: 1.5em;
  }

  ul {
    padding-left: 1.2rem;
  }

  /* Tables stack: every cell becomes a full-width block. The inline
     width="..." attributes are neutralized so they don't fight this. */
  table, thead, tbody, tr, td {
    display: block;
    width: auto !important;
  }

  td {
    overflow-wrap: anywhere;
  }

  /* Syllabus: the label sits above its value */
  table[summary="maintable"] {
    border: 0 !important;
  }

  table[summary="maintable"] td {
    border: 0;
    padding: 0 0.2rem;
  }

  table[summary="maintable"] td:first-child {
    margin-top: 0.8rem;
    padding-top: 0.3rem;
    border-top: 1px solid #cccccc;
  }

  /* Schedule: one block per class meeting, header row hidden */
  table[summary="lecture notes"] thead {
    display: none;
  }

  table[summary="lecture notes"] tr {
    padding: 0.4rem 0;
    border-bottom: 1px solid #cccccc;
  }

  table[summary="lecture notes"] tbody td {
    border: 0;
    padding: 0 0.2rem;
  }

  table[summary="lecture notes"] tbody td:first-child {
    font-weight: bold;
  }

  /* The <br> the cells end with would add a blank line in a block */
  table[summary="lecture notes"] td br:last-child {
    display: none;
  }
}