A Pen by Mallory

Thumbnail
This awesome code was written by StommePoes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright StommePoes ©

Technologies

  • HTML
  • CSS
  • JavaScript
    
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSSOff</title>
    <meta name="description" content="A CSSOFF done completely with the GIMP. FLOSS FTW.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!--[if gte IE 9]><!-->
    <link rel="stylesheet" media="screen, projection, handheld" href="base.css">
    <script src="js.js"></script>
    <!--<![endif]-->

    <!--[if lte IE 8]>
    <script>
        var list='footer,meter,section,main'.split(','),el;
        while(el=list.pop()){document.createElement(el);}
    </script>
    <link rel="stylesheet" media="screen" href="ie.css">
    <![endif]-->
    <link rel="stylesheet" media="screen and (min-width: 800px)" href="https://fonts.googleapis.com/css?family=Lato:100&text=CSOF">
    <link rel="stylesheet" media="screen and (min-width: 800px)" href="https://fonts.googleapis.com/css?family=Lora:700&text=VOLUME3SPTBR201FA">
    <link rel="stylesheet" media="screen and (min-width: 800px)" href="https://fonts.googleapis.com/css?family=Merriweather:900&text="ItalySwitzerlndAusJpUbEmRoGgy%u2022">
    <link rel="stylesheet" media="screen and (min-width: 800px)" href="https://fonts.googleapis.com/css?family=Lato:400,700|Lora:400italic,700italic|Oswald:400,700|Merriweather:300,400,700">
    <link rel="stylesheet" media="print" href="print.css">
  </head>
  <body itemscope itemtype="http://schema.org/Article">
    <main>
      <h1 itemprop="name">CSS <span>Off</span></h1>
      <p>Volume 3&#8211;<meta itemprop="dateCreated" content="1203-09">September 2013</p>
      
      <section aria-labelledby="feature">
          <!-- never agreed with hgroup. Still like small for subs even after reading long HTML WG discussions-->
          <!-- semanshits, as Steve Faulkner would say-->
          <h2 id="feature"><small>Feature <b class="ac">:</b> </small>Positioning <span>Relatives</span></h2>
          <p>In 1858, English pictorial photographer Henry Peach Robinson created one of the world&#8217;s first photomontage by combining five different negatives to produce one complete print of a young girl on her deathbed. &#8220;Fading Away&#8221;&#8212;Robinson&#8217;s third and most famous composite photo&#8212;depicts a young girl dying of consumption and was controversial when it was exibited, with many believing that it was not a suitable subject for photography.</p>
          <a id="photo" href="http://stommepoes.nl/CSSOFF/cssoff2013/fading_away.html"><span>[view photo (~1.1KB)]</span></a>
      </section>
      <section aria-label="The Barbie Doll">
        <h2 id="barbie">Box Model</h2>
        <p>The Barbie doll was invented  in 1959 by Ruth Handler (co-founder of Mattel), whose own daughter was called Barbara. Barbie was introduced to the world at the American Toy Fair in New York City. Barbie&#8217;s job was teenage fashion doll. The full name of the first doll was Barbie Millicent Roberts, from Willows, Wisconsin.</p>
      </section>
      <section aria-labelledby="lobsterman">
        <h2 id="lobsterman">Staying afloat</h2>
        <p>Lobsterman John Aldridge fell into the shark-infested water of Long Island while his crewmates were asleep. He was kept afloat for more than 12 hours by his rubber boots, which he used as flotation devices. The coast guard rescued him 43 miles south of Montauk where he fell off his vessel.</p>
      </section>
      <section aria-labelledby="merkafuckyeah">
        <h2 id="merkafuckyeah">List Style: Bullets. <small>A round-up of popular ammunition</small></h2>
        <ul class="bullets">
          <li><span>.223</span> REMINGTON <span>69gr BTHP</span></li>
          <li><span>.308</span> WINCHESTER <span>168gr BTHP</span></li>
          <li class="mmrange"><span>7.62×39mm</span> RUSSIAN 154gr JSP</li>
          <li><span>7.62</span> THUMPER 220gr RN</li>
          <li><span>7.62</span> THUMPER <span>240gr BTHP</span></li>
        </ul>
      </section>
      <section aria-label="Abbey Road">
        <h2 id="abbey">Displaying (famous) Blocks</h2>
        <div class="map">
          <a href="https://maps.google.com/maps?hl=en&ll=51.534577,-0.173013&spn=0.009477,0.021136&sll=51.532989,-0.176167&sspn=0.016098,0.055833&t=m&z=16"><img src="img/flippy.png" alt="view Abbey Road on Google Maps"></a>
          <div class="mapbg"><span class="ac" aria-describedby="credits">The Google Maps link above features a background image of the album cover photo of the Beatles&#8217; Abbey Road, with the zebra crossing modified into a bar code.</span></div><!--longdesc would've been interesting here-->
        </div>
        <p>Abbey Road is a thoroughfare located in the borough of Camden and the City of Westminster in London, running roughly northwest to southeast through St. John&#8217;s Wood, near Lord&#8217;s Cricket Ground. It is part of the B507. This road is best known for the Abbey Road Studios and the 1969 album, Abbey Road, by The Beatles.
        <small id="credits">Photo: <a href="https://goo.gl/h44dc9">goo.gl/h44dc9</a></small></p>
      </section>
      <!--more schema silliness-->
      <section aria-label="Transformers film" itemscope itemtype="http://www.schema.org/Movie">
        <h2 id="movie" itemprop="name">Transformers <small>Revenge of the fallen</small></h2>
        <img itemprop="image" src="img/transformers.png" width="194" height="259" alt="DVD cover">
        <!--keys? values? smells like a DL-->
        <dl itemscope itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating">
          <dt class="review ac">Critic consensus: </dt>
          <dd>A noisy, underplotted, and overlong special effects extravaganza that lacks a human touch.</dd>
          <dt class="rating">Rotten Tomato <span>Rating</span><b class="ac">:</b></dt>
          <!--meter didn't work out-->
          <dd>
              <div itemprop="ratingValue"><span><b>20%</b></span></div>
              <meta itemprop="bestRating" content="100">
              <meta itemprop="worstRating" content="0">
          </dd>
          <dt class="premiere"><span>World premiere</span><b class="ac">:</b></dt>
          <dd>
            <span>Den Haag theatre</span>
            <span>The Netherlands</span>
            <span>June 23, 2011</span>
          </dd>
        </dl>
      </section>
      <section aria-label="immigration">
        <h2 id="immigration"><span>Border Bottom Line</span><b class="ac">:</b>
            <small>Awful immigration laws from around the world.</small></h2>
        <ul>
          <li><span>Italy</span> penalizes illegal immigrants with a fine of €5,000&#8211;10,000 and allows immigration officials to detain them for up to 6 months.</li>
          <li><span>Switzerland</span> immediately deports all convicted criminals from other countries and potentially even their family members.</li>
          <li><span>Australia</span> detains all non-citizens without a valid visa.</li>
          <li><span>Japan</span> is allowed to pay $3,000 to each unemployed Latin American immigrant of Japanese descent and $2,000 to each of that unemployed worker&#8217;s family members to return to their country of origin.</li>
          <li>The <span>United Arab Emirates</span> prohibits foreigners from engaging in any sort of labor union-like activity, resulting in harsh living conditions, 80-hour work weeks, back-breaking manual labor, and below-minimum-wage pay.</li><!--sounds like Qatar-->
        </ul>
      </section>
      <section aria-label="Flood Story">
        <h2 id="overflow">Overflow<span></span></h2>
        <p>On the night of Aug 8, 1975, a line of people frantically piled sandbags atop Henan Province&#8217;s <span>Banqiao Dam</span> while being battered by the worst storm ever recorded in the region. They were in a race with the rapidly rising Ru River to save the dam and the millions of people that lay sleeping downstream. <br>It was a race they were about to lose.</p>
        <p>Just after 1:00 am, the sky cleared and stars emerged from behind the storm clouds. There was an eerie calm as someone yelled, &#8220;The water level is going down! The flood is retreating!&#8221;</p>
        <p>There was little chance to enjoy that calm. One survivor recalled that a few seconds later it &#8220;sounded like the sky was collapsing and the earth was cracking.&#8221; The equivalent of 280,000 Olympic-sized swimming pools burst through the crumbling dam, taking with it entire towns and as many as 171,000 lives.</p> 
      </section>
    </main>
    <footer role="contentinfo">
      <p>
        <span itemprop="copyrightYear">2013</span>
        <span itemprop="sourceOrganization">CSSOff</span>, Volume 3</p>
      <!--assuming this is supposed to be contact info of the publisher-->
      <address><span>Route Gregory</span>, Building 31<br>
                01630 Pr&#233;vessin-Mo&#235;ns, France<br>
                +41 22 767 61 11
      </address>
    </footer>
  </body>
