body { padding-top: 70px; }

/* ---- student images: never enlarged ----
   Output images are shown at their true pixel size (1 image pixel = 1 screen
   pixel, corrected for high-DPI screens by layout.tsx) and only ever SHRUNK to
   fit. Enlarging a small output blurred it (bilinear upsampling), and students
   took the blur for a bug in their code. A tiny image stays tiny; the frame and
   checkerboard make it findable, and a caption gives its size. */
.result-img,
.thumb-img {
  max-width: 100%;
  height: auto;
  padding: 3px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%),
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 1px solid #ccc;
  vertical-align: top;
}
.thumb-img { max-width: 200px; margin: 4px; }
.img-size-note { display: block; font-size: 11px; color: #777; }

/* A diff is available on hover. */
.result-img.hover-diff { cursor: zoom-in; border-color: #337ab7; }
.result-img.hover-diff:hover { border-color: #d9534f; }

.result-meta { font-size: 11px; color: #777; margin: 2px 0 0; }
.result-warn { font-size: 11px; color: #a94442; margin: 2px 0 0; }

/* ---- student section notice ----
   A plain link on Bootstrap's blue alert turns purple once visited, which is
   hard to read on blue. Keep it one dark, underlined color in every state. */
.section-notice a,
.section-notice a:visited,
.section-notice a:hover,
.section-notice a:focus {
  color: #0b2e4f;
  font-weight: bold;
  text-decoration: underline;
}