body {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  opacity: 1.0;
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
}

#wrapper {
  margin: 2em auto 0 auto;
  width: 60em;
  max-width: 1400px;
  padding: 1em;
  #box-shadow: 4px 4px 8px gray;
}

#wrapper > h1 {
  margin-top: 0px;
}

h1 img {
 border-radius: 50%;
 border: 1px solid white;
}

h1 .logo {
 vertical-align:middle;
 margin-right: 0.5em;
 display: inline;
 padding-top: 24px;
}

h1 img {
 width: 64px;
 height: 64px;
}

pre > code {
  width: 90%;
}

p.subtitle {
  margin-bottom: 0;
  padding-bottom: 0;
}

.xmllink, .htmllink {
  width: 3em;
}


@media screen and (max-width: 60em) {
  #wrapper {
    margin: 1em 0 0 0;
    width: 100%;
    padding: 0em;
    box-shadow: none;
  }
  h1 .logo {
    width: 100%;
    display: block;
    margin: 0 auto;
    text-align: center;
  }

  table {
    width: 100%;
  }

  p.subtitle {
      width: 100%;
      text-align: center;
      margin-left: 0;
      padding-left: 0;
      margin-right: 0;
      padding-right: 0;
  }

  h1,h2,h4, hr, ul, .videowrapper {
      margin-left: 0;
      padding-left: 0;
      margin-right: 0;
      padding-right: 0;
      width: 100%;
      text-align: center;
  }

  li > h3 {
    width: auto;
  }

  frame {
    margin: 0 auto;
  }

  p {
    padding-left: 5%;
    padding-right: 5%;
  }

  pre > code {
    width: 80%;
  }
}

h1 a {
  text-decoration: none;
}


@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}