</html>


/*Downloaded from https://www.codeseek.co/StommePoes/a-pen-by-mallory-hqBaJ */
    /* CSSOFF 2013*/

html {
    margin: 0;
    padding: 0;
}

main, section, footer {
    display: block;
}

p {
    margin: 0 0 .6em;
}

b, strong {
    font-weight: normal;
}

i {
    font-style: normal;
}

img {
    border: 0;
    vertical-align: bottom;
}

@media screen and (min-width: 801px) {
  .ac {
      position: absolute;
      top: auto;
      left: -999em;
      height: 0;
  }
}

body {
    margin: 0;
    padding: 0;
    font: 110%/1.4 georgia, serif;
    background-color: #fff;
}
@media screen and (min-width: 600px) {
  body {
      font-size: 100%;
  }
}
@media screen and (min-width: 1300px) {
  body {
      padding: 50px 150px;
  }
}

h1 {
    margin: 0;
    padding: .5em .5em 0;
    color: #fff;
    font-size: 3em;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(51,51,51,0.6);
    background-color: #cdc9dd;
    border-top: 3px solid #8a4e85;
}
h1+p {
    padding: 0 0 1em 2em;
    color: #fff;
    font-family: verdana, sans-serif;
    background-color: #cdc9dd;
    border-bottom: 3px solid #8a4e85;
}

