body
  margin: 0
  padding: 0
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
  font-size: 0.9em
  line-height: 1.6em

img.lazy
  background: white url("/images/loading.gif") center no-repeat

img
  width: 100%

.nav-header
  padding: 0 15px

.nav-header h1
  padding-top: 15px
  font-size: 20
  margin-bottom: 0
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif
  font-weight: 400
  text-transform: uppercase
  &:hover
    text-decoration: none

.nav-header a.title
  &:hover
    text-decoration: none

.uk-nav-side > li > a
  color: #888

.uk-nav-side > li > a.active
  color: #333
  background: rgba(0, 0, 0, 0.02)

#navigation a.nav-header
  padding: 5px 15px
  font-weight: bold

#navigation ul.uk-nav
  padding: 15px 0

#navigation p
  padding-bottom: 10px

#content h2
  font-family: Georgia, "Times New Roman", Times, serif

#content img.header
  padding-top: 15px
  margin-bottom: 20px

#content ul
  list-style-type: square

#content li.done
  color: #008000
  text-decoration: line-through

#content div.images div
  padding-bottom: 25px

#content p.images-text
  margin-top: -15px

#content .iframe-container
  position: relative
  /* Magic! Makes sure the container is high enough to show the entire iframe 
   * Thanks to http://andmag.se/2011/11/responsive-embeds/
  padding-bottom: 56.5%

#content iframe
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

@media (max-width: 767px)
  h2
    margin-top: 25px