@font-face {
  font-family: AvantGarde;
  src: url('Fonts/avantgarde-book-webfont.eot');
  src: url('Fonts/avantgarde-book-webfont.eot?#iefix') format('embedded-opentype'),
    url('Fonts/avantgarde-book-webfont.woff') format('woff');
  }

html { border: 0; margin: 0; padding: 0; font-size: 16px; }
body { border: 0; margin: 8px; padding: 0; 
  font-family: AvantGarde, Arial, Verdana, 'Bitstream Vera', sans-serif;
  font-size: 1.0em;
  background-color: white; color: #040404; }

#maincontainer {
  background-color: #fffaf0;
  min-height: 500px;
  border: 3px solid white;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(40, 10, 10, 0.7);
  box-shadow: 3px 3px 5px 0px rgba(40, 10, 10, 0.7);
  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ccbbbb, Strength=4, Direction=135),
	  progid:DXImageTransform.Microsoft.Shadow(Color=#eedddd, Strength=2, Direction=315);
  margin: 0 auto;
  margin: auto;
  top: 0px;
  left: 0px;
  position: relative; }
#watermark {
  position: absolute; left: -3px; bottom: -3px;
  width: 150px; height: 150px; overflow: hidden; }
#watermark > div {
  position: absolute; left: 0; bottom: 0;
  width: 100px; height: 100px;
  background-color: rgba(200,200,200,0.5);
  box-shadow: 0 0 1px 0px rgba(200,200,200,0.5);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg); }
#logo {
  top: 5px; right: 5px; width: 12.5em; height: 4.8125em;
  background-image: url(ingenuine_2016.png);
  background-size: cover;
  position: absolute; }
#decoline {
  left: 0; right: 0; top: 100px; height: 20px;
  border-top: 1px solid rgba(182, 185, 181, 0.7);
  border-bottom: 1px solid rgba(182, 185, 181, 0.7);
  background:  rgba(205, 205, 205, 0.7);
  background: -webkit-linear-gradient(to bottom, rgba(230,230,230,0.7) 0%, rgba(205,205,205,0.7) 100% );
  background: linear-gradient(to bottom, rgba(230,230,230,0.7) 0%, rgba(205,205,205,0.7) 100% );
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B3E3E3E3', EndColorStr='#B3CDCDCD');
  position: absolute; }
#decolineshadow {
  left: 0; right: 0; top: 121px; height: 7px;
  background: rgba(40, 10, 10, 0.1);
  background: -webkit-linear-gradient(to bottom, rgba(40, 10, 10, 0.3) 0%, rgba(40, 10, 10, 0.0) 100% );
  background: linear-gradient(to bottom, rgba(40, 10, 10, 0.3) 0%, rgba(40, 10, 10, 0.0) 100% );
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4D280A0A', EndColorStr='#00280A0A');
  position: absolute; }
#topspacer {
  height: 113px; }
#bottomspacer {
  height: 50px;
  }

.topic {
  position: relative;
  display: inline-block;
  background-color: white;
  padding: 10px;
  margin: 10px 5%;
  width: 90%;
  -webkit-box-shadow: 1px 2px 4px -2px rgba(25, 25, 25, 0.7);
  box-shadow: 1px 2px 4px -2px rgba(25, 25, 25, 0.7);
  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=4, Direction=135),
	  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=2, Direction=315);
  transition: background-color 1s ease-in-out 0s;
  box-sizing: border-box;
  }
.topic:hover {
  background-color: rgba(190,250,10,0.2);
  }
.topic > img {
  float: left;
  padding: 0.75em 0.75em 0.75em 0px;
  }
h1,h2,.topic .head {
  font-weight: bold;
  font-size: large;
  margin: 0;
  }
.topic .subhead {
  margin-bottom: 0.5em;
  font-size: small;
  }
.topic .foot {
  padding-top: 0.5em;
  text-align: right;
  font-style: italic;
  font-size: small;
  }

div.imprint {
  width: 100%;
  text-align: center;
  }
div.imprint > pre {
  padding-left: 10px;
  padding-right: 10px;
  border: 0px solid red;
  text-align: left;
  display: inline-block;
  margin: 2em auto;
  font-size: 0.8em;
  }


@media (max-width: 320px) {
  #maincontainer { min-width: 210px; margin: 0; width: 100%; left: -3px; }
  }
@media (min-width: 321px) {
  #maincontainer { width: 95%; }
  }
@media (max-width: 500px) {
  .topic { max-width: 100%; padding: 5px; width: 95%; margin: 10px 2.5%; }
  .topic > img { float: none; display: block; margin: 0 auto; padding: 1em 0 1em 0; border: 0px solid red; }
  div.imprint > pre { padding: 0; }
  .extratext { display: none; }
  }
@media (min-width: 500px) {
  #maincontainer { width: 90%; }
  .topic { margin: 10px 5%; }
  }
@media (min-width: 680px) {
  div.imprint > pre { margin-top: 0; margin-bottom: 0; padding: 0; display: inline-block; border: 0px solid green; }
  div.imprint > pre:nth-child(1) { margin-bottom: 0em; margin-right: 2em; }
  div.imprint > pre:nth-child(2) { margin-left: 2em; }
  }
@media (min-width: 1000px) {
  #maincontainer { width: 80%; }
  }