h2 {
    margin: 0;
    font-family: verdana, sans-serif;
}

@media screen and (min-width: 801px) {
  h1 {
      padding-top: 0; 
      font: 100 7em/.8 lato, helvetica, sans-serif;
      text-transform: uppercase;
      letter-spacing: .1em;
      text-shadow: none;
  }
  h2 {
      font: normal 2em oswald, impact, arial, sans-serif;
      text-transform: uppercase;
  }
}

section {
    margin: 0 0 2em;
    padding: 0 5px;
}

#feature {
    font-size: 2em;
}
        #feature small {
            display: block;
            margin-bottom: 0;
            color: #cbb8a0;
            font: normal .8em georgia, serif;
        }

@media screen and (min-width: 850px) {
  section {
      padding: 0;
  }

  #feature {
      position: relative;
      min-width: 710px;
      margin: -.4em 0 .3em;
      padding: 350px 0 20px 120px;
      color: #fdcd84;
      font-size: 5em;
      line-height: 1;
      background: url(img/cow.png) 0 -650px no-repeat;
      z-index: 4;
  }
          #feature small {
              margin-bottom: .6em;
              font: normal .2em lora, georgia, serif;
          }
          #feature span {
              display: block;
          }
          #feature:after {
              content: "";
              position: absolute;
              left: -40px;
              bottom: 30px;
              width: 410px;
              height: 10px;
              font-size: .6em;
              background-color: transparent;
              border-radius: 50%;
              box-shadow: 0 25px 25px rgba(51, 51, 51, 0.6),-2px 30px 55px rgba(51, 51, 51, 0.6);
              z-index: -1;
          }

  #feature+p {
      width: 70%;  
      padding-left: 120px;
      color: #333;
      font: 1.5em/1.4 merriweather, georgia, serif;
  }
}

@media screen and (min-width: 1050px) {
  body {
      padding: 50px 5px;
  }
          body:before {
              content: "";
              display: block;
              width: 38em;
              height: 1000px;
              margin-top: -50px;
              margin-left: -150px;
              background: #cdc9dd url(img/bggradient.png) 0 100% repeat-x;
          }

  main {
      margin-top: -954px;
  }

  h1 {
      position: relative;
      float: left;
      width: 2em;
      padding: 0;
      font-size: 16em;
      background-color: transparent;
      border: 0;
      z-index: 5;
  }
          h1 span {
              letter-spacing: normal;
          }

  h1+p {
      float: right;
      margin: 5em;
      padding: 0;
      color: #cdc9dd;
      font: bold .9em lora, georgia, serif;
      text-transform: uppercase;
      letter-spacing: .2em;
      background-color: transparent;
      border-bottom: 0;
  }

  section[aria-labelledby="feature"] {
      margin-left: 20%;
      padding-top: 7em;
  }
  #feature {
      margin: 0 0 .3em;
  }
          #feature+p {
            width: 21em;
          }
}
@media screen and (min-width: 1300px) {
  body {
      padding: 50px 150px;
  }
  main {
        max-width: 1010px;
  }
}

a {
    padding: 20px;
    color: #8a4e85;
}
        a:focus, a:hover {
            color: #cdc9dd;
            text-decoration: none;
            outline: 0;
        } 

@media screen and (min-width: 801px) {
  a {
      padding: 0;
  }
}

section[aria-labelledby="feature"] a {
    display: block;
    text-align: center;
}
        section[aria-labelledby="feature"] a:active {
            color: #8a4e85;
            background-color: #ddd;
            outline: 4px solid #8a4e85;
            border-radius: 4px;
        }

section[aria-labelledby="feature"] a[aria-hidden="true"] {
    display: none;
}

section[aria-label^="The"] {
    padding: 20px;
    margin: 5px 5px 1em;
    padding: 10px;
    background-color: #fde;
    border-radius: 4px;
}
        #barbie {
            color: #e07;
            font: italic bold 2em/1.4 georgia, serif;
        }
                #barbie+p {
                    color: #6e6c77;
                    font-style: italic;
                }

@media screen and (min-width: 801px) {
  section[aria-label^="The"]:before {
      content: "";
      float: left;
      width: 390px;
      height: 362px;
      margin-right: 1em;
      background: url(img/cow.png) 0 -200px no-repeat; 
  }
  #barbie {
      font: italic 700 2em/1.4 lora, georgia, serif;
      text-transform: none;
  }
          #barbie+p {
              font: normal 400 1.1em/1.5 lato, helvetica, sans-serif;
          }
}
@media screen and (min-width: 1300px) {
  section[aria-labelledby="feature"] {
      margin-left: 22em;
  }
  section[aria-label^="The"] {
      position: relative;
      width: 30em;
      margin: -30px 0 8em -70px;
      padding: 0;
      background-color: transparent;
      border-radius: 0;
      z-index: 5;
  }
  section[aria-label^="The"]:before {
      display: none;
  }

  #barbie {
      margin-top: -22em;
      margin-bottom: .2em;
      padding: 350px 0 0 200px;
      color: #5f5d66;
      text-transform: none;
      background: url(img/cow.png) 0 -200px no-repeat;
  }

  #barbie+p {
      width: 20em;
      padding: 0 0 0 100px;
      text-align: center;
  }
}

