cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<!--[if lte IE 8]> 
<style>
  * {position: static;}
  div{position:relative;}
  h1,h2, div.article-text{
    color: black !important;
    background-color:white !important;
  }
</style>
<![endif]-->

<!-- *****HEADER***** -->

 <div id="compatibility-warnings">
	<p id="no-js-warning"></p>
	<p id="no-svg-warning"></p>
 </div>

 <nav id="ToC" title="Contents">
	<!-- Table of Contents and Navigation links -->
	<ul>
	 <li id="go-to-top"><a href="#page-wrapper">Top</a></li>
	 <li ><a href="#boxes">Box Model</a></li>
	 <li ><a href="#positioning">Positioning Relatives</a></li>
	 <li ><a href="#afloat">Staying Afloat</a></li>
	 <li ><a href="#bullets">List Style:Bullets</a></li>
	 <li ><a href="#blocks">Displaying (Famous) Blocks</a></li>
	 <li ><a href="#transformers">Transformers</a></li>
	 <li ><a href="#borderline">Border Bottom Line</a></li>
	 <li ><a href="#overflow">Overflow</a></li>	 
	</ul>
 </nav>

<div id="page-wrapper">
 <header>
 	<hgroup><h1 class="title">CSS Off</h1></hgroup>
	<div class="pubdata">
	  <span class="issue">Volume 3</span> <span class="date">September 2013</span>
	</div>
 </header>

<div id="content-wrapper">

<!-- *****ARTICLE 1: Box Model***** -->

 <article id="boxes" >
  <div class="graphic-wrapper small" style="max-width:450px; max-height:350px;">
  <div class="inner-wrapper" 
	style="padding-bottom:200px; padding-bottom:calc(100% * 350/450)">
  <svg width="450px" height="350px" preserveAspectRatio="xMidYMin meet"
	viewBox="50 0 400 350"
	xmlns="http://www.w3.org/2000/svg" 
	version="1.1">

	<title>Barbie at 50</title>
	<desc>A collectors-edition Barbie doll in striped swimsuit is displayed 
		in a pink-and-white presentation box with the text "Barbie Rocks" 
		on the lid.</desc>
	<metadata xmlns:html="http://www.w3.org/1999/xhtml">
		<html:img class="small" 
		

src="http://abbr.webng.com/CSSOFF2013/Resources/No-SVG/barbie-alpha-shadow.png"
		alt="Barbie at 50"
		width="450px" height="389px"/>
	</metadata>
 <defs>
	<clipPath id="clip-barbie">
	<path id="barbie-path"
          d="
		M 50,43
		L 238,42 
		Q 242,41 242,45
		L 242,57
		L 395,57
		Q 399,57 399,61 
		L 402,351
		Q 402,355 398,355 
		L 202,356
		Q 198,355 198,352
		L 198,332
		L 51,334
		Q 46,334 46,330 
		L 46,47
		Q 46,43 50,43 Z"/>
	</clipPath>

	<filter id="gray-blur">
		<feGaussianBlur in="SourceAlpha" stdDeviation="20 15" 

out="blurshadow"/>
		<feComponentTransfer>
			<feFuncA type="linear" slope="0.333" intercept="0"/>
		</feComponentTransfer>
	</filter>
	

 </defs> 

 <g viewBox="0 0 450 389">
	<!-- Create a transparent gray back-shadow, 
		slightly narrower and below the image outline -->

	<use xlink:href="#barbie-path" filter="url(#gray-blur)" 
		viewBox="0 0 100 100"
		transform=" translate(35,200) scale(0.8,0.45) skewX(3)" />

	<image 

xlink:href="http://abbr.webng.com/CSSOFF2013/Resources/barbie-white.jpeg" 
		 x="0" y="0" width="450px" height="389px" 
		 clip-path="url(#clip-barbie)"/> 

	<!-- image file is larger than clipped area, this fits tightly within viewbox 

-->
 </g>


</svg></div></div>

  <hgroup>
	<h1>Box model</h1>
  </hgroup>
  <div class="article-text">
	
	<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's job was teenage fashion doll.  The 

full name of the first doll was Barbie Millicent Roberts, from <a href="#map-barbie" 

title="Show route">Willows, Wisconsin</a>. </p>
  </div>
  <iframe id="map-barbie" width="425" height="350" frameborder="0" scrolling="no" 

marginheight="0" marginwidth="0" 

src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=FfgYnAIdZDS1

-imv44STD_SoUjHWSYb4uNXV8g%3BFXFAbQIdK8KW-yk7CD_TpU_CiTFi_nfhBo8LyA&amp;q=Wisconsin,+U

nited+States+to+New+York+City,+NY,+United+States&amp;aq=0&amp;oq=Wisconsin+to+New+York

+C&amp;sll=43.78444,-88.787868&amp;sspn=7.185298,14.27124&amp;t=h&amp;ie=UTF8&amp;sadd

r=Wisconsin,+United+States&amp;daddr=New+York+City,+NY,+United+States&amp;ll=42.293564

,-81.386719&amp;spn=11.374018,18.676758&amp;z=5&amp;output=embed"></iframe>
  <a href="#boxes" class="close-map" title="Close map"></a>

 </article>


<!-- *****ARTICLE 2: Positioning Relatives***** -->

 <article id="positioning" class="feature">
  <div class="graphic-wrapper large" style="max-width:682px; max-height:524px;">
  <div class="inner-wrapper" style="padding-bottom:200px; padding-bottom:calc(100% * 

524/682)">
  <svg width="682px" height="524px" preserveAspectRatio="xMidYMin meet"
	viewBox="75 -41 682 524" >
	<title>'Fading Away' by Henry Peach Robinson</title>
	<desc>A sepia-toned photograph of a girl in a plain white gown, 
		reclining in a chair with pillows.  Another girl and an older woman
		in Victorian dress watch over her, and a man looks out the window 
		in the background.
	</desc>
	<metadata xmlns:html="http://www.w3.org/1999/xhtml">
		<html:img class="large" 

src="http://abbr.webng.com/CSSOFF2013/Resources/relatives.jpeg" 
		alt="'Fading Away' by Henry Peach Robinson" 
		style="transform:rotate(-4deg);"/>
	</metadata>
	<image xlink:href="http://abbr.webng.com/CSSOFF2013/Resources/relatives.jpeg" 
		 x="0" y="0" width="797" height="498" 
		transform="rotate(-4)"/>
	<!-- -4deg tilt causes image to extend from (0,-56) to (832,498) on viewBox 
		i.e., it extends beyond by 75 on sides, 15 top and bottom. -->
  </svg></div></div>

  <hgroup>
	<h1>Positioning relatives</h1>
  </hgroup>
  <div class="article-text">
	<p>In 1858, English pictorial photographer Henry Peach Robinson created the 

world's first photomontage by combining five different negatives to make one complete 

print of a young girl on her deathbed.  <q>Fading Away</q>&mdash;Robinson's first and 

most famous composite photo&mdash;depicts a young girl dying of consumption and was 

controversial when it was exhibited, with many believing it was not a suitable subject 

for photography.</p>
  </div>
 </article>


<!-- *****ARTICLE 3: Staying Afloat***** -->

 <article id="afloat" class="left sidebar">

  <div class="graphic-wrapper small" style="max-width:167px; max-height:200px;">
  <div class="inner-wrapper" style="padding-bottom:200px; padding-bottom:calc(100% * 

200/167)">
  <svg width="167px" height="200px" viewBox="0 0 167 200"
	preserveAspectRatio="xMidYMax meet"
	xmlns="http://www.w3.org/2000/svg" 
	version="1.1">
	<title>Big Boots</title>
	<desc>A pair of tall green rubber boots.</desc>
	<metadata xmlns:html="http://www.w3.org/1999/xhtml">
		<html:img class="small"  width="167px" height="200px"
		

src="http://abbr.webng.com/CSSOFF2013/Resources/No-SVG/boots-alpha.png"
		alt="Big Boots"/>
	</metadata>
 	<defs>
	 <clipPath id="clip-boots">
	  <path id="boots-path"
          d="	M 94.00,6.09
		C 87.26,5.84 75.42,5.38 69.00,6.09
		 69.00,6.09 53.00,10.00 53.00,10.00
		 53.00,10.00 56.09,59.00 56.09,59.00
		 56.09,59.00 58.17,76.00 58.17,76.00
		 59.11,85.30 62.88,96.85 60.70,106.00
		 60.01,108.88 59.05,110.63 57.29,113.00
		 46.71,127.27 31.10,120.18 21.05,127.56
		 17.04,130.51 14.23,138.08 14.49,143.00
		 14.49,143.00 15.68,149.00 15.68,149.00
		 16.37,153.12 15.45,155.88 20.06,157.85
		 27.88,160.75 42.13,157.63 50.75,155.63
		 44.00,157.38 39.50,162.75 38.75,168.88
		 38.44,170.26 37.77,169.73 37.63,171.38
		 36.75,172.63 36.25,177.25 38.13,179.63
		 37.25,185.50 37.49,189.78 43.30,194.30
		 47.62,197.66 54.76,197.06 60.00,197.00
		 70.22,196.87 83.74,191.64 92.00,185.70
		 100.52,179.58 104.48,173.69 108.17,170.79
		 113.69,166.44 120.18,166.04 125.57,158.96
		 128.71,154.84 128.99,145.18 129.00,140.00
		 129.02,127.42 134.72,115.81 138.67,104.00
		 138.67,104.00 149.40,70.00 149.40,70.00
		 149.40,70.00 154.03,50.00 154.03,50.00
		 154.03,50.00 159.10,28.00 159.10,28.00
		 159.52,25.29 161.22,20.91 159.10,18.51
		 156.43,14.87 146.32,14.95 142.00,15.00
		 142.00,15.00 134.25,15.88 125.00,16.00
		 125.50,12.25 124.88,9.50 128.00,6.09
		 116.21,1.58 106.30,6.25 94.00,6.09 Z
		M 69.75,146.75
		C 65.75,151.00 57.38,154.13 52.88,154.63
		 56.38,153.25 58.38,150.25 67.00,148.00
		 67.00,148.00 69.75,146.75 69.75,146.75 Z" />
	 </clipPath>
 	</defs>

	<image xlink:href="http://abbr.webng.com/CSSOFF2013/Resources/boots.jpeg" 
		 x="0" y="0" width="167px" height="200px" 
		 clip-path="url(#clip-boots)"/>


  </svg></div>
 </div>

  <hgroup>
	<h1>Staying afloat</h1>
  </hgroup>
  <div class="article-text">
	<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 <a 

