/* CSS  2018-12-30  Christoph Winkelmann  chw.glaz.ch */
body {
  font-family: Verdana,Tahoma,Lucidasans,sans-serif;
  color: #555555;
  background-color: #DDDDDD;
  margin: 0;
}
.menu {
  width: calc(100% - 2*10px);
  position: fixed;
  top: 0;
  background-color: #DDDDDD;
  padding: 10px;
  padding-top: 0;
}
.content {
  margin-top: 3.6em;
  background-color: #EEEEEE;
  padding: 10px;
}
.bottombar {
  width: calc(100% - 2*10px);
  position: static;
  bottom: 0;
  background-color: #DDDDDD;
  padding: 10px;
}
table {
  border-width: 0;
  border-spacing: 0;
}
tr {
  vertical-align: top;
}
tr.photo {
  vertical-align: middle;
}
td {
  padding: 2px;
}
h1,h2,h3,h4 {
  color: #555555;
  font-weight: bold;
  margin-top: 10px;
}
h1 {
  font-size: 133%;
  margin-bottom: 5px;
}
h2 {
  font-size: 133%;
  margin-bottom: 5px;
}
h3 {
  font-size: 100%;
  margin-bottom: 3px;
}
div.quote {
  font-style: italic;
}
.comm {
  font-size: 83%;
  font-style: italic;
}
div.thumb {
  float: left;
  padding: 12px;
  text-align: center;
  width: 180px;
  height: calc(180px + 2.7em);
  margin-left:    0;
  margin-right:   0;
  margin-top:    12px;
  margin-bottom:  0;
  background-color: #FFFFFF;
}
@media (min-width:  256px) { div.thumb { margin-left: calc((100% -  1*204px)/ 2); } }
@media (min-width:  472px) { div.thumb { margin-left: calc((100% -  2*204px)/ 3); } }
@media (min-width:  688px) { div.thumb { margin-left: calc((100% -  3*204px)/ 4); } }
@media (min-width:  904px) { div.thumb { margin-left: calc((100% -  4*204px)/ 5); } }
@media (min-width: 1120px) { div.thumb { margin-left: calc((100% -  5*204px)/ 6); } }
@media (min-width: 1336px) { div.thumb { margin-left: calc((100% -  6*204px)/ 7); } }
@media (min-width: 1552px) { div.thumb { margin-left: calc((100% -  7*204px)/ 8); } }
@media (min-width: 1768px) { div.thumb { margin-left: calc((100% -  8*204px)/ 9); } }
@media (min-width: 1984px) { div.thumb { margin-left: calc((100% -  9*204px)/10); } }
@media (min-width: 2200px) { div.thumb { margin-left: calc((100% - 10*204px)/11); } }
@media (min-width: 2418px) { div.thumb { margin-left: calc((100% - 11*204px)/12); } }
@media (min-width: 2632px) { div.thumb { margin-left: calc((100% - 12*204px)/13); } }
@media (min-width: 2848px) { div.thumb { margin-left: calc((100% - 13*204px)/14); } }
@media (min-width: 3064px) { div.thumb { margin-left: calc((100% - 14*204px)/15); } }
@media (min-width: 3280px) { div.thumb { margin-left: calc((100% - 15*204px)/16); } }
@media (min-width: 3496px) { div.thumb { margin-left: calc((100% - 16*204px)/17); } }
@media (min-width: 3712px) { div.thumb { margin-left: calc((100% - 17*204px)/18); } }
@media (min-width: 3928px) { div.thumb { margin-left: calc((100% - 18*204px)/19); } }
@media (min-width: 4144px) { div.thumb { margin-left: calc((100% - 19*204px)/20); } }
@media (min-width: 4360px) { div.thumb { margin-left: calc((100% - 20*204px)/21); } }
@media (min-width: 4576px) { div.thumb { margin-left: calc((100% - 21*204px)/22); } }
@media (min-width: 4792px) { div.thumb { margin-left: calc((100% - 22*204px)/23); } }
@media (min-width: 5008px) { div.thumb { margin-left: calc((100% - 23*204px)/24); } }
@media (min-width: 5224px) { div.thumb { margin-left: calc((100% - 24*204px)/25); } }
@media (min-width: 5440px) { div.thumb { margin-left: calc((100% - 25*204px)/26); } }
@media (min-width: 5656px) { div.thumb { margin-left: calc((100% - 26*204px)/27); } }
@media (min-width: 5872px) { div.thumb { margin-left: calc((100% - 27*204px)/28); } }
@media (min-width: 6088px) { div.thumb { margin-left: calc((100% - 28*204px)/29); } }
@media (min-width: 6304px) { div.thumb { margin-left: calc((100% - 29*204px)/30); } }
@media (min-width: 6520px) { div.thumb { margin-left: calc((100% - 30*204px)/31); } }
div.endthumb {
  clear: left;
}
ul {
  margin: 0 0 0 0;
  padding: 0em 1em 0em 1em;
}
li {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}
a:link {
  color: #008090;
  text-decoration: none;
  font-weight: bold;
}
a:visited {
  color: #008090;
  text-decoration: none;
  font-weight: bold;
}
a:active {
  text-decoration: none;
  font-weight: bold;
}
a.an { text-decoration: none; }
@media (min-height: 480px) {
  .menu {
    padding-top: 10px;
  }
  .content {
    margin-top: calc(4.8em + 2*10px);
  }
  .bottombar {
    position: sticky;
  }
  h1 {
    font-size: 175%;
    margin-bottom: 10px;
  }
}