#lobsterman {
    color: #247a5a;
}

@media screen and (min-width: 801px) {
  section[aria-labelledby="lobsterman"] {
      clear: left;
      position: relative;
      margin-bottom: 6em;
      padding-left: 160px;
  }
  section[aria-labelledby="lobsterman"]:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 5px;
      width: 150px;
      height: 200px;
      margin-right: 10px;
      background: url(img/cow.png) -84px 0 no-repeat; 
  }
  #lobsterman {
      font-size: 1.4em;
      text-transform: none;
  }
  #lobsterman+p {
      color: #444;
      font: 400 1em lato, helvetica, sans-serif;
  }
}

#merkafuckyeah {
    margin-bottom: 15px;
    padding: 15px 0;
    color: #a97d35;
    font-size: 1.2em;
    line-height: 1.2;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-left: 0;
    border-right: 0;
}
        #merkafuckyeah small {
            display: block;
            margin-top: 1em;
            color: #e0c167;
            font: bold .6em helvetica, sans-serif;
            letter-spacing: .2em;
            vertical-align: middle;
        }

.bullets {
    list-style-image: url(img/bullet.png);
    margin-left: 4em;
    padding: 0;
}
        .bullets li {
            margin: 0 50px 1.6em 0;
            padding-bottom: 5px;
            font-size: 1.2em;
            color: #999;
            border-bottom: 1px solid #e0c167;
        }
                .bullets span:first-child {
                    color: #ccc;
                    font-size: .9em;
                    line-height: 1;
                    vertical-align: middle;
                }

@media screen and (min-width: 801px) {
  #merkafuckyeah {
      line-height: .9;
  }
          #merkafuckyeah small {
              display: inline-block;
              margin-top: 0;
              margin-left: 1em;
              font: 700 .6em lato, helvetica, sans-serif;
          }
}

@media screen and (min-width: 830px) {
  #merkafuckyeah {
      max-width: 830px;
  } 
  .bullets {
      list-style: none;
      margin: 0 auto;
      overflow: hidden;
  }
          .bullets li {
              float: left;
              width: 140px;
              margin: 0;
              padding: 10px;
              color: #e0e0e0;
              font: normal 1.6em/1.1 oswald, impact, arial, sans-serif;
              text-align: center;
              border-left: 1px solid #e0e0e0;
              border-bottom: 0;
          }
                  .bullets li:first-child {
                      border-left: 0;
                  }
                  .bullets span:first-child {
                      display: block;
                      color: #e0e0e0;
                      font-size: 3em;
                      line-height: 1.2;
                  }
                  .bullets span+span {
                     font-size: 1.1em;
                  } 
                  .bullets span:first-child:before {
                      content: "";
                      display: block;
                      position: relative;
                      min-height: 310px;
                      margin-bottom: -70px;
                      background: url(img/cow.png) -5px -1210px no-repeat;
                      z-index: 2;
                  }
                          .bullets li:first-child+li span:first-child:before {
                              background-position: -167px -1205px;
                          }
          .bullets .mmrange {
              font-size: 2.4em;
          }
                  .bullets .mmrange span {
                      font-size: .8em;
                  }
                          .bullets .mmrange span:before {
                              min-height: 355px;
                              margin-bottom: -80px;
                              background-position: -324px -1200px;
                          }
          .bullets .mmrange~li {
              font-size: 2.2em;
          }
                  .bullets .mmrange~li span {
                      font-size: 2.4em;
                  }
                          .bullets .mmrange~li span:before {
                              margin-bottom: -90px;
                              background-position: -488px -1210px;
                          }
                  .bullets .mmrange+li+li span+span {
                          font-size: .8em;
                  }
                          .bullets .mmrange+li+li span:before {
                              background-position: -645px -1210px;
                          }
}

@media screen and (min-width: 1050px) {
  section[aria-labelledby="lobsterman"] {
      position: static;
      float: left;
      width: 8.8em;
      margin-bottom: 0;
      padding-left: 0;
      text-align: right;
  }
          section[aria-labelledby="lobsterman"]:after {
              position: relative;
              top: auto;
              left: auto;
              bottom: -30px;
              margin-right: 0;
          }

  section[aria-labelledby="merkafuckyeah"] {
      margin: 200px 0 2em 10em; 
      padding-left: 5%;
  }

  .bullets {
      margin: 0;
  }
}
@media screen and (min-width: 1300px) {
  section[aria-labelledby="merkafuckyeah"] {
      margin: 0 0 2em 10em; 
      padding-left: 0;
  }
}

section[aria-label^="Abbey"] {
    color: #fff;
    background-color: #71625a;
}

#abbey {
    padding: 20px;
    color: #fff;
    font-size: 2em;
    text-align: center;
    background-color: #524741;
}

.map a {
    display: block;
    width: 80%;
    min-height: 300px;
    margin: 10px auto;
    background: #fff url(img/abbey_google.png) 50% 50% no-repeat;
    border: 3px solid #524741;
}
        .map a:focus, .map a:active {
            border-color: #fdcd84;
        }

        .map a img {
            display: none;
        }

