$max-width: 800px !default
$pad-min: 8.5% !default

header[role=banner]
  h1
    font-size: 3.43em
    line-height: 0
    color: white
    margin: 0.52em 0 0.42em
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
    span
      position: absolute
      right: 100%

article img
  max-width: 100%
  height: auto

article img.left
  float: left
  margin-right: 1em

article img.right
  float: right
  margin-left: 1em

#content, hgroup, footer
  padding: 0 $pad-min
  margin: 0 auto
  max-width: $max-width

nav[role=navigation]
  font-size: 1em

@media only screen and (min-width: 450px)
  body
    font-size: 110%
  header[role=banner] h1 img
    height: 50px

@media only screen and (min-width: 650px)
  body
    font-size: 125%
  header[role=banner] h1 img
    height: 60px

@media only screen and (min-width: 768px)
  body
    font-size: 135%
  header[role=banner] h1 img
    height: 80px

@media only screen and (min-width: 892px)
  body
    font-size: 145%