/*
 * Minek's Audio Amplifier Workshop
 * Deliberately styled after practical personal web pages of the 1990s.
 * No CSS framework, no web fonts and no JavaScript dependency.
 */

HTML, BODY {
  margin: 0;
  padding: 0;
  background: #c0c0c0;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.35;
}

* { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }

BODY {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px;
}

A:link { color: #0000ee; text-decoration: underline; }
A:visited { color: #551a8b; text-decoration: underline; }
A:active { color: #ff0000; }

H1 { margin: 4px 0; }
H2 { margin-top: 24px; border-bottom: 2px groove #ffffff; }

.masthead, .title-box {
  background: #000080;
  color: #ffffff;
  border: 3px outset #dddddd;
}

.welcome, .info-table, .project-table, .file-table {
  background: #eeeeee;
  border-color: #ffffff #505050 #505050 #ffffff;
  max-width: 100%;
}

.project-table TD, .file-table TD, .file-table TH, .info-table TD, .info-table TH {
  border-color: #ffffff #808080 #808080 #ffffff;
}

.project-table P { margin: 7px 0; }
.project-table TR:nth-child(even) { background: #e2e2e2; }

.index-thumb {
  max-width: 150px;
  max-height: 115px;
  border: 2px inset #eeeeee;
  background: #ffffff;
}

.no-photo {
  width: 140px;
  padding: 35px 0;
  background: #000000;
  color: #00ff00;
}

.notice, .warning {
  margin: 14px 0;
  padding: 9px;
  background: #ffffcc;
  border: 2px inset #ffffff;
}

.warning { background: #ffffff; }

.gallery-table { table-layout: fixed; }
.thumb-cell { background: #d8d8d8; border: 2px inset #eeeeee; overflow-wrap: anywhere; }
.thumbnail { max-width: 100%; height: 125px; object-fit: contain; background: #ffffff; border: 1px solid #000000; }

.file-table { margin-bottom: 18px; table-layout: fixed; }
.file-table TD:first-child { overflow-wrap: anywhere; }
.file-table TD:last-child, .file-table TH:last-child { width: 110px; }

TT { background: #eeeeee; padding: 1px 3px; }

@media (max-width: 700px) {
  BODY { padding: 5px; }
  .masthead, .welcome, .project-table, .info-table, .file-table { width: 100% !important; table-layout: fixed; }
  .masthead, .title-box, .welcome, .project-table,
  .masthead TBODY, .title-box TBODY, .welcome TBODY, .project-table TBODY,
  .masthead TR, .title-box TR, .welcome TR, .project-table TR {
    display: block;
    width: 100% !important;
  }
  .masthead TD, .welcome TD { display: block; width: auto !important; text-align: left !important; }
  .project-table TR, .project-table TD { display: block; width: auto !important; }
  .project-table .index-picture { width: auto !important; }
  .index-thumb { max-width: 150px; }
  TD, TH { overflow-wrap: anywhere; }
  .gallery-table, .gallery-table TBODY, .gallery-table TR { display: block; }
  .gallery-table TD { display: inline-block; width: 43% !important; vertical-align: top; }
  .thumbnail { height: 100px; }
}