.mapbg {
    margin-bottom: .6em;
}

.map+p {
    margin-bottom: 0;
    color: #fff;
    font: 1.1em/1.5 georgia, serif;
    background-color: #71625a;
}
        .map+p small {
            display: block;
            padding: 15px;
            color: #c1bbb9;
        }
        .map+p a {
            display: inline-block;
            color: #c1bbb9;
        }
                .map+p a:focus, .map+p a:active {
                    color: #fff;
                    outline: 4px solid #fff;
                }

@media screen and (min-width: 901px) {
  #abbey {
      padding: 0;
      font-size: 3em;
  }
  .map {
      position: relative;
      width: 80%;
      margin: 0 auto;
      background: #71625a url(img/abbey_road.jpg) 0 0 no-repeat;
      background-size: cover;
      overflow: hidden;
  }

  .map a {
      position: relative;
      width: auto;
      min-height: 500px;
      margin: 0;
      padding: 0;
      background: transparent none;
      border: 0;
      z-index: 6; //anchor above all
  }
  .mapbg {
      margin-bottom: 0;
      background: #fff url(img/abbey_google.png) 100% 100% no-repeat;
  }
          .map a img, .mapbg {
              position: absolute; 
              display: block; /* from none*/
              right: 0;
              bottom: 0;
              width: 131px;
              height: 131px;
              -webkit-transition: width .2s linear .2s, height .2s linear .2s, right .2s .1s;
              -moz-transition: width .2s linear .2s, height .2s linear .2s, right .2s .1s;
              -o-transition: width .2s linear .2s, height .2s linear .2s, right .2s .1s;
              transition: width .2s linear .2s, height .2s linear .2s, right .2s .1s;
          }
          .map a img {
              z-index: 5; //img above mapbg
          }
                  .map.hover a img {
                      transition: width .2s .2s, height .2s .2s, right .2s .3s;
                      right: 1600px;
                  }
          
          .map.hover a img,
          .map.hover .mapbg {
              width: 100%;
              height: 100%;
          }

  .map+p {
      padding: 20px;
      font: 300 1.6em merriweather, georgia, serif;
  }
          .map+p small {
              padding: 30px;
          }
          .map+p a:focus, .map+p a:active {
              outline: 1px dotted #fff;
          }
}
@media screen and (min-width: 1050px) {
  section[aria-label^="Abbey"] {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1300px) {
  section[aria-label^="Abbey"] {
      clear: both;
      background-color: transparent;
  }

  .map {
      width: auto;
      min-height: 686px;
  }

  .map a {
      min-height: 686px;
  }
}


#movie {
    text-align: center;
}
        #movie small {
            display: block;
            font-size: .7em;
        }
        #movie+img {
            display: block;
            width: 194px;
            margin: 0 auto 1em;
        }

dl {
    border-top: 1px solid #3a82ba;
}
        dt, dd {
            display: inline-block;
            margin: 0;
            padding: 0;
            vertical-align: top;
        }
        dt {
            font-weight: bold;
            width: 30%;
        }
        dd {
            width: 55%;
            margin-left: 5px;
        }
        .rating+dd {
            color: #527033;
            font: bold 1.7em/50px impact, helvetica, sans-serif;
            vertical-align: bottom;
        }
@media screen and (min-width: 30em) {
  .rating {
      width: 45%;
      line-height: 50px;
  }

  .rating+dd {
      width: 30%;
      padding-left: 55px;
      background: url(img/splat.png) 0 0 no-repeat;
  }
          .rating+dd div {
              display: inline;
          }
  .premiere+dd span:before {
      content: "\2022";
      padding: 0 8px 0 5px;
      color: #3a82ba; 
  }
  .premiere+dd span:first-child:before {
      content: "";
      padding: 0; 
  }
}

@media screen and (min-width: 601px) {
  dt, .rating {
      clear: left;
      float: left;
      width: 12em;
  }
  dd, .rating+dd {
      display: block; 
      width: auto;
      margin-left: 13em;
  }
      .rating+dd {
          margin-left: 7.5em;
      }
}

@media screen and (min-width: 801px) {
  section[itemscope] {
      position: relative;
      padding: 10px 10px 30px 220px;
      color: #fff;
      background-color: #3a82ba;
  }
  #movie {
      text-align: left;
      line-height: 1.1em;
      border-bottom: 8px solid #619cc9;
  }
  #movie+img {
      position: absolute;
      left: 5px;
      top: 0;
      margin: 0;
      z-index: 5;
  }
  dl {
      margin: 1em 0 0;
      border-top: 0;
  }
          dt, dd {
              display: block;
              float: none;
              width: auto;
              margin: 0;
              font-weight: normal;
          }

  .rating, .premiere, .rating+dd, .premiere+dd {
      font: normal 1em oswald, impact, helvetica, sans-serif;
      text-transform: uppercase;
  }
  .review+dd {
      margin-left: 0;
      padding-bottom: 15px;
      font: italic 400 1em/1.4 lora, georgia, serif;
      border-bottom: 8px solid #619cc9;
  }
  .rating {
      width: 10em;
      color: #fff;
      font-size: 2em;
  }
          .rating+dd {
              margin-left: 0;
              padding-left: 10em;
              color: #fff;
              font: normal 2.3em oswald, impact, helvetica, sans-serif;
              background-position: 8.5em 0;
              border-bottom: 8px solid #619cc9;
          }
  .premiere {
      font-size: 2em;
      border-bottom: 1px solid #fff;
  }
          .premiere+dd span:before {
              color: #fff;
          }
}

