html {
  font:                   12px "Georgia", "Times", "Times New Roman", sans-serif;
  line-height:            1.5;
  text-rendering:         optimizeLegibility;
}

article article {
  margin-bottom:          2em;
}
article article:last-child {
  margin-bottom:          0;
}

section {
  margin-bottom:          2em;
  widows:                 4;
  orphans:                4;
}
section:last-child {
  margin-bottom:          0;
}

p {
  margin-bottom:          1em;
}
p:last-child {
  margin-bottom:          0;
}

em {
  font-style:             italic;
}

strong {
  font-weight:            bold;
}

a,
a:hover,
a:visited {
  color:                  black;
  text-decoration:        none;
}

h1, h2, h3, h4, h5, h6 {
  font-family:            "Roboto Slab", "Georgia", "Times", "Times New Roman", sans-serif;
  font-weight:            normal;
  color:                  #454545;
  text-align:             center;
  line-height:            1.4;
  margin-bottom:          0.5em;
}
h1 {
  font-size:              218%;
  margin-top:             0.5em;
}
h2 {
  font-size:              164%;
}
h2.lengthy {
  font-size:              150%;
}
h3 {
  font-size:              145%;
}
h4 {
  font-size:              118%;
}

h3, h4 {
  text-align:             left;
  border-bottom:          1px solid #eee;
  display:                inline-block;
}
h3.image,
h4.image {
  display:                block;
}

ol {
  list-style-type:        decimal;
}
ul {
  list-style-type:        disc;
}
ul, ol {
  margin:                 0 0 1.5em;
  padding-left:           1em;
}
li {
  margin-bottom:          0.5em;
}
li:last-of-type {
  margin-bottom:          0;
}

aside {
  margin-top:             2em;
}

p.byline,
p.note,
p.role {
  margin:                 0.3em 0 1.5em;
  font-size:              0.85em;
  font-style:             italic;
}
p.byline:last-child {
  margin-bottom:          0;
}

span.film-title {
  font-style:             italic;
}

#printed-warning {
  display:                none;
}

span.spoiler {
  background-color:       black;
  color:                  black;
}
p:hover span.spoiler {
  background-color:       inherit;
  color:                  inherit;
}

.intro-stub {
  text-transform:         uppercase;
}

article blockquote {
  padding:                0 0 0.3em 1em;
  border-left:            2px solid #bbb;
  margin:                 1em 0 1em 2em;
  font-size:              0.85em;
}

pre {
  text-align:             center;
  padding:                0.8em 0.5em;
  margin-bottom:          0.8em;
  background-color:       #eee;
}

.code {
  font-family:            monospace;
}

@media all and (min-width: 360px) {
  h2 {
    margin:                 0 auto 1em;
    max-width:              600px;
  }
  h2 span {
    background-color:       white;
    padding:                0 0.5em;
  }

  ul, ol {
    margin:                 0 1.5em 1.5em 0;
    padding-left:           1.3em;
  }
}

@media all and (min-width: 850px) {
  /* Lacking columns in Firefox until FF supports column-span */
  section {
    -webkit-column-width:   400px;
    -webkit-column-gap:     40px;
    column-width:           400px;
    column-gap:             40px;
  }

  h2 {
    height:                 0.7em;
    border-bottom:          1px solid #ddd;
  }

  .short-content,
  p.byline,
  p.note,
  blockquote,
  pre,
  h2,
  h3,
  a {
    -webkit-column-span:    all;
    column-span:            all;
  }
  blockquote.narrow {
    -webkit-column-span:    inherit;
    column-span:            inherit;
  }

  a.film-title {
    display:                block;
    text-indent:            -9999em;
    max-width:              970px;

    background-color:       #999;
    background-repeat:      no-repeat;
    background-position:    center center;
  }
  a#scott-pilgrim {
    background-image:       url(http://images.elliot.cm/970x970/scott-pilgrim-vs-the-world.png);
    height:                 539px;
  }
  a#hackers {
    background-image:       url(http://images.elliot.cm/970x970/hackers.png);
    height:                 408px;
  }
  a#the-big-lebowski {
    background-image:       url(http://images.elliot.cm/970x970/the-big-lebowski.png);
    height:                 514px;
  }
  a#top-gun {
    background-image:       url(http://images.elliot.cm/970x1209/top-gun.png);
    height:                 1209px;
  }
  a#apollo-13 {
    background-image:       url(http://images.elliot.cm/970x619/apollo-13.jpg);
    height:                 619px;
  }
  a#twenty-four-hpp {
    background-image:       url(http://images.elliot.cm/970x970/24hpp.png);
    height:                 522px;
  }
  a#jurassic-park {
    background-image:       url(http://images.elliot.cm/970x970/jurassic-park.png);
    height:                 546px;
  }
  a#pvavpva {
    background-image:       url(http://images.elliot.cm/970x970/pvavpva/pvavpva.png);
    height:                 518px;
  }
  a#inception {
    background-image:       url(http://images.elliot.cm/970x970/inception.png);
    height:                 404px;
  }
  a#office-space {
    background-image:       url(http://images.elliot.cm/970x970/office-space.png);
    height:                 525px;
  }
  a#independence-day {
    background-image:       url(http://images.elliot.cm/970x970/independence-day.png);
    height:                 579px;
  }
  a#empire {
    background-image:       url(http://images.elliot.cm/970x970/the-empire-strikes-back.png);
    height:                 437px;
  }
  a#event-horizon {
    background-image:       url(http://images.elliot.cm/970x970/event-horizon.png);
    height:                 400px;
  }

  #cv > div {
    display:                inline-block;
    vertical-align:         top;
    width:                  60%;
  }

  aside {
    display:                inline-block;
    vertical-align:         top;
    width:                  33%;
    margin-left:            6%;
    margin-top:             0;
  }
  aside blockquote {
    margin:                 0;
  }
  p.byline {
    font-size:              0.8em;
    margin:                 0.8em 0 2.2em 1em;
  }
}