href="#map-afloat" title="Show Map">43 miles south of Montauk</a> where he fell off 

his vessel.</p>
  </div>
<iframe id="map-afloat" width="200" height="350" frameborder="0" scrolling="no" 

marginheight="0" marginwidth="0" 

src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Monta

uk,+NY,+United+States&amp;aq=&amp;sll=40.90242,-72.545013&amp;sspn=0.940402,1.783905&a

mp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Montauk,+Suffolk,+New+York,+United+States&amp;ll=

41.031715,-71.971436&amp;spn=0.362578,0.274658&amp;z=10&amp;iwloc=A&amp;output=embed">

</iframe>
<a href="#afloat" class="close-map" title="Close map"></a>
 </article>


<!-- *****ARTICLE 4: List Style:Bullets***** -->

 <article id="bullets">
  <div class="inner-wrapper"> <svg class="defs-only"
	xmlns="http://www.w3.org/2000/svg" version="1.1"
	width="0" height="0" >
  <defs>
	<clipPath id="clip-bullet-1">
	  <path id="Bullet-1"
	  d="	M 59.00,69.67
		C 60.33,67.33 66.33,68.67 66.33,69.67
		  68.00,76.33 70.34,88.81 71.67,99.67
		  72.33,111.67 74.33,111.33 74.00,121.67
		  74.00,145.00 79.33,133.67 79.33,147.33
		  80.67,173.67 81.67,244.33 82.00,264.67
		  82.67,271.33 78.67,271.33 83.33,279.33
		  68.00,282.00 64.00,281.33 48.00,280.00
		  52.67,269.67 48.00,271.33 48.33,264.67
		  48.33,245.00 47.33,147.33 47.33,147.33
		  47.67,134.00 53.33,141.67 52.67,121.33
		  52.33,112.67 53.33,106.67 54.33,99.67
		  55.89,88.76 57.67,75.67 59.00,69.67 Z
		M 121.33,70.67
		C 121.33,70.67 127.67,94.67 128.00,108.67
		  127.67,115.00 128.00,139.33 127.67,134.33
		  127.67,130.33 127.67,144.00 125.67,152.33
		  122.33,152.67 112.67,153.00 110.00,152.00
		  108.33,142.33 108.33,141.33 108.33,135.00
		  108.33,129.33 108.33,114.67 108.33,109.33
		  108.00,91.67 112.00,85.43 114.67,71.33
		  115.00,68.67 121.00,68.67 121.33,70.67 Z" />
	</clipPath>
	<clipPath id="clip-bullet-2">
	  <path id="Bullet-2"
	  d="	M 197.85,267.00
		C 198.00,265.67 199.00,140.00 199.00,140.00
		  199.02,126.80 203.23,124.83 205.33,115.67
		  204.67,111.67 205.33,99.00 205.00,91.33
		  206.33,86.67 207.33,82.67 206.67,75.33
		  205.67,62.67 216.67,24.33 217.00,19.00
		  217.67,16.00 223.33,16.33 224.67,19.33
		  224.67,25.33 234.30,55.38 234.33,75.33
		  234.34,80.59 233.00,85.67 236.00,91.00
		  235.67,99.33 235.33,110.67 235.00,116.00
		  237.33,128.00 241.00,125.00 240.33,140.67
		  240.33,140.67 241.00,265.00 241.00,265.00
		  237.00,270.00 237.67,274.67 239.33,279.33
		  229.00,282.67 206.33,281.33 197.33,279.67
		  200.67,275.00 199.33,270.67 197.85,267.00 Z
		M 276.00,21.33
		C 276.00,21.33 283.67,50.00 283.33,70.33
		  283.33,70.33 284.32,119.00 284.32,119.00
		  284.32,119.00 281.00,132.00 281.00,132.00
		  278.67,133.67 265.33,133.33 261.00,132.00
		  261.00,132.00 258.18,118.00 258.18,118.00
		  258.18,118.00 259.33,70.00 259.33,70.00
		  260.67,51.33 264.67,35.00 267.00,21.00
		  267.33,19.00 275.67,18.00 276.00,21.33 Z" />
	</clipPath>
	<clipPath id="clip-bullet-3">
	  <path id="Bullet-3"
	  d="M 365.67,112.67
		C 366.67,100.33 372.33,84.33 375.00,80.00
		  376.58,75.82 382.76,76.57 383.67,80.33
		  387.33,86.00 392.33,101.33 392.00,114.00
		  392.67,121.33 392.33,138.67 394.00,142.00
		  394.00,176.67 398.00,160.00 398.00,175.33
		  398.00,175.33 399.07,271.00 399.07,271.00
		  400.00,275.67 393.00,277.67 397.00,279.67
		  401.00,281.67 402.33,284.00 393.67,285.00
		  388.33,286.00 372.67,286.33 361.67,285.00
		  358.00,284.00 355.33,284.67 359.67,280.00
		  364.67,275.00 357.67,275.33 358.33,270.67
		  358.33,270.67 360.33,176.67 360.33,176.67
		  359.33,163.67 363.67,177.00 363.00,141.00
		  366.33,137.33 364.13,125.60 365.67,112.67 Z
		M 425.00,152.00
		C 424.97,133.43 424.33,111.00 426.67,98.00
		  428.00,93.00 431.67,82.33 433.67,79.33
		  434.00,76.67 442.67,76.67 442.33,79.33
		  443.33,81.33 447.33,88.00 449.00,100.00
		  450.33,106.67 453.33,125.33 452.33,152.67
		  452.67,156.00 450.00,173.67 450.00,173.67
		  447.67,175.67 430.67,175.33 427.33,173.67
		  426.11,164.57 425.02,161.85 425.00,152.00 Z" />
	</clipPath>
	<clipPath id="clip-bullet-4">
	  <path id="Bullet-4"
          d="	M 521.00,178.00
		C 521.02,164.84 524.33,162.67 523.67,150.33
		  523.33,141.00 524.33,138.33 524.33,132.67
		  525.00,117.67 526.00,89.67 529.67,82.00
		  533.33,74.33 544.00,74.33 546.67,81.67
		  549.33,89.00 552.33,115.00 552.67,133.33
		  552.67,142.00 554.00,139.33 554.33,149.67
		  553.00,167.00 557.31,165.09 557.33,177.00
		  557.33,177.00 559.33,268.00 560.00,272.67
		  560.00,272.67 554.00,273.33 554.00,277.00
		  554.29,280.18 573.00,283.67 552.25,285.63
		  544.33,286.33 532.00,286.00 528.19,285.86
		  506.33,284.33 527.00,279.90 527.00,276.67
		  527.00,273.33 520.00,272.00 520.00,272.00
		  521.33,268.67 521.00,178.00 521.00,178.00 Z
		M 599.33,128.00
		C 599.00,140.67 601.00,133.33 601.00,198.00
		  588.53,200.23 585.47,200.23 573.00,198.00
		  572.00,141.67 574.00,147.00 572.96,127.70
		  572.67,106.67 577.19,84.88 578.67,81.33
		  579.91,78.34 591.67,77.67 593.67,82.00
		  595.00,85.67 600.00,112.33 599.33,128.00 Z" />
	</clipPath>
	<clipPath id="clip-bullet-5">
	  <path id="Bullet-5"
          d="	M 678.00,175.00
		C 678.02,163.24 681.33,170.00 680.67,144.00
		  680.67,136.67 683.00,136.33 682.67,128.67
		  682.33,100.00 688.27,89.81 691.00,75.67
		  693.00,68.33 697.33,69.00 699.00,76.33
		  701.28,86.58 709.33,103.67 709.00,130.00
		  709.33,138.33 711.33,137.33 711.00,144.67
		  711.00,169.67 715.33,165.67 715.00,175.67
		  715.00,175.67 717.33,248.67 717.00,272.00
		  699.33,280.00 734.33,276.33 709.67,283.67
		  701.67,285.00 692.67,285.67 685.00,284.00
		  661.33,277.33 697.33,277.67 677.00,272.00
		  677.67,227.00 678.00,175.00 678.00,175.00 Z
		M 732.00,195.00
		C 732.00,195.00 730.67,146.33 730.67,138.33
		  730.33,108.00 738.33,82.00 738.67,78.00
		  739.86,72.67 746.33,75.00 747.67,77.33
		  749.67,85.00 759.33,118.67 758.67,139.00
		  758.67,139.00 760.00,164.67 760.67,195.00
		  761.00,204.67 758.33,215.67 757.00,224.00
		  754.00,226.00 741.67,226.00 735.33,224.33
		  733.00,214.33 732.02,207.40 732.00,195.00 Z" />
	</clipPath>

	<filter id="offset-shadow">
		<feOffset in="SourceAlpha" dx="4" dy="7"/>
		<feComponentTransfer>
			<feFuncA in="offset" type="linear" slope="0.15" />
		</feComponentTransfer>
		<feMerge>
			<feMergeNode />
			<feMergeNode in="SourceGraphic"/>
		</feMerge>
	</filter>	

	<image id="bullets-photo" 