@media screen and (min-width: 1050px) {
  section[itemscope] {
      float: right;
      width: 14.5em;
      margin: 1em 0 0 1em;
      padding: 200px 0 0 0;
  }
          section[itemscope]::after {
              content: "";
              display: block;
              position: relative;
              top: 16px;
              width: 28px;
              height: 28px;
              margin: 0 auto;
              background-color: #fff;
              border-radius: 50%;
          } 

  #movie {
      position: relative;
      margin: 0 10px;
      padding-bottom: 10px;
  }
          #movie:after {
              content: "";
              position: absolute;
              top: -1em;
              left: 50%;
              width: 210px;
              height: 10px;
              margin-left: -105px;
              border-radius: 50%;
              box-shadow: 0 15px 10px rgba(51, 51, 51, 0.6),-2px 20px 30px rgba(51, 51, 51, 0.6);
              z-index: 2;
          }

          #movie+img {
            top: -70px;
            left: 15px;
          }

  .rating, .premiere, .rating+dd, .premiere+dd {
      padding: 0 15px;
  }

  .review+dd {
      padding: 0 15px 30px;
      font: italic 400 1em/1.4 lora, georgia, serif;
      border-bottom: 1px dashed #234f70;
  }

  .rating {
      width: auto;
      padding: 20px 54% 10px 15px;
      color: #78a4cc;
      font-size: .85em;
      line-height: 1.2;
      border-top: 5px solid #3476a8;
  }
          .rating span {
              display: block;
              font-size: 2.3em;
          }

  .rating+dd {
      position: relative;
      padding: 0 20px 20px;
      font-size: 1em;
      background: transparent none;
      border-bottom: 5px solid #3476a8;
  }
          .rating+dd div { 
              display: block;
              width: 100%;
              background-color: #619cc9;
              overflow: hidden;
          }
                  .rating+dd div span {
                      float: left;
                      width: 20%;
                      padding-top: 8px;
                      background-color: #fff;
                  } 
                          .rating+dd b {
                              position: absolute;
                              top: .25em;
                              right: 15px;
                              font-size: 3.1em;
                              font-weight: normal;
                          }
  .premiere {
      margin-bottom: -20px;
      padding-top: 10px;
      color: #78a4cc;
      font-size: 1em;
      text-align: center;
      border-top: 1px dashed #234f70;
      border-bottom: 0;
  }
          .premiere span {
              display: inline-block;
              padding: 2px 8px;
              background-color: #3a82ba;
          }

  .premiere+dd {
      margin: 0 15px;
      padding: 5px 0 0;
      font-size: 1.7em;
      line-height: 1.2;
      border-top: 13px solid #78a4cc;
  }
          .premiere+dd span {
              display: block;
          }
          .premiere+dd span:before {
              content: "";
              padding: 0;
          }
          .premiere+dd span+span {
              color: #78a4cc;
              font-size: 1.02em;
          }
          .premiere+dd span+span+span {
              color: #fff;
              font-size: 1.45em;
              line-height: 1.2;
          }

  section[aria-label="immigration"] {
      margin-right: 16em;
      max-width: 54em;
  }
}

#immigration {
    margin: 0 10px .2em;
    font-size: 1.4em;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 3px solid #000;
}
        #immigration small {
            display: block;
            padding: 15px 0;
            font-size: .7em;
            text-align: center;
            text-transform: none;
            border-top: 3px solid #000;
        }

#immigration+ul {
    list-style-type: disc;
    margin-left: 2em;
    padding: 0;
}
                #immigration+ul li span {
                    font-weight: bold;
                }

@media screen and (min-width: 801px) {
  #immigration {
      font-size: 5.3em;
  }
          #immigration small {
              font-size: .47em;
          }

  #immigration+ul {
      list-style: none;
      margin: 0 1em 0 0;
      font: 400 1.4em/1.2 merriweather, georgia, serif;
  }
          #immigration+ul li {
              display: inline;
          }
          #immigration+ul li:before {
              content: "\2022\0a";
              padding: 0 .1em;
              font-weight: 900;
          }
          #immigration+ul li:first-child:before {
              content: "";
              padding: 0; 
          }
                  #immigration+ul li span {
                      font-weight: 900;
                  }
}

@media screen and (min-width: 1050px) {
  #immigration {
      margin: 0 0 .2em;
      padding-top: 150px;
      background: url(img/cow.png) 0 -1568px no-repeat;
  }
}

#overflow {
    position: relative;
    width: 213px;
    height: 65px;
    margin: 0 0 .2em 1.5em;
    color: #a0b4c0;
    font: bold 2em helvetica, sans-serif;
}
        #overflow span {
            position: absolute;
            left: -26px;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(img/overflow.png) 0 0 no-repeat;
        }

