div#mysite {
  margin: 0 auto;
  padding: 0;
  border-style: none;
/*  background-color: MistyRose; */
}



header {
  clear: both;
  margin: 1rem auto;
  background-color: #ddd;
  box-shadow: 0 0 0.4rem rgba(0,0,0,0.15);
  border-radius: 0.5rem;
}

/* stop header rounded box from collapsing: clearfix */
header:after { 
  content: " ";
  display: block; 
  height: 0; 
  clear: both;
}



header h1 {
  font-size: 2.5rem;
}

header div#tagline {
  font-size: 1rem;
}




div#footer-clear {
  height: 0;
  clear: both;
}

footer {
  font-size: 0.7rem;
  margin: 2rem auto 1rem auto;
  background-color: #efefef;
  box-shadow: 0 0 0.4rem rgba(0,0,0,0.15);
  border-radius: 0.5rem;
  text-align: center;
}


footer span.valid-xhtml {
  padding: 0 0 0 1rem;
}

footer span.valid-css {
  padding: 0 1rem 0 1rem;
}

footer span.impressum {
  padding: 0 1rem 0 1rem;
}





div#specials {
  margin: 0 auto 1rem auto;
  padding: 0.5rem;
  box-shadow: 0 0 0.2rem rgba(0,0,0,0.15);
  border-radius: 0.3rem;
}



article {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin: 0 0 1rem 0;
  border-radius: 0.7rem;
}

article h1 {
  margin: 0;
  font-size: 1rem;
  padding: 0.2rem 0 0.4rem 0.4rem;
}

article p {
  text-align: justify;
}


article figure {
  width: 100%;
  margin: 0;
  float: left;
}

article figure img {
  display: block;
  width: 100%;
}



dl.references {
  margin: 0.8em 0 2em 0;
}

dl.references dt {
  display: block;
  vertical-align: top;
  margin: 0;
  padding: 0 1ex 0 0;
  float: left;
  clear: both;
}

dl.references dd {
  display: block;
  vertical-align: top;
  padding: 0 0 0.5em 2em;
}

dl.references + * {
  clear: both;
}




/* use em instaed of rem in media queries for chrome bug */
/* at top level em = rem anyway */

/* start of window-width: narrow */
@media only all and (max-width: 40em) {
/* body {background-color: red; } */

/* make header components smaller */


header h1 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

header div#tagline {
  font-size: 0.6rem;
}


}
/* end of window-width: narrow */





/* start of window-width: medium */
@media only all and (min-width: 40em) and (max-width: 60em) {
/* body {background-color: green;} */

article {
  display: inline-block;
  vertical-align: top;
  width: 46%;
  margin-right: 3%;
}


}
/* end of window-width: medium */







/* start of window-width: wide */
@media only all and (min-width: 60em) {
/* body { background-color: orange; } */


div#mysite {
  max-width: 70rem;
}


article {
  display: inline-block;
  vertical-align: top;
  width: 31%;
  margin-right: 2%;
}
/*
  inline-block elements have one space between them,
  if there is whitespace between them in the code.
  1% allows for that space
*/

}
/* end of window-width: wide */




article {
  background-color: #B8C9DB;
}