xlink:href="http://abbr.webng.com/CSSOFF2013/Resources/bullets.jpeg" 
		 x="0" y="0" width="812px" height="301px" 
		viewBox="0 0 812 301" />
   </defs>
  </svg></div>

  <hgroup>
	<h1>List style: Bullets</h1>
	<h2>a round-up of popular ammunition</h2>
  </hgroup>
  <div class="article-text">
	<div id="bullet-remington22" class="bullet-entry">

		<div class="graphic-wrapper" style="max-width:160px; 

max-height:300px;">
		<div class="inner-wrapper"style="padding-bottom:200px; 

padding-bottom:calc(100% * 300/160)">
		<svg
			xmlns="http://www.w3.org/2000/svg" version="1.1" 
			width="160px" height="300px"
			viewBox="0 0 160 300" overflow="hidden" 
			filter="url(#offset-shadow)" >
		  <title>Remington 22</title>
		  <desc>Bullet shown with and without shell</desc>
		  <metadata xmlns:html="http://www.w3.org/1999/xhtml">
			<html:img 

src="http://abbr.webng.com/CSSOFF2013/Resources/No-SVG/bullets.png" 
			  alt="Remington 22" 
			  style="clip:rect(0px 160px 0px 0px); 

clip:rect(0px,160px,0px,0px);" />
		  </metadata>
		  <use xlink:href="#bullets-photo" 
			clip-path="url(#clip-bullet-1)"/>
		</svg></div></div>

		<div class="specs">
		<span class="calibre">.223</span>
		<span class="manufacturer">Remington</span>
		<span><span class="mass">69gr</span>
		  <span class="type"><abbr title="Boat-tail Hollow 

Point">BtHP</abbr></span>
		</span></div>
	</div>
	<div id="bullet-winchester308" class="bullet-entry">

		<div class="graphic-wrapper" style="max-width:160px; 

max-height:300px;">
		<div class="inner-wrapper" style="padding-bottom:200px; 

padding-bottom:calc(100% * 300/160)">
		<svg 
			xmlns="http://www.w3.org/2000/svg" version="1.1" 
			width="160px" height="300px"
			viewBox="162 0 160 300" overflow="hidden" 
			filter="url(#offset-shadow)" >
		  <title>Winchester .308</title>
		  <desc>Bullet shown with and without shell</desc>
		  <metadata xmlns:html="http://www.w3.org/1999/xhtml">
			<html:img 

src="http://abbr.webng.com/CSSOFF2013/Resources/No-SVG/bullets.png" 
			  alt="Winchester .308" 
			  style="clip:rect(0px 322px 0px 162px); 

clip:rect(0px,322px,0px,162px);" />
		  </metadata>
		  <use xlink:href="#bullets-photo" 
			clip-path="url(#clip-bullet-2)"/>
		</svg></div></div>

		<div class="specs">
		<span class="calibre">.308</span>
		<span class="manufacturer">Winchester</span>
		<span><span class="mass">168gr</span>
		  <span class="type"><abbr title="Boat-tail Hollow 

Point">BtHP</abbr></span>
		</span></div>
	</div>
	<div id="bullet-russian39" class="bullet-entry">

		<div class="graphic-wrapper" style="max-width:160px; 

max-height:300px;">
		<div class="inner-wrapper" style="padding-bottom:200px; 

padding-bottom:calc(100% * 300/160)">
		<svg 
			xmlns="http://www.w3.org/2000/svg" version="1.1" 
			width="160px" height="300px"
			viewBox="324 0 160 300" overflow="hidden" 
			filter="url(#offset-shadow)" >
		  <title>Russian 39mm</title>
		  <desc>Bullet shown with and without shell</desc>
		  <metadata xmlns:html="http://www.w3.org/1999/xhtml">
			<html:img 

src="http://abbr.webng.com/CSSOFF2013/Resources/No-SVG/bullets.png" 
			  alt="Russian 39mm" 
			  style="clip:rect(0px 484px 0px 324px); 

clip:rect(0px,484px,0px,324px);" />
		  </metadata>
		  <use xlink:href="#bullets-photo" 
			clip-path="url(#clip-bullet-3)"/>
		</svg></div></div>

		<div class="specs">
		<span class="calibre">7.62&times;39mm</span>
		<span class="manufacturer">Russian</span>
		<span><span class="mass">154gr</span>
		  <span class="type"><abbr title="Jacketed Soft 

Point">JSP</abbr></span>
		</span></div>
	</div>
	<div id="bullet-thumperRN" class="bullet-entry">

		<div class="graphic-wrapper" style="max-width:160px; 

max-height:300px;">
		<div class="inner-wrapper" style="padding-bottom:200px; 

padding-bottom:calc(100% * 300/160)">
		<svg 
			xmlns="http://www.w3.org/2000/svg" version="1.1" 
			width="160px" height="300px"
			viewBox="486 0 160 300" overflow="hidden" 
			filter="url(#offset-shadow)" >
		  <title>Thumper Round-Nose</title>
		  <desc>Bullet shown with and without shell</desc>
		  <metadata xmlns:html="http://www.w3.org/1999/xhtml">
			<html:img 

src="http://abbr.webng.com/CSSOFF2013/Resources/No-SVG/bullets.png" 
			  alt="Thumper Round-Nose" 
			  style="clip:rect(0px 646px 0px 486px); 

clip:rect(0px,646px,0px,486px);" />
		  </metadata>
		  <use xlink:href="#bullets-photo" 
			clip-path="url(#clip-bullet-4)"/>
		</svg></div></div>

		<div class="specs">
		<span class="calibre">7.62</span>
		<span class="manufacturer">Thumper</span>
		<span><span class="mass">220gr</span>
		  <span class="type"><abbr title="Round Nose">RN</abbr></span>
		</span></div>
	</div>
	<div id="bullet-thumperBTHP" class="bullet-entry">

		<div class="graphic-wrapper" style="max-width:160px; 

max-height:300px;">
		<div class="inner-wrapper" style="padding-bottom:200px; 

padding-bottom:calc(100% * 300/160)">
		<svg 
			xmlns="http://www.w3.org/2000/svg" version="1.1" 
			width="160px" height="300px"
			viewBox="648 0 160 300" overflow="hidden" 
			filter="url(#offset-shadow)" >
		  <title>Thumper Hollow-Point</title>
		  <desc>Bullet shown with and without shell</desc>
		  <metadata xmlns:html="http://www.w3.org/1999/xhtml">
			<html:img 

src="http://abbr.webng.com/CSSOFF2013/Resources/No-SVG/bullets.png" 
			  alt="Thumper Hollow-Point" 
			  style="clip:rect(0px 808px 0px 648px); clip:rect(0px, 808px, 

0px, 648px);" />
		  </metadata>
		  <use xlink:href="#bullets-photo" 
			clip-path="url(#clip-bullet-5)"/>
		</svg></div></div>

		<div class="specs">
		<span class="calibre">7.62</span>
		<span class="manufacturer">Thumper</span>
		<span><span class="mass">240gr</span>
		  <span class="type"><abbr title="Boat-tail Hollow 

Point">BtHP</abbr></span>
		</span></div>
	</div>
  </div>
 </article>


<!-- *****ARTICLE 5: Displaying (Famous) Blocks***** -->

 <article id="blocks">
  <div class="graphic-wrapper large" style="max-width:968px; max-height:635px;">
  

  <iframe id="map-abbeyroad" width="640" height="480" frameborder="0" scrolling="no" 

marginheight="0" marginwidth="0" 

src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Abbey+Road,+London,+United+Kingdom&amp;aq=0&amp;oq=Abbey+Road&amp;sll=32.977276,113.588333&amp;sspn=0.260936,0.445976&amp;t=m&amp;doflg=ptm&amp;ie=UTF8&amp;hq=&amp;hnear=Abbey+Rd,+London,+United+Kingdom&amp;ll=51.537527,-0.184879&amp;spn=0.025626,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
<a href="#afloat" class="close-map" title="Hide map"></a>
    <a href="#map-abbeyroad" title="Show map">
      <div class="inner-wrapper" style="padding-bottom:200px; padding-bottom:calc(100% * 

635/968)">
  <svg width="968px" height="635px" 
	viewBox="0 0 968 635" preserveAspectRatio="xMidYMin meet">
	<title>'Abbey Road' album cover</title>
	<desc>The famous cover of The Beatles' Abbey Road album depicts the four  
	band members crossing the titular street.</desc>
	<metadata xmlns:html="http://www.w3.org/1999/xhtml">
		<html:img class="large" 

src="http://abbr.webng.com/CSSOFF2013/Resources/AbbeyRoad.jpeg" 
		alt="'Abbey Road' album cover"
		width="968px" height="635px"/>
	</metadata>
	<defs>
	 <clipPath id="missing-corner" >
		<path d="M0,0 L0,635 L918,635 L968,585 L968,0 L0,0 Z"/>
	 </clipPath>
	 <linearGradient id="brown-gloss" 
		x1="0%" y1="0%" x2="50%" y2="50%">
		<stop offset="10%" style="stop-color:white" />
		<stop offset="90%" style="stop-color:#524741" />
	 </linearGradient>
	</defs>

	<image xlink:href="http://abbr.webng.com/CSSOFF2013/Resources/AbbeyRoad.jpeg" 
		 x="0" y="0" width="968px" height="635px" 
		clip-path="url(#missing-corner)" />
	<path d="M918,635 L968,585 
		C 948,583 938,580 918,585 
		C 938,605 923,615 918,635 Z" 
		fill="url(#brown-gloss)"
		stroke="#524741"/>

      </svg>
 </div></a></div>
	
  <hgroup>
	<h1>Displaying (famous) blocks</h1>
  </hgroup>
  <div class="article-text">
	<p><a href="#map-abbeyroad" title="Show map">Abbey Road</a> is a thoroughfare 