#overflow~p {
    color: #5e6c74;
    font: italic 1.2em/1.2 georgia, serif;
}
@media screen and (min-width: 801px) {
  section[aria-label^="Flood"] {
      clear: both;
      padding-bottom: 2em;
      background: url(img/cow.png) -854px -25px no-repeat;
  }
  section[aria-label^="Flood"]:after {
      content: "";
      display: block;
      clear: both;
      height: 0;
  }
  #overflow {
      left: -20px;
      top: -20px;
      width: auto;
      height: auto;
      margin: 0;
      padding-top: 55px;
      padding-bottom: 60px;
      font: normal 2em oswald, impact, arial, sans-serif;
      background: url(img/cow.png) -834px -5px no-repeat;
  }
          #overflow span {
              left: 0;
              width: 477px;
              height: 162px;
              background: url(img/cow.png) -834px -5px no-repeat;
          }
  #overflow~p {
      text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
  }
}
@media screen and (min-width: 1050px) {
  #overflow~p {
      float: right;
      width: 75%;
      margin-bottom: 2em;
      font: italic 400 1.1em/1.4 lora, georgia, serif;
      text-align: right;
      text-shadow: none;

      -webkit-transform: rotate(2deg); 
      -webkit-transform-origin: 0 50% 0; 
      -moz-transform: rotate(2deg); 
      -moz-transform-origin: 0 50% 0; 
      -o-transform: rotate(2deg);
      -o-transform-origin: 0 50% 0; 
      transform: rotate(2deg); 
      transform-origin: 0 50% 0; 
  }
          #overflow~p span {
              font-weight: 900;
          }
          #overflow+p+p {
              float: left;
              margin-bottom: .6em;
              text-align: left;

              -webkit-transform: rotate(-1deg); 
              -moz-transform: rotate(-1deg); 
              -o-transform: rotate(-1deg);
              transform: rotate(-1deg); 
          }
          #overflow+p+p+p {
              clear: both;
              float: none;
              width: 78%;
              margin-left: 6em;
              text-align: left;

              -webkit-transform: rotate(1deg); 
              -webkit-transform-origin: 0 0 0; 
              -moz-transform: rotate(1deg); 
              -moz-transform-origin: 0 0 0; 
              -o-transform: rotate(1deg);
              -o-transform-origin: 0 0 0; 
              transform: rotate(1deg); 
              transform-origin: 0 0 0; 
          }
}

footer {
    padding: 20px 5px 10px;
    border-top: 1px solid #e5e5e5;
}
footer p {
    margin-bottom: 1em;
    color: #bbb;
}
        footer p span {
            color: #888;
        }

footer address {
    color: #888;
}
        address span {
            font-weight: bold;
        }

@media screen and (min-width: 801px) {
  footer {
      max-width: 1010px;
      overflow: hidden;
  }
  footer p {
      float: left;
      margin-bottom: 0;
      font: 400 1em lato, helvetica, sans-serif;
  }
  footer address {
      float: right;
      font: 400 .9em merriweather, georgia, serif;
      text-align: right;
  }
          address span {
              font-weight: 900;
          }
}

}


/*Downloaded from https://www.codeseek.co/StommePoes/a-pen-by-mallory-hqBaJ */
    var Basis = {
    hasClass: function(target, classValue) {
        var pattern = new RegExp('(^| )' + classValue + '( |$)');
        return (pattern.test(target.className));
    },
    addClass: function(target, classValue) {
        if(!Basis.hasClass(target, classValue)) {
            classValue = (target.className=='') ? classValue : (' '+classValue);
            target.className += classValue;
        } 
    },
    removeClass: function(target, classValue) {
        if (Basis.hasClass(target, classValue)) {
            var pattern = new RegExp('(\\s|^)' + classValue + '(\\s|$)');
            target.className = target.className.replace(pattern, '');
        }
    },
    getElementsByClass: function(classValue, parentEl) {
        var allElements = (arguments.length>1) ?
                          parentEl.getElementsByTagName('*') :
                          document.body.getElementsByTagName('*'),
            matchedElements = [],
            pattern = new RegExp('(^| )' + classValue + '( |$)');

        for (var i=0, l=allElements.length; i<l; i++) {
            if(pattern.test(allElements[i].className)) {
                matchedElements[matchedElements.length] = allElements[i];
            }
        }
        return matchedElements;
    },
    insertAfter: function(newEl, refEl) {
        if (refEl.nextSibling) {
            refEl.parentNode.insertBefore(newEl, refEl.nextSibling);
        } 
        else {
            refEl.parentNode.appendChild(newEl);
        }
    },
    getNextSibling: function(target) {
        var sib = target.nextSibling;
        while(sib.nodeType == 3) {
            sib = sib.nextSibling;
        }
        return sib;
    }, 
    getPrevSibling: function(target) {
        var sib = target.previousSibling;
        while(sib.nodeType == 3) {
            sib = sib.previousSibling;
        }
        return sib;
    },

    getChildren: function(target) {
        var nodez = target.childNodes;
        for (var arr=[],i=0,l=nodez.length;i<l;i++) {
            if (nodez[i].nodeType ==1) {
                arr.push(nodez[i]);
            }
        }
        return arr;
    },

    getSiblings: function(target, parent) {
        var sibs = Basis.getChildren(parent);

        for (var sibarr=[],j=0,k=sibs.length;j<k;j++) {
            if (sibs[j] != target) {
              sibarr.push(sibs[j]);        
            }
        }
        return sibarr;
    },
    start: function(fn) {
        Basis.addEventListener(window, 'load', fn);
    }
};

