/* -*- coding: utf-8 -*- */
@view-transition {
  navigation: auto;
}
::view-transition-group(*) {
  animation-duration: 0.3s;
}    

:root {
  --main-bg-color: #eee;
  --main-bg-color-subtle-highlight: #ddd;
  --main-txt-color: #333;
  --main-highlight-color: #999;
  --main-spot-color: brown;
  --default-tranisition-time: 0.5s;
}

html {
  color: var(--main-txt-color);
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  letter-spacing: -0.03em;
  line-height: 1.2;
  overflow-y: scroll; /* Work around layout differences for pages with and without scrol bar */
}

body {
  background-color: var(--main-bg-color);
}


* {
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


article {
  max-width: 42em; 
  margin: auto;
}

footer {
  font-size: 75%;
  line-height: 110%;
  margin-top: 20px;
  text-align: center;
}

header {
  background-image:url("../img/CHermann.png");
  background-size: 300px;
  width: 300px;
  height: 70px;
  margin: auto;
}


.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
  margin: 1rem 0px 1rem 0px;
  padding: 0px;
  font-size: 18px;
}

.navigation a, span.navigation-current {
  padding: 0px .4rem 0px .4rem;
  text-decoration: none;
  margin: 0px;
}


p {
  text-align: left;
  margin-top: 0.25em;
  font-size: 100%;
}

h1, h2, h3, h4, h5 {
  font-weight: lighter;
  margin: 0.5em 0 0 0;
}

h1 {
  font-size: 250%;
}


a        { text-decoration: none; transition: color var(--default-tranisition-time); }
a:link   { color: var(--main-highlight-color); }
a:active { color: var(--main-spot-color); }
a:visited{ color: var(--main-highlight-color); }
a:hover  { color: var(--main-spot-color); }
a:focus  { outline: none; }

a[target="_blank"]:before {
  content: url(../img/external_link_new_window.gif);
}

a.textlink:link   { color: var(--main-txt-color); }
a.textlink:visited{ color: var(--main-txt-color); }
a.textlink:active { color: var(--main-spot-color); }
a.textlink:hover  { color: var(--main-spot-color); }
a.textlink:focus  { outline: var(--main-spot-color); }


table td, table td * {
    vertical-align: top;
}

table {
    width:100%;
    border-collapse:collapse; 
}

/* https://www.textfixer.com/tutorials/highlight-table-row.php */
.hoverTable tr{
  background: var(--main-bg-color);
  transition: background-color var(--default-tranisition-time);
}
.hoverTable tr:hover {
  background-color:var(--main-bg-color-subtle-highlight);
}


p.thumbnails {
  display: flex;
  flex-wrap: wrap;
}

.thumbnails img {
  width: 32px;
  height: 32px; 
}

p.flyer {
  margin-top:0.83rem; 
  padding-right:1rem;
}

.flyer img {
  width: 64px;
  height: 64px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  flex: 1 1 30%;
  border-bottom: 1px solid black;
  margin: 10px;
  min-width: 220px;
}

.card img {
  width: 100%;
}

.card {
  background: var(--main-bg-color);
  transition: background-color var(--default-tranisition-time);
}
.card:hover {
  background-color:var(--main-bg-color-subtle-highlight);
}


.catalogue {
}

.catalogue img {
  width: 96vw;
  max-width: 500px;
  position: relative;
}

a[target="_blank"].imagelink:before {
  position:relative;
  bottom: 5px;
  left: 15px;
  z-index: 1;
  margin-left: -14px;
}




@media screen and (min-width: 58em) {
  html {
    font-size: 14pt;
  }
  article { 
  }
  header {
    background-size: 500px;
    width: 500px;
    height: 120px;
    margin: auto;
  }
  .navigation {
    font-size: 140%;
  }
  .navigation a, span.navigation-current {
    padding: 0px 1.25rem 0px 1.25rem;
  }
  
  .thumbnails img{
    width: 64px;
    height: 64px; 
  }
  .flyer img {
    width: auto;
    height: auto;
  }
  
  img {
    max-width: auto;
  }
}