located in the borough of Camden and the City of Westminster in London, running 

roughly northwest to southeast through St. John's Wood, near Lord's Cricket Ground.  

It is part of the B507.  This road is best known for the Abbey Road Studios and the 

1969 album, <cite>Abbey Road</cite>, by The Beatles.</p>
	<span class="photo-credit">Photo: <a 

href="https://goo.gl/h44dc9">goo.gl/h44dc9</a></span>
  </div>
 </article>


<!-- *****ARTICLE 6: Transformers***** -->

 <article id="transformers" class="right sidebar">
	
  <div class="graphic-wrapper small" style="max-width:185px; max-height:244px">
  <div class="inner-wrapper" style="padding-bottom:200px; padding-bottom:calc(100% * 

244/185)">
  <svg width="185px" height="244px" 
	viewBox="0 0 185 244" preserveAspectRatio="xMidYMin meet">
	<title>'Transformers' DVD</title>
	<desc>The Blu-Ray DVD case for 'Transformers:Revenge of the Fallen'.</desc>
	<metadata xmlns:html="http://www.w3.org/1999/xhtml">
		<html:img class="small" 

src="http://abbr.webng.com/CSSOFF2013/Resources/transformers.png"
		alt="'Transformers' DVD" width="185px" height="244px" />
	</metadata>
	<image 

xlink:href="http://abbr.webng.com/CSSOFF2013/Resources/transformers.png" 
		 x="0" y="0" width="185px" height="244px" />
  </svg></div></div>
  <hgroup>
	<h1>Transformers</h1>
	<h2>Revenge of the Fallen</h2>
  </hgroup>
  <div class="article-text">
	<p>A noisy, underplotted, and overlong special effects extravaganza that lacks 

a human touch.</p>
	<dl class="movie-details rating">
	 <dt>Rotten Tomato Rating</dt> <dd>20%<number value="0.2" 

style="width:20%"/></dd>
	</dl>
	<dl class="movie-details event">
	 <dt>World Premiere</dt> 
	 	<dd><span>den Haag Theatre</span> 
		<span>The Netherlands</span>
		<time datetime="2011-06-23">June 23, 2011</time></dd>
	</dl>

<!-- Need custom HTML for rating, live link?, datatypes, etc. -->
  </div>
 </article>


<!-- *****ARTICLE 7: Border Bottom Line***** -->

 <article id="borderline">
	
  <div class="graphic-wrapper large" style="max-width:100%; max-height:150px;">
  <div class="inner-wrapper" style="padding-bottom:200px; padding-bottom:150px">
  <svg xmlns="http://www.w3.org/2000/svg" 
	version="1.1"
	xmlns:xlink="http://www.w3.org/1999/xlink"
 	width="100%" height="150px">

 	<title>Four Faces</title>
	<desc>Headshot photos of four people, two men and two women of different 

ethnicities,
	are displayed, upside-down, in a horizontal row.
	</desc>
	<metadata xmlns:html="http://www.w3.org/1999/xhtml">
		<html:img class="large" 

src="http://abbr.webng.com/CSSOFF2013/Resources/No-SVG/faces-cropped.png" 
		alt="Four Faces" width="732" height="157"/>
	</metadata>
	<defs>

	<clipPath id="clip-faces-1">
	 <path id="person1-path"
 		d="
		M 147.25,0.00
		C 134.75,1.25 128.25,5.75 119.25,9.75
		  112.25,13.00 109.25,11.75 106.01,21.00
		  103.50,28.75 107.25,43.50 107.75,48.75
		  108.25,52.75 107.75,55.75 108.00,61.25
		  111.25,61.25 112.25,63.25 113.59,65.04
		  115.77,69.01 116.75,79.00 115.69,85.41
		  114.80,86.62 114.19,86.53 113.00,87.00
		  115.13,93.44 115.26,99.73 115.25,106.50
		  116.00,113.25 113.25,109.25 114.50,122.25
		  118.75,109.00 119.75,122.75 113.25,131.50
		  117.75,128.25 113.50,133.25 115.75,135.50
		  110.87,137.36 106.25,141.25 95.00,143.50
		  91.00,143.50 86.00,146.25 82.50,147.00
		  75.75,147.75 69.00,145.00 65.50,147.00
		  61.75,144.50 55.75,142.75 55.75,142.75
		  55.75,142.75 52.75,135.50 47.00,138.00
		  47.00,138.00 48.00,130.00 44.00,132.00
		  43.25,126.50 37.25,121.00 38.25,112.75
		  35.75,108.00 38.25,106.25 37.12,96.00
		  41.25,93.25 36.75,90.00 39.75,85.00
		  36.25,85.00 38.50,74.00 38.50,74.00
		  40.00,67.75 40.23,61.66 48.75,60.25
		  48.75,52.25 52.75,38.25 52.00,29.50
		  48.50,27.50 50.25,22.00 41.50,16.50
		  30.46,7.94 14.50,5.00 5.00,0.00
		  5.00,0.00 147.25,0.00 147.25,0.00 Z" />
	</clipPath>

	<clipPath id="clip-faces-2">
	 <path id="person2-path"
 		d="
		M 334.75,0
		C 327.50,2.25 327.50,7.50 325.75,11.50
		  324.00,16.50 323.50,22.25 322.75,27.00
		  322.25,32.75 320.50,32.00 319.75,41.00
		  318.25,47.50 317.00,59.25 315.00,66.00
		  310.75,93.25 306.75,113.75 286.50,133.75
		  279.25,138.50 277.30,144.62 266.25,144.75
		  228.26,145.18 216.00,104.25 209.75,73.75
		  209.50,64.00 206.50,38.00 206.50,38.00
		  205.92,33.15 204.12,22.13 200.75,18.50
		  198.33,15.90 195.35,15.99 192.00,15.75
		  191.53,14.45 189.00,12.75 185.16,9.83
		  180.50,7.25 178.05,3.57 177.00,0.00
		  177.00,0.00 334.75,0 334.75,0 Z" />
	</clipPath>

	<clipPath id="clip-faces-3">
	 <path id="person3-path"
 		d="
		M 534.50,0.00
		C 534.50,0.00 502.00,11.00 501.00,19.50
		  495.25,20.50 495.75,37.75 503.00,41.00
		  503.00,41.00 509.25,49.75 509.50,52.75
		  518.00,52.25 515.75,57.75 520.17,63.01
		  521.83,65.88 524.10,68.70 524.72,72.00
		  525.97,78.64 522.82,82.71 516.00,81.00
		  516.00,81.00 519.00,88.00 519.00,88.00
		  519.00,88.00 517.00,88.00 517.00,88.00
		  518.45,93.03 518.93,94.70 519.00,100.00
		  519.12,110.21 519.04,117.85 513.52,127.00
		  500.70,148.24 464.50,153.13 445.09,138.78
		  433.13,129.94 429.24,119.10 427.92,105.00
		  427.18,98.45 426.38,96.84 427.92,90.00
		  420.81,89.42 416.99,84.09 418.57,77.00
		  418.57,77.00 421.27,70.00 421.27,70.00
		  422.20,67.69 423.39,64.20 424.97,62.31
		  431.00,59.25 432.00,63.25 431.66,55.94
		  432.35,54.16 435.25,47.50 435.00,43.00
		  434.50,40.46 431.73,41.96 431.00,38.00
		  431.00,35.00 426.00,34.00 426.00,34.00
		  420.25,31.50 419.25,30.25 420.75,26.00
		  414.25,25.50 408.25,18.25 384.75,12.75
		  384.75,12.75 361.14,3.02 357.00,0.00
		  357.00,0.00 534.50,0.00 534.50,0.00 Z" />
	</clipPath>

	<clipPath id="clip-faces-4">
	 <path id="person4-path"
 		d="
		M 727.00,0.00
		C 724.08,6.54 723.38,6.56 719.35,12.00
		  713.68,19.66 713.64,22.61 704.00,27.00
		  705.69,30.93 709.86,38.24 709.57,42.28
		  709.23,46.96 705.62,49.57 703.09,53.09
		  703.09,53.09 686.01,79.00 686.01,79.00
		  681.02,90.55 688.81,92.33 686.68,102.00
		  686.68,102.00 683.22,110.00 683.22,110.00
		  681.57,115.52 682.10,120.87 679.00,127.00
		  673.03,138.83 656.72,148.60 644.00,151.47
		  636.48,153.17 635.50,147.00 626.00,150.66
		  614.56,151.56 599.97,138.50 595.23,129.00
		  592.18,122.87 585.21,97.35 583.80,90.00
		  583.80,90.00 582.71,82.00 582.71,82.00
		  582.71,82.00 580.04,75.04 580.04,75.04
		  580.04,75.04 576.79,58.00 576.79,58.00
		  576.79,58.00 578.00,43.50 578.03,39.00
		  578.50,12.50 558.50,16.00 550.00,0.00
		  550.00,0.00 727.00,0.00 727.00,0.00 Z" />
	</clipPath>

	<image id="faces-photo" 