if (document.addEventListener) {
    Basis.addEventListener = function(target, type, listener) {
        target.addEventListener(type, listener, false);
    };

    Basis.removeEventListener = function(target, type, listener) {
        target.removeEventListener(type, listener, false);
    };

    Basis.preventDefault = function(event) {
        event.preventDefault();
    };

    Basis.stopPropagation = function(event) {
        event.stopPropagation();
    };
}

/*IE*/
else if (document.attachEvent) {
    Basis.addEventListener = function(target, type, listener) {
        if (Basis._findListener(target, type, listener) != -1) {
            return;
        }
        var listener2 = function() {
            var event = window.event;

            if (Function.prototype.call) {
                listener.call(target, event);
            }
            else {
                target._currentListener = listener;
                target._currentListener(event);
                target._currentListener = null;
            }
        };

        target.attachEvent('on' + type, listener2);

        var listenerRecord = {
            target: target,
            type: type,
            listener: listener,
            listener2: listener2
        };

        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;
        
        var listenerId = 'l' + Basis._listenerCounter++;

        if (!targetWindow._allListeners) {
            targetWindow._allListeners = {};
        }
        targetWindow._allListeners[listenerId] = listenerRecord;

        if (!target._listeners) { 
            target._listeners = [];
        }
        target._listeners[target._listeners.length] = listenerId;

        if (!targetWindow._unloadListenerAdded) {
            targetWindow._unloadListenerAdded = true;
            targetWindow.attachEvent('onunload', Basis._removeAllListeners);
        }
    };

    Basis.removeEventListener = function(target, type, listener) {
        var listenerIndex = Basis._findListener(target, type, listener);
        if (listenerIndex == -1) {
            return;
        }

        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;

        var listenerId = target._listeners[listenerIndex];
        var listenerRecord = targetWindow._allListeners[listenerId];

        target.detachEvent('on' + type, listenerRecord.listener2);
        target._listeners.splice(listenerIndex, 1);

        delete targetWindow._allListeners[listenerId];
    };

    Basis.preventDefault = function(event) {
        event.returnValue = false;
    };

    Basis.stopPropagation = function(event) {
        event.cancelBubble = true;
    };

    Basis._findListener = function(target, type, listener) {
        var listeners = target._listeners;
        if (!listeners) { 
            return -1;
        }

        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;

        for (var i = listeners.length - 1; i >= 0; i--) {
            var listenerId = listeners[i];
            var listenerRecord = targetWindow._allListeners[listenerId];

            if (listenerRecord.type == type && listenerRecord.listener == listener) {
                return i;
            }
        }
        return -1;
    };

    Basis._removeAllListeners = function() {
        var targetWindow = this;
        for (id in targetWindow._allListeners) {
            var listenerRecord = targetWindow._allListeners[id];
            listenerRecord.target.detachEvent('on' + listenerRecord.type, listenerRecord.listener2);
            delete targetWindow._allListeners[id];
        }
    };

    Basis._listenerCounter = 0;
}
/*end IE*/

var CSSOFF = {
    init: function() {
        var map = Basis.getElementsByClass('map')[0],
            photo_link = document.getElementById('photo'),
            timeoutID;

        //run onload too
        CSSOFF.set_anchor(photo_link);

        Basis.addEventListener(window, 'resize', function() {
            CSSOFF.window_resize(timeoutID,photo_link);
        });

        map.onmouseover = function() { 
            Basis.addClass(this, 'hover');
        };
        map.onmouseout = function(event) {
            CSSOFF.mouse_out(this, event);
        };
    },

    window_resize: function(timeoutID,photo_link) { 
         window.clearTimeout(timeoutID); 
         timeoutID = window.setTimeout(function(){
                                           CSSOFF.set_anchor(photo_link);
                                      }, 10);
    },

    set_anchor: function(photo_link) {
        var window_width = document.body.clientWidth;
        if (window_width > 800) {
            photo_link.tabIndex='-1';
            photo_link.setAttribute('aria-hidden', true);
        }
        else {
            photo_link.setAttribute('aria-hidden', false);
            photo_link.tabIndex='0';
        }
    },

    mouse_left: function(parent, event) {
        var e;
        if (!event) {
            e = window.event;
        }
        e = event.toElement || event.relatedTarget;
 
        while (e && e.nodeName && e.nodeName != 'BODY') {
            if (e == parent) {
                return false;
            }
            e = e.parentNode;
        };
        return true;
    },

    mouse_out: function(div, event) {
        if (CSSOFF.mouse_left(div, event)) {
            Basis.removeClass(div, 'hover');
        }
        return;
    }
};

Basis.start(CSSOFF.init);

Comments