/* Section pages (courses, connect, research): one heading system, readable prose, and a phone layout.
   Linked after hci-test.css / hci-2013.css with ?v=filemtime so edits show immediately. 2026-10-08. */

body { line-height: 1.45; }

/* Section titles: same look as the headings on the people page */
.sectionTitle, article > h2, section > h2, aside > h2 {
  display: block; font-family: "Gill Sans", Calibri, "Gill Sans MT", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; color: #333;
  border-bottom: 1px solid #ddd; margin: 36px 0 12px; padding: 0 0 5px; }
.sectionTitle a, article > h2 a, section > h2 a, aside > h2 a { color: inherit; }
#rightContent > .sectionTitle:first-child, body > .left > .subsectionTitle:first-of-type,
#resources > article:first-child > h2, #papers > h2:first-child { margin-top: 14px; }

/* Small group labels: "hci program sheets", "note", "i'd like to apply to study hci at stanford" */
.subsectionTitle, .questionSection {
  font-family: "Gill Sans", Calibri, "Gill Sans MT", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: #777;
  margin: 28px 0 4px; padding: 0; }

/* Question and department headings */
.question {
  font-family: "Gill Sans", Calibri, "Gill Sans MT", "Lucida Grande", Lucida, Verdana, sans-serif;
  font-size: 17px; font-weight: 600; color: #222; margin: 22px 0 5px; }
.answer { margin: 0 0 8px; }

/* Bulleted lists in prose (courses text, connect answers); the research paper lists keep their own unbulleted style */
.left ul, .left ol, .answer ul, .answer ol { margin: 6px 0 14px; padding-left: 22px; list-style: disc; }
.left li, .answer li { margin-bottom: 4px; max-width: none; }
hr { margin: 28px 0; }

/* Research page sidebar */
#news { margin-top: 14px; }
#news p { margin: 6px 0 0; font-size: .95em; }

@media (max-width: 767px) {
  body > .left, body > .right, article > .right { float: none; width: auto; max-width: none; padding: 0 14px; box-sizing: border-box; }
  #resources, #news, #papers { float: none; width: auto; margin: 0; padding: 0 14px; box-sizing: border-box; }
  .sectionTitle, article > h2, section > h2, aside > h2 { font-size: 18px; margin-top: 28px; }
  .question { font-size: 16px; }
  /* research: the paper and dissertation tables have no-wrap cells that force the page wider than the screen */
  #resources table, #resources tbody, #resources tr, #resources td, #papers table, #papers tbody, #papers tr, #papers td { display: block; width: auto; max-width: 100%; box-sizing: border-box; }
  #resources .key, #papers .key { white-space: normal; width: auto; text-align: left; padding: 0; }
  #resources td, #papers td { padding: 0 0 6px; }
  #resources img, #papers img { max-width: 100%; height: auto; }
  #resources td.icon, #papers td.icon, #resources .icon, #papers .icon { display: none; }   /* thumbnails stay hidden on phones, as before */
  #resources, #papers { overflow-wrap: anywhere; }
  .sectionAdditional { white-space: normal; }   /* award notes were no-wrap and widened the page */
}