xlink:href="http://abbr.webng.com/CSSOFF2013/Resources/faces-cropped.jpeg" 
		x="0" y="0" width="732" height="157" />

	</defs>
	<!-- spread the four headshots across the width of the svg image, 
		scaling down if necessary to fit  -->

	<svg	x="0%" y="0px" width="25%" height="157px"
		viewBox="0 0 177 157"
		preserveAspectRatio="xMinYMin meet">

		<use xlink:href="#faces-photo" clip-path="url(#clip-faces-1)"/>
	</svg>

	<svg	x="25%" y="0px" width="25%" height="157px" 
		viewBox="177 0 177 157"
		preserveAspectRatio="xMidYMin meet">

		<use xlink:href="#faces-photo" clip-path="url(#clip-faces-2)"/>
	</svg>

	<svg	x="50%" y="0px" width="25%" height="157px" 
		viewBox="357 0 177 157"
		preserveAspectRatio="xMidYMin meet">

		<use xlink:href="#faces-photo" clip-path="url(#clip-faces-3)"/>
	</svg>

	<svg	x="75%" y="0px" width="25%" height="157px" 
		viewBox="550 0 177 157"
		preserveAspectRatio="xMaxYMin meet">

		<use xlink:href="#faces-photo" clip-path="url(#clip-faces-4)"/>
	</svg>
  </svg></div></div>

  <hgroup>
	<h1>Border bottom line</h1> 
	<h2>Awful immigration laws from around the world</h2>
  </hgroup>
  <div class="article-text">
	<ul>
	 <li><span class="keyterm country-name">Italy</span> penalizes illegal 

immigrants with a fine of &euro;5,000&ndash;10,000 and allows immigration officials to 

detain them for up to 6 months.</li>
	 <li><span class="keyterm country-name">Switzerland</span> immediately deports 

all convicted criminals from other countries and potentially even their family 

members.</li>
	 <li><span class="keyterm country-name">Australia</span> detains all 

non-citizens without a valid visa.</li>
	 <li><span class="keyterm country-name">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's family members to return to their country of origin.</li>
	 <li> The <span class="keyterm country-name">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>
	</ul>
  </div>
 </article>


<!-- *****ARTICLE 8: Overflow***** -->

 <article id="overflow">
  <div class="graphic-wrapper large" style="max-width:1058px; max-height:300px;" >
  <div class="inner-wrapper" style="padding-bottom:200px; padding-bottom:calc(100% * 

300/1058)"> 
  <svg  
 	width="1058" height="300px" 
	viewBox="0 0 1058 300" preserveAspectRatio="xMidYMin meet"
	xmlns="http://www.w3.org/2000/svg" version="1.1">

 	<title>Flood</title>
	<desc>Turbulent water, viewed from partially underneath the water's edge, 
		flows across the screen.
	</desc>
	<metadata xmlns:html="http://www.w3.org/1999/xhtml">
		<html:img class="large" 

src="http://abbr.webng.com/CSSOFF2013/Resources/water-mono.png"/>
	</metadata>
  <defs>

	<filter id="darkteal-colorizer" filterUnits="objectBoundingBox" 
		x="0%" y="0%" width="100%" height="100%">

	  <desc>Applies a white-darkteal(9% 17% 22%, x200646)-black
		 colour scale to the white-gray(6% 6% 6%)-black mono image</desc>

	  <feComponentTransfer xmlns="http://www.w3.org/2000/svg">
		<feFuncR type="gamma" amplitude="1" exponent="0.856" offset="0"/>
 		<feFuncG type="gamma" amplitude="1" exponent="0.630" offset="0"/>
		<feFuncB type="gamma" amplitude="1" exponent="0.538" offset="0"/>
	  </feComponentTransfer>
	</filter>

	<clipPath id="underwater" clippingPathUnits="userSpaceOnUse">		
	 <path id="water-path"
        	fill="black" stroke="none" 
        	d="
		M 21.00,89.88
		C 23.25,90.47 29.22,90.00 32.00,89.88
		  32.00,89.88 69.00,89.88 69.00,89.88
		  74.67,90.34 78.09,93.85 84.00,94.10
		  84.00,94.10 100.00,93.00 100.00,93.00
		  100.00,93.00 130.00,93.00 130.00,93.00
		  144.24,93.02 148.67,99.97 165.00,100.00
		  173.29,100.01 197.25,99.44 203.91,101.31
		  207.77,102.39 209.16,105.86 213.00,108.07
		  216.61,110.13 220.98,109.99 225.00,110.00
		  225.00,110.00 262.00,110.00 262.00,110.00
		  262.00,110.00 295.00,112.00 295.00,112.00
		  295.00,112.00 315.00,112.00 315.00,112.00
		  315.00,112.00 326.00,110.70 326.00,110.70
		  329.69,110.79 330.32,112.46 336.00,111.33
		  346.79,109.18 349.10,105.02 361.00,105.00
		  361.00,105.00 380.00,105.00 380.00,105.00
		  380.00,105.00 393.00,103.62 393.00,103.62
		  393.00,103.62 399.00,103.62 399.00,103.62
		  401.01,103.38 402.18,102.68 404.00,102.02
		  410.48,99.69 416.03,97.01 423.00,97.00
		  423.00,97.00 441.00,97.00 441.00,97.00
		  441.00,97.00 454.00,97.82 454.00,97.82
		  456.81,97.62 458.95,96.89 462.00,97.12
		  467.03,97.49 468.77,99.93 473.00,100.73
		  476.77,101.44 482.66,100.05 487.00,100.00
		  487.00,100.00 516.00,100.00 516.00,100.00
		  525.73,99.82 528.41,93.51 535.00,92.52
		  538.98,91.92 543.97,95.58 550.00,93.15
		  554.81,91.20 557.69,86.18 562.00,84.60
		  565.55,83.29 570.36,84.85 573.98,82.98
		  577.54,81.13 578.64,77.77 581.26,75.70
		  584.22,73.35 592.20,72.06 596.00,72.06
		  604.88,72.05 602.53,77.57 606.31,81.67
		  610.47,86.18 614.69,85.05 619.00,88.31
		  625.93,93.55 628.10,100.10 631.14,101.40
		  633.12,102.25 636.69,101.84 639.00,102.22
		  639.00,102.22 646.00,104.41 646.00,104.41
		  648.08,104.75 659.13,102.62 660.82,101.40
		  666.61,97.21 666.29,86.20 677.00,88.35
		  681.96,89.35 687.21,97.15 692.00,100.11
		  697.40,103.45 702.92,100.72 708.89,104.28
		  713.04,106.74 712.27,109.72 715.30,112.28
		  719.38,115.73 725.46,116.70 729.83,119.17
		  734.72,121.94 733.37,124.84 742.00,125.00
		  752.79,125.19 760.49,126.58 767.11,116.00
		  770.53,110.54 767.49,108.07 775.02,101.11
		  781.81,94.82 786.88,97.19 791.83,93.44
		  799.29,87.78 795.52,83.03 809.00,83.00
		  809.00,83.00 829.00,83.00 829.00,83.00
		  837.96,82.89 843.77,79.16 850.90,74.04
		  857.70,69.15 853.52,67.02 866.00,67.00
		  866.00,67.00 898.00,67.00 898.00,67.00
		  898.00,67.00 908.00,67.59 908.00,67.59
		  912.21,67.22 916.88,66.32 921.00,67.59
		  927.92,70.03 925.78,73.23 937.00,72.87
		  939.11,72.94 943.31,72.32 945.00,72.87
		  947.86,73.51 950.16,76.23 953.00,77.69
		  953.00,77.69 959.63,80.01 959.63,80.01
		  961.98,81.47 963.09,84.51 967.02,86.15
		  970.13,87.44 972.45,86.50 976.00,87.92
		  981.13,89.98 988.85,95.45 994.00,96.80
		  994.00,96.80 1016.00,96.80 1016.00,96.80
		  1032.50,97.03 1023.79,102.99 1044.00,107.14
		  1049.94,108.31 1053.36,104.90 1056.43,107.14
		  1058.41,108.67 1058.00,112.77 1058.00,115.00
		  1058.00,115.00 1058.00,407.00 1058.00,407.00
		  1058.00,407.00 0.00,407.00 0.00,407.00
		  0.00,407.00 0.00,79.00 0.00,79.00
		  7.19,81.12 15.23,88.22 21.00,89.88 Z" />
	</clipPath>

	
	<filter id="underwater-distort" 
		filterUnits = "userSpaceOnUse"
		primitiveUnits = "userSpaceOnUse" 
		x="-5%" y="-5%" width="110%" height="110%"  >
		<desc>
		 Applies horizontal distortion to the image, and slightly softens it.
		</desc>
		<feTurbulence xmlns="http://www.w3.org/2000/svg" 
			type="fractalNoise" baseFrequency="0.05 0.02"
			numOctaves="2" result="turbulence_3" data-filterId="3">
		</feTurbulence>

		<feDisplacementMap xChannelSelector="R" in="SourceGraphic"
			in2="turbulence_3" scale="25" result="distort">

		</feDisplacementMap>

		<feGaussianBlur in="distort" stdDeviation="1" />

	</filter>

	
	<mask id="abovewater-only" 
		maskUnits = "userSpaceOnUse"
		maskContentUnits = "userSpaceOnUse"
		x="0" y="0" width="1058px" height="407px" >

		<rect fill="white" 
		 x="0" y="0" width="100%" height="100%" />

		<use xlink:href="#water-path" fill="black"
		 x="0" y="0" />

	  <!-- i.e., only the canvas inside the path is masked -->
	</mask>


	<text id="overflow-text" 
		x="50" y="125" 
		transform="rotate(5)"
		font-family="sans-serif" font-size="100" 
		fill="#a0b4c0" >OVERFLOW</text>

  </defs>

  
	<use xlink:href="#overflow-text" clip-path="url(#underwater)"
		 filter="url(#underwater-distort)" />
 
  	<image xlink:href="http://abbr.webng.com/CSSOFF2013/Resources/water-mono.png" 
		x="0" y="0" width="1058" height="407" 
		filter="url(#darkteal-colorizer)" />

	<use xlink:href="#overflow-text" mask="url(#abovewater-only)"/>

  </svg></div></div>
  <hgroup>
	<h1>Overflow</h1>
  </hgroup>
  <div class="article-text">
	<p>On the night of <time datetime="1975-08-08">Aug 8, 1975</time>, a line of 

people frantically piled sandbags atop Henan Province's <a class="location" 

href="#map-overflow">Banqiao Dam</a> 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>
  <iframe id="map-overflow" width="640" height="480" frameborder="0" scrolling="no" 

marginheight="0" marginwidth="0" 

src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Banqi

ao+Reservoir,+Zhumadian,+Henan,+China&amp;aq=0&amp;oq=Ru+River+,+Henan+Province&amp;sl

l=40.948788,-72.012634&amp;sspn=0.46987,0.891953&amp;t=h&amp;doflg=ptm&amp;ie=UTF8&amp

;hq=&amp;hnear=Banqiao+Reservoir&amp;ll=32.977276,113.58799&amp;spn=0.138244,0.219727&

amp;z=12&amp;iwloc=A&amp;output=embed"></iframe>
  <a href="#overflow" class="close-map" title="Close map"></a>

	<p>Just after 1:00am, the sky cleared and stars emerged from behind the storm 

clouds.  There was an eerie calm as someone yelled, <q>The water level is going down! 

The flood is retreating!</q></p>
	<p>There was little chance to enjoy that calm.  One survivor recalled that a 

few seconds later it <q>sounded like the sky was collapsing and the earth was 

cracking.</q> 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>
  </div>
 </article>
</div>


<!-- *****FOOTER***** -->

 <footer id="footer">
	<div class="pubdata">
	 <a href="http://www.unmatchedstyle.com/cssoff/index.php" 
		title="Contest Information">
		<span class="date">2013</span>
	 	<span class="title">CSSOff</span></a>
	 <span class="issue">Volume 3</span>
	</div>
	<div class="pubaddress"><address>
	 <span class="street-name"><a href="#map-footer">Route Gregory</a>,</span> 
		<span class="street-number">Building 31</span><br/>
	 <span class="postcode">01630</span> 
		<span class="municipality">Prévessin&ndash;Moëns</span><br/>
	 <span class="country">France</span><br/>
	 <span class="telephone">+41 22 767 61 11</span><br/>
	</address></div>
	<iframe id="map-footer" width="300" height="300" frameborder="0" 

scrolling="no" marginheight="0" marginwidth="0" 

src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Route

+Gregory,+Building+31+01630+Pr%C3%A9vessin%E2%80%93Mo%C3%ABns+France&amp;aq=&amp;sll=5

4.498364,-115.000188&amp;sspn=16.715726,42.319336&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnea

r=Route+Gregory,+01630+Pr%C3%A9vessin-Mo%C3%ABns,+Ain,+Rh%C3%B4ne-Alpes,+France&amp;ll

=46.233706,6.041622&amp;spn=0.017811,0.025749&amp;z=14&amp;iwloc=A&amp;output=embed"><

/iframe>
	<a href="#footer" class="close-map" title="Close map"></a>
 </footer>
</div>
            
          
!
            
              @charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Oswald|Lato|Merriweather:normal|Lora:i");
@import url("https://fonts.googleapis.com/css?family=Lato:100&text=CSOF2013");
@import url("https://fonts.googleapis.com/css?family=Lora&text=ABCDEFGHIJKLMNOPQRSTUVWXYZ+0123456789");
@import url("https://fonts.googleapis.com/css?family=Lora:bi&text=Box+ModelBanqiaoDam");


/* ****MAIN PAGE STYLES**** */

/* over-ride browser defaults */
body,div,hgroup {
	margin:0;
	padding:0;
}
article {
	display:block;
	margin-top:1em;
}


* {
	overflow: visible; 
	position:relative;
}

h1,h2,h3,p {
	font-weight:normal;
	padding:0;
	margin:0;
	margin-bottom:0.5em;
} 
address, a {
	font-style:normal;
	color:inherit;
}

/* style head and foot, define article layout */
body {
	background-color: #a0b4c0;
	min-width:10em;
	overflow-x:hidden;
	/* removes horizontal scrollbars caused by 
		extra padding on SVG elements */
	overflow-y:auto !important;
	 /* necessary for IE8 to scroll */
}
div#warnings {
	display:none; /*** CHANGE LATER ***/
	margin:1em;
}
nav#ToC {
	width:95%;
	max-width:50em;
	min-width:8em;
	margin:auto;
	margin-bottom:-14em;/*8lines*1.5em +2em*/

	background-color:#cdc9dd;
	background-color:rgba(205,201,221,0.8);
	border:ridge 3px #5f5d66;
	color:#5f5d66;
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
  line-height:1em;
	z-index:0;
	transition:2s;
}
nav#ToC #go-to-top {
	display:none;
}
nav#ToC:before {
	content:"Contents:";
	display:block;
	text-decoration:underline;
	font-variant:small-caps;
	padding:0.5em 1em;
}
nav#ToC a {
	color:inherit !important;
	z-index:1;
}
nav#ToC a:hover, nav#ToC a:active {
	background-color:GoldenRod;
}
nav#ToC:hover {
	z-index:12;
}
nav#ToC ul {
	list-style:none;
	padding:0.25em 1em;
}
nav#ToC ul li {
	padding:0em 0em 0.5em 1em;
}
nav#ToC ul li:before {
	content:"";
	display:block;
	position:absolute;
	left:0em;
	top:0em;
	height:1em;
	width:1em;
  opacity:0.7;
	background-color: rgba(0,0,0,0);
	background:
 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'><path d='M10 70 L50 50 L90 70 L50 90 L10 70 Z' stroke='DarkSlateBlue' fill='none' stroke-width='10'/></svg>")
	 center no-repeat, rgba(0,0,0,0);
}

#page-wrapper {
	width:100%;
	max-width:60em;
	min-width:10em;

	margin: 0em auto;
	padding: 0em;
	border:ridge 3px #5e6c74;
  border-style:ridge none;

	background-color:white;
	z-index:1;
}

#content-wrapper, header, footer {
	margin:0em 10%; /* of page-wrapper */
	width:80%;

	transition:width 2s, margin 2s;	
}

@media screen and (min-width: 60em){
/* The page wrapper does not cover the screen, so add background logo */

 body {
	background-image:url("http://abbr.webng.com/CSSOFF2013/Resources/background-logo.svg");
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='500' height='500' viewBox='70 -70 565.685 565.685'> <defs> <style type='text/css' media='all'>%40font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/licensed/font?kit=2tKkRl62yUeXnAvvCjNQZs2B7aZpnwAFWsHmaziS7ys) format('woff2'), url(http://themes.googleusercontent.com/licensed/font?kit=Utnmi6UPIdOn9Khc2hZ6ms2B7aZpnwAFWsHmaziS7ys) format('woff');} text { font-family:Lato, 'Lato Hairline', Avant Garde, sans-serif; font-weight:100; fill: rgba(255,255,255,0.1); stroke: white; } <%2Fstyle> <g id='logo' width='400' height='100'> <text transform='rotate(90)' font-size='40'>2013</text> <text x='25' y='80' font-size='100'>CSSOFF</text> </g> </defs> <g transform='rotate(-45)'> <use xlink:href='%23logo' x='0' y='0' /> <use xlink:href='%23logo' x='-190' y='100' /> <use xlink:href='%23logo' x='210' y='100' /> <use xlink:href='%23logo' x='-400' y='200' /> <use xlink:href='%23logo' x='0' y='200' /> <use xlink:href='%23logo' x='-590' y='300' /> <use xlink:href='%23logo' x='-190' y='300' /> <use xlink:href='%23logo' x='210' y='300' /> <use xlink:href='%23logo' x='-400' y='400' /> <use xlink:href='%23logo' x='0' y='400' /> <use xlink:href='%23logo' x='400' y='400' /> <use xlink:href='%23logo' x='-190' y='500' /> <use xlink:href='%23logo' x='210' y='500' /> <use xlink:href='%23logo' x='-400' y='600' /> <use xlink:href='%23logo' x='0' y='600' /> <use xlink:href='%23logo' x='-190' y='700' /> </g></svg>");
   background-attachment:fixed;
 }
 #page-wrapper {
    border-style:ridge;
  }
}/* end min-width:60em */
@media screen and (min-width: 66em){
  /* Move ToC to side margin*/
 nav#ToC {
	position:fixed;
	left:0.5em; top:0.5em;
	width:auto;
	max-width: 6em;
	max-width: calc(50% - 30.5em - 10px);
    max-height:95%;
    overflow-y:auto;
    overflow-x:hidden;
	z-index:12;
 }
 nav#ToC #go-to-top {
 	display:block;
 }
} 

@media screen and (max-width: 20em){
 /* approaching min width for body and page-wrapper, 
	 so remove side margins, add scroll and crop SVG overflow */

 div#page-wrapper{
	overflow-x:hidden;
 }
 body{
	overflow-x:auto;
 }

 #content-wrapper, header, footer {
	margin:0.2em !important; 
	width:98% !important;
	width:calc(100% - 0.4em) !important;
 }
}

