* { margin: 0; padding: 0; }
body { text-align: center; background-color: #eee; font-family: verdana, sans-serif; }
header { width: 800px; margin: 0 auto; padding: 12px; font-size: 24px; text-transform: uppercase; background-color: #fff; border-top: 12px solid #FFB900; border-bottom: 2px solid #ccc; }
h1, h1 a, h1 a:visited { font: bold 32px "helvetica neue", helvetica, sans-serif; text-transform: none; text-decoration: none; color: #000; }
h1 a:hover { text-decoration: underline; }
h1 a:active { color: #333; }
h2 { margin: 0 0 8px -24px; padding: 8px 8px 8px 12px; background-color: #FFEC0F; border-left: 12px solid #FFB900; }
article { width: 800px; margin: 12px auto 0 auto; padding: 12px; text-align: left; font-size: 18px; line-height: 24px; background-color: #fff;  }
section { margin-bottom: 48px; }
p { margin-bottom: 24px; }
code { display: inline; }
pre { display: block; width: 728px; margin: 24px 36px; color: #000; }
.faded { color: #aaa; }
ul { list-style-position: outside; margin-left: 22px; }
ol { list-style-position: outside; margin: 0 0 18px 30px; }
ul li { margin-bottom: 18px; }
ol li { margin-bottom: 6px; }
.screenshot { display: block; text-align: center; margin: 0 auto 24px auto; }

@media print {
  h2 { border: none; }
  a:visited { color: blue; }
  h1 a:visited { color: #000; }
}

@media only screen and (max-device-width: 480px) {
  header { width: 400px; }
  article { width: 400px; }
  pre { width: 328px; whitespace: pre-wrap; }
  .screenshot { max-width: 100%; }
}