/* header styles */

header {
	height:5.25em; 
	 /* ~ height to bottom of div.pubdata =(0.75)*7em  */
}
header hgroup{
	position:absolute;
	left:0em;
	top:0em;

	background-color:#cdc9dd;
	color:white;

	/* Expand title padding to fill left margin of header box */
	margin:0em;
	margin-left:-12.5%;
	padding-left:12.5%;
	 /* of header width, equal to header margin (10% of page-width) */
	padding-top: 2.5em; /* 0.25em in title font size */
	padding-bottom: 25em; /* 2.5em in title font size */
	margin-bottom: -25em;
}
header h1 {
	height:100%;
	width:100%;
	margin:0em;
	padding:0em;
	z-index:4;

	font-family: Lato, 'Lato Hairline', Avant Garde, sans-serif;
	font-weight:100;
	font-size: 1000%;
	text-transform:uppercase;
	line-height:0.8em; /* height of two lines will be 16rem */
	text-align: justify;
	letter-spacing:-0.05em;
}
header h1:first-line {
	letter-spacing:0.05em;
}

header .pubdata {
	font-family: Lora, Georgia, serif;
	font-size: 75%;
	text-transform:uppercase;
	text-align:right;
	color:#b0aeb8;

	max-width:40%;
	min-width:10em;
	padding-top:6em; 
	 /*total height, with one line text=8em=6rem */
	position:absolute;
	top:0em;
	right:0em;
	z-index:6;
} 
header .pubdata > * {
	display:inline-block;
	background-color:rgba(255,255,255,0.5);
}

header .pubdata *:after {
	content: " –";
}

header .pubdata *:last-child:after {
	content: none;
}

article hgroup, article .article-text {
	z-index:5;
}
article .article-text {
	line-height:1.4;
}
.feature > *{
	font-size:larger;
}
.feature > hgroup {
	padding-top:1em;
}
.feature > hgroup:before{
	content:"FEATURE";
	font-family: Lora, Georgia, serif;
	font-size:75%;
	/* Fit into top padding */
	display:block;
	margin-top:-1.33em; 
	height:1.33em; 
}
.photo-credit, .photo-credit a{
	color:inherit;
	opacity:0.8;
	font-size: smaller;
}

/* Graphics sizing */

article > .graphic-wrapper {
  /* Fit width, height */
	width:100%;
	height:auto;
}
.graphic-wrapper > .inner-wrapper {
	width:100%;
	height:100%;
}
  /* where appropriate, each element will also have inline CSS:
	- setting max height and width, and/or (.graphic-wrapper)
	- creating a fixed aspect ratio using percentage padding values (.inner-wrapper).
  ( One day, maybe, we'll be able to skip the wrapper divisions and set
	all these dimensions on the SVG directly with the CSS attr() 
	function as described in W3 recommendedations. 
	But that day is not today. )
 */

.inner-wrapper > svg  {
 /* Fill wrapper, including padding */
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
 /* Allow room for overflow with extra padding/negative margins */
 /* (Chrome and others do not respect overflow:visible for SVG content */
	padding:20%;
	margin:-20%;
}
iframe {
	height:0em; width:0em;
	transition:2s;
	border:none;
}
iframe:target {
	width:100%; height:30em;
	/* individual elements should have max values set */
	border:inset 2px gray;
	border-color:rgba(100,100,100,0.5)
}
iframe + a.close-map {
	display:block;
	display:none;
}
a.close-map:after{
	content:"×";
}
iframe:target + a.close-map {
	display:block;
	float:right;
	height:1.5em;
	width:1.5em;
	background-color: white;
	opacity: 0.4;
	border: outset 2px gray;
	border-radius: 10%;
	text-align:center;
	vertical-align:middle;
	color:darkgray !important;
	text-decoration: none !important;
  z-index:10;
}
iframe:target + a.close-map:hover {
	background-color: black;
}
iframe:target + a.close-map:active {
	border-style:inset;
}

/* Fixes for browsers which don't support SVG:  */
svg title, svg desc {
 /* don't display, but let screen readers see the text */
	height:0px; width:0px; margin:0px; padding:0px;
	
}
.inner-wrapper  img{
	display:block;
	position:absolute !important;
	left:0; right:0; top:0; bottom:0;
	height:auto;width:auto;
	z-index:5; /* raise above svg */
}

/*Article layout */

article:first-of-type{
 /* move down and adjust size, color to match with header hgroup */
	color:#5f5d66;
	z-index:10;
	padding: 0em;
	margin-top: 10em; 
 /* 10em=difference between header height and height of two lines of title text*/
}
@media (min-width: 40em) {
 /* fit sidebars beside the following article, reduce margins between */

 article.sidebar {
	width:18.75%; /* 15% of page width */
	max-width: 10em;
 }
 article.sidebar > * {
	font-size:smaller;
 }
 article.sidebar + article + article {
	clear:both;
 }
 article.sidebar.left {
	float:left;
	clear:left;
	margin-right:1em;
	text-align:right;
 }
 article.sidebar.right {
	float:right;
	clear:right;
	margin-left:1em;
	text-align:left;
 }
 article.sidebar + article:not(.sidebar) {
	width:78%;
	 /* 100% - 18.75% sidebar - 3.125% (= 1/32 =1em/[0.8*40em]) middle margin */
	width:calc(81.25% - 1em);
	min-width:calc(100% - 10em);
 }
 article.sidebar.left + article:not(.sidebar){
	float:right;
	clear:right;
	margin-left:0em;
 }
 article.sidebar.right + article:not(.sidebar){
	float:left;
	clear:left;
	margin-right:0em;
 }

}/* end min-width: 25em */

@media (min-width: 45em) {
 /* fit first two articles side by side, 
	letting images push into content-wrapper margins*/

 header hgroup {
	width:17em; /* 1.7em in title font size */
 }
 header .pubdata > * {
	background-color:rgba(255,255,255,0);
 }
 header .pubdata {
	z-index:0;
 }
 article:first-of-type{
	float:left;
	margin-right:1.5em;
	width:15.5em; 
 }
 article:first-of-type > .graphic-wrapper{
	margin-left:-2.5em;
	margin-right:-0.5em;
	width:18.5em;
 }
 article:nth-of-type(2){
	/* fit to space beside first article*/
	float:right;
	margin-left:1.5em;
	width:17.5em; 
	width:calc(100% - 18.5em); 
	 /* (content width) - (left article) - (left margin) */
	 /* (100% >= 0.8*45em) - (17em) - (1.5em)*/
 }
 article:nth-of-type(2) > .graphic-wrapper{
	margin-left:-1em;
	margin-right:-4.5em;
	margin-right:calc(-12.5% - 2.5em); 
	 /* (-1)*10% of page, given that article is (80%page - 18em)*/
	width:23.5em;
	width:calc(112.5% + 3em);
	 /* (article width) - (neg left margin) - (neg right margin) */	
 }
 article:nth-of-type(3){
	clear:both;
 }
}/* end min-width:45em */

/* Footer styles */

footer{
	clear:both;
	border-top: solid 1px #b0aeb8;
	color: #b0aeb8;
	font-size:smaller;
	padding-bottom:3em;
	margin-bottom: 3.5em;
}
footer a {
	font-weight: bold;
	text-decoration: none;
	color: inherit;
}
footer > * {
	width:auto;
	margin-bottom:1em;

}
footer .pubdata {
	font-family: Lato, 'Lato Regular', Verdana, sans-serif;
	float:left;
}
footer .pubdata .title:after {
	content:","
}
footer .pubaddress{
	font-family: Merriweather, Times New Roman, Times, serif;
	float:right;
	text-align:right;
}
 footer .pubaddress .street-name {
	font-weight: bold;
}
footer:after {
	content:"";
	display:block;
	clear:both;
}
footer iframe {
	max-width:50%;
	margin:auto;
	max-height:10em;
	min-width:9.5em;
}


/* ****ARTICLE 1 STYLES**** */
 #boxes {
	text-align:center;
 }

 #boxes h1{
	font-family: 'Lora Bold Italic', Lora, Georgia, serif;
	font-style:italic;
	font-weight:bold;
	text-transform:capitalize;
	margin-top:0.5em;
 }
 #boxes .article-text{
	font-family: Lato, 'Lato Regular', Verdana, sans-serif;
 }
 #boxes iframe {
	max-width:100%;
	max-height:12em;
 }

/* ****ARTICLE 2 STYLES**** */
 #positioning hgroup{
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
	color:#fdcd84;
	text-transform:uppercase;
	margin-top:-5.5em; /* ~2 lines in h1 font */
	margin-bottom:1em;
 }
 #positioning h1 {
	font-size:250%;
	width:auto;
	max-width:50%;
	line-height:1.1;
	background:linear-gradient( 
		to bottom left, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5));
	background:radial-gradient( 
		ellipse closest-side at 40% 75%, rgba(0,0,0,0.5), rgba(0,0,0,0) );
 }
 #positioning .article-text{
	font-family: Merriweather, Times New Roman, Times, serif;
 }
 #positioning .graphic-wrapper {
	z-index:1;
 }

/* ****ARTICLE 3 STYLES**** */
 #afloat h1 {
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
	color:#247a5a;
	padding:0em 0.5em;
 }
 #afloat .article-text {
	font-family: Lato, 'Lato Regular', Verdana, sans-serif;
	padding:0em 1em;
 }
 #afloat .graphic-wrapper {
	position:absolute;
	bottom:-2em;
	left:0em;
	right:0em;
	width:auto;
	z-index:7;
 }
 #afloat:after {
	/* add empty element to hold space for graphic */
	content:"";
	display:block;
	width:100%;
	padding-bottom:200px;
	margin-bottom:-1em;
 }
 #afloat iframe {
	max-width:100%;
	max-height:15em;
 }

/* ****ARTICLE 4 STYLES**** */
 #bullets hgroup{
	display:block;
	border:solid 1px #e0e0e0;
	border-style:solid none;
	padding:0.5em;
	text-align:center;
	margin:1em 0em;
 }
 #bullets hgroup > * {
	display:inline;
	text-transform:uppercase;
	font-size:medium;
	vertical-align:middle;	
 }
 #bullets h1{
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
	color: #a97d35;
 }
 #bullets h1:after{
	content:".  ";
 }
 #bullets h2{
	font-family: Lato, 'Lato Regular', Verdana, sans-serif;
	color: #e0c167;
	text-transform:uppercase;
	font-size:0.8em;
 }
 #bullets .bullet-entry {
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
	color: #e0e0e0;
	float:left;
	border:solid 1px #e0e0e0;
	border-style:none solid none none;

	width:19%;
	width:calc(20% - 4px);
	min-width: 7em;
	min-height: 18em;
	
 }
 #bullets .bullet-entry:last-child {
	border-style:none;
 }
 #bullets .article-text:after {
	content:"";
	display:block;
	clear:left;
 }
 #bullets .specs {
	text-align:center;
	font-size:larger;
	line-height:1.2;

	display:block;
	position:absolute;
	left:5px; right:5px; width:auto;
	bottom:0;
		
 }
 #bullets .bullet-entry > .graphic-wrapper {
	z-index:8;
 }

 #bullets .specs > * {
	display:block;
	width:100%;
	font-size:larger;
 }
 #bullets .specs .manufacturer{
	text-transform:uppercase;
 }

/* ****ARTICLE 5 STYLES**** */
 #blocks {
	color:white;
	background-color: #524741;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.3)), #524741;
	font-family: Merriweather, Times New Roman, Times, serif;
	font-size:larger;
	margin-top:0em;
 }
 #blocks:before {
	/* spacer for hgroup */
	content:"";
	display:block;
	height:5em;	
 }
 #blocks hgroup{
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
	text-transform:uppercase;
	font-size:200%;
	line-height:1em;
	text-align:center;

	position:absolute;
	top:0em;
	left:0em; right:0em; width:auto;
	padding:0.75em 0em;
	vertical-align:middle;
	height:2.5em;
 }
 #blocks hgroup > * {
	margin:0em auto;
	font-size:inherit;
 }
 #blocks .article-text {
	padding:1em;
 }
 #blocks .graphic-wrapper {
	border:darkGray inset 4px;
	border-style:inset none;
	border-color:rgba(50,50,50,0.5)
    overflow:hidden;
 }
 #blocks iframe{
	position:absolute;
	right:0em;
	bottom:0em;
	height:99% !important;
	width:99% !important;
  transition:0s;
 }
 #blocks .inner-wrapper {
	z-index: 4;
  margin:0em; padding:0em; 
  overflow:hidden;
 }
#blocks  svg{
	transition:2s;
}
 #blocks iframe:target ~ a >.inner-wrapper svg  {
  left:-95%; top:-92%;
 }
 #blocks iframe + a.close-map {
   position:absolute;
	bottom:2.5em;
  right:0.5em;
 }
 #blocks a:hover {
	outline:solid medium gray;
 }

/* ****ARTICLE 6 STYLES**** */
 #transformers{
	color:white;
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
	text-transform:uppercase;

	background-color: #3a83bb;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><circle cx='50%' cy='100%' r='10px' fill='white'/></svg>"),
		linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0) 20%),
		#3a83bb;
	background-position: bottom, top;
	background-repeat: no-repeat, no-repeat; 

	padding-bottom:1.5em;
 }
 #transformers > hgroup {
	margin:0em 10px;
 }
 #transformers .graphic-wrapper {
	margin-top:-3em;
	margin-bottom:1em;
	z-index:7;
 }
 #transformers h1 {
	font-size:160%;
	margin:0em;
 }
 #transformers h2 {
	font-size:100%;
	margin:0em;
 }
 #transformers hgroup {
	border-bottom: solid 5px #619cc9;
	padding-bottom: 0.5em;
 }
 #transformers .article-text > * {
	padding-left:10px;
	padding-right:10px;
 }
 #transformers .article-text p {
	font-family: 'Lora Italic', Lora, Georgia, serif;
	font-style:italic;
	text-transform:none;
	padding-top:0.5em;
	padding-bottom:0.5em;
	border-bottom: dashed 1.5px #234f70;
	margin:0em;
 }
 #transformers dl, #transformers dd {
	margin:0em;
 }
 #transformers .movie-details dd > *{
	display:block;
	margin:0em; padding:0em;
 }
 #transformers .movie-details dt,
 #transformers .movie-details dd > *:nth-child(2n){
	color: #619cc9;
 }
 #transformers .rating{
	border: solid 5px #3476a8;
	border-style: solid none;
	padding-top:0.5em;
	padding-bottom:1em;
 }
 #transformers .rating + *{
	border-top: dashed 1.5px #234f70;
 }
 #transformers .rating dt{
	display:block;
	float:left;
	width:45%;
	margin-bottom:1em;
 }
 #transformers .rating dd {
	display:block;
	width:100%;
	font-size:250%;
	text-align:right;
	border-bottom: solid 5px #619cc9;
 }
 #transformers .rating dd number{
	display:block;
	position:absolute;
	left:0em; bottom:-5px; height:0em;
	border-bottom: solid 5px white;	
 }
 #transformers .rating dd:after {
	content:"";
	display:block;
	clear:both;
 }
 #transformers .event {
	text-align:center;
 }
 #transformers .event dt {
	font-size:smaller;
	width:100%;
	margin-top:1.5em;
	vertical-align:top;
 }
 #transformers .event dt:before, #transformers .event dt:after {
	content:"";
	display:block;
	height:1em;
	width:15%;
	background-color:#619cc9;
 }
 #transformers .event dt:before {float:left;}
 #transformers .event dt:after {float:right;}
 #transformers .event dd, #transformers .event dd time {
	font-size:larger;
 }

/* ****ARTICLE 7 STYLES**** */
 #borderline .graphic-wrapper{
	margin-top:-1.1em;
	overflow:hidden;
 }

 #borderline hgroup{
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
	line-height:1;
 }
 #borderline h1{
	text-transform:uppercase;
	border-bottom:solid 0.25em black;
	font-size:400%;
	margin-bottom:0em;
	padding-bottom:0.25em;
	
 }
 #borderline h2{
	border:solid 0.1em black;
	border-style: none none solid none;
	font-size:150%;
	padding:0.5em 0em;
 }
 #borderline h2:after {
	content:".";
 }
 #borderline ul{
	padding:0;
	margin:0;
	font-family: Merriweather, Times New Roman, Times, serif;
 }
 #borderline li{
	display:inline;
 }
 #borderline li:before{
	content:" \2022\00A0 ";
	font-weight:bold;
 }
 #borderline li:first-child:before{
	content:"";
 }
 #borderline li .keyterm {
	font-weight:bold;
 }

/* ****ARTICLE 8 STYLES**** */
 #overflow h1, #overflow svg text{
	font-family: 'Oswald Regular', Oswald, Tahoma, sans-serif;
	text-transform:uppercase;
	color:#a0b4c0;

	transition: transform 5s ease 1s;
	-webkit-transition: -webkit-transform 5s ease 1s;
 }
 #overflow h1 {
	height:0em;
	overflow:hidden;
 }
 #overflow .graphic-wrapper{
	margin-bottom:-10%;
 }
 #overflow svg:hover text, #overflow:target svg text {
	transform: translate(1em,2em) rotate(-4deg);
	-webkit-transform: translate(1em,2em) rotate(-4deg);
 }
 #overflow .article-text{
	font-family: 'Lora Italic', Lora, Georgia, serif;
	font-style:italic;	
	color:#5e6c74;
 }
 #overflow a{
	color:inherit;
	font-weight:bold;
	text-decoration:none;
 }
 #overflow a:hover, #overflow a:active{
	text-decoration:underline;
 }
 #overflow p {
	max-width:35em;
 }
 #overflow p:first-of-type {
	text-align:right;
	margin:0.5em 0em 1em auto;
	transform:rotate(3deg);
 }
 #overflow p:nth-of-type(2) {
	margin:0.5em auto 1em 0em;
	transform:rotate(-1deg);
 }
 #overflow p:nth-of-type(3) {
	margin:0.5em auto 1em auto;
	transform:rotate(1deg);
 }
 #overflow iframe {
	max-width:100%;
	max-height:30em;
 }
@media print {
 .article-text, h1, h2 {
	color:black !important;
	background-color:white !important;
 }
 
 iframe {
	float:right;
	width:7.5em;
	height:7.5em;
	max-width:35%;
 }
 
/* Convert links to functional information */
 a {
	text-decoration: inherit;
	font-style:inherit;
	font-weight:inherit;
	color:inherit;
 }
 a:after { 
	content:" <" attr(href) "> ";
 } 
 a[href|=\0023 map]:after {
	content:""
 }

/* page break suggestions */
 article > hgroup, header, footer {
	page-break-inside: avoid;
 }
 article > hgroup:last-child, dt {
	page-break-after: avoid;
 }
 .article-text {
	orphans:2;
	widows:2;
 }

<!--[if gt IE 8]><!-->
}
<!--<![endif]-->




            
          
!
999px
Loading ..................

Console