johntynan/gist:2491416

## gistfile1.html
<html><head><base href="http://mozillapopcorn.org:8888/templates/walking/">
  <title>Popcorn Maker: walking tour</title>


  <style type="text/css">
  html, body {
width: 100%;
padding: 0;
margin: 0;
}

body {
	background-color: #444444;
}

.toptext {
	color: white;
	opacity: 0.5;
	font-size: 20px;
	font-family: verdana;
	padding: 5px;
	z-index: 100;
}

#topbar {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 75px;
	width: 100%;
}

#tour_area {
	position: absolute;
	left: 0;
	top: 75px;
	bottom: 150px;
	height: 70%;
	width: 100%;
	z-index: 50;
}

#video-area {
  	position: absolute;
 	top: 75px;
  	left: 0;
	bottom: 150px;
	width: 100%;
	background: transparent;
	z-index: 101;
	pointer-events: none;
}

#timeline_area {
	position: absolute;
	bottom: 50px;
	height: 100px;
	background:rgba(0,0,0,.6);
	left: 0px;
	width: 100%;
}

#chapter_title {
	position: absolute;
	font-family: verdana;
	font-size: 21px;
	background:rgba(0,0,0,.6);
	bottom:100px;
	z-index: 1000;
	color: white;
	width:100%;
	text-align:center;
}

#chapter_title a {
	color: #DAA520;
}

#chapter_title a:hover {
	color: #DAA520;
}

#chapter_title_splash {
	font-family: verdana;
	font-size: 22px;
	background:rgba(0,0,0,.6);
	margin-top:175px;
	width: 600px;
	z-index: 1000;
	color: white;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#chapter_title_splash2 {
	font-family: verdana;
	font-size: 14px;
	background:rgba(0,0,0,.6);
	margin-top:125px;
	width: 800px;
	z-index: 1000;
	color: white;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#chapter_title_splash a {
	color: #c0c0c0;
}

#chapter_title_splash a:hover {
	color: #cccccc;
}

#chapter_title_splash2 a {
	color: #c0c0c0;
}

#chapter_title_splash2 a:hover {
	color: #cccccc;
}

#additional {
	position: absolute;
	top: 100px;
	right: 150px;
	height: 75%;
	width: 175px;
	z-index: 100;
}
.rightsized {
width: 128px;
height: 96px;
}

#footernav {
	color: white;
	font-size: 20px;
	font-family: verdana;
	bottom: 10px;
	width:100%;
	text-align:center
}

#tournav {
	color: white;
	font-size: 20px;
	font-family: verdana;
	position: absolute;
	bottom: 10px;
	width:100%;
	text-align:center
}

#footernav a {
	color: #DAA520;
}

#tournav a {
	color: #DAA520;
}

#lightbox {
  width: 100%;
  height: 100%;
  background: rgba(32,32,32,0.7);
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999999;
  display: none;
}
#lightbox img {
  position: relative;
  top: 200px;
}
#lightbox img:hover {
  cursor: pointer;
}
#additional-image-container {
  width: 310px;
  z-index: 150px;
}
.float-left {
  float: left;
}

  </style>
<script data-butter-exlude="true" type="text/javascript" src="https://browserid.org/include.js"></script><script src="../../butter/external/popcorn-js/popcorn.js"></script><script src="../../butter/external/popcorn-js/modules/player/popcorn.player.js"></script><script src="../../butter/external/popcorn-js/plugins/footnote/popcorn.footnote.js"></script><script src="../../butter/external/popcorn-js/plugins/attribution/popcorn.attribution.js"></script><script src="../../butter/external/popcorn-js/plugins/image/popcorn.image.js"></script></head><body class="butter-header-spacing">

<!-- Top area -->
<div id="topbar">

	<div class="toptext">
	My Tour
	</div>

</div>

  <!-- Middle area -->

<div>

	<div id="tour_area">
	<div style="display: none;">Here is some text.</div></div>

	<div id="video-area">
	</div>

  <!-- Sidebar -->

	<div id="additional">
  		<div id="photo-title" class="toptext">
  		Photos
  		</div>
  		<div id="additional-image-container">

  			<div class="float-left">
    			<div id="image1" class="showbox showoff"></div>
      			<div id="image2" class="showbox showoff"></div>
    		</div>

	    	<div style="">
    	  		<div id="image3" class="showbox showoff"></div>
    	  		<div id="image4" class="showbox showoff"></div>
   			 </div>
  		</div>
	</div>

</div>


<div id="timeline_area">
  <div id="chapter_title"><div style="display: none;">Here is a footnote.</div></div>
  <div id="narration" data-butter-source="http://videos-cdn.mozilla.net/serv/webmademovies/popcorn101.ogg">
  <audio src="http://videos-cdn.mozilla.net/serv/webmademovies/popcorn101.ogg"></audio></div>
</div>
<div id="tournav">
Made with <a href="http://mozillapopcorn.org">Mozilla Popcorn</a>
</div>

<div id="lightbox">
</div>


<div id="butter-modal-container"></div><script type="text/javascript">(function(){
var popcorn = Popcorn.smart( '#narration', 'http://videos-cdn.mozilla.net/serv/webmademovies/popcorn101.ogg', {} );
popcorn.text({
start:'0',
end:'3',
text:'Here is some text.',
target:'tour_area'});
popcorn.footnote({
start:'1',
end:'2',
text:'Here is a footnote.',
target:'chapter_title'});

 return popcorn;
}());</script></body></html>
	<html><head><base href="http://mozillapopcorn.org:8888/templates/walking/">
	<title>Popcorn Maker: walking tour</title>




	<style type="text/css">
	html, body {
	width: 100%;
	padding: 0;
	margin: 0;
	}

	body {
	background-color: #444444;
	}

	.toptext {
	color: white;
	opacity: 0.5;
	font-size: 20px;
	font-family: verdana;
	padding: 5px;
	z-index: 100;
	}

	#topbar {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 75px;
	width: 100%;
	}

	#tour_area {
	position: absolute;
	left: 0;
	top: 75px;
	bottom: 150px;
	height: 70%;
	width: 100%;
	z-index: 50;
	}

	#video-area {
	position: absolute;
	top: 75px;
	left: 0;
	bottom: 150px;
	width: 100%;
	background: transparent;
	z-index: 101;
	pointer-events: none;
	}

	#timeline_area {
	position: absolute;
	bottom: 50px;
	height: 100px;
	background:rgba(0,0,0,.6);
	left: 0px;
	width: 100%;
	}

	#chapter_title {
	position: absolute;
	font-family: verdana;
	font-size: 21px;
	background:rgba(0,0,0,.6);
	bottom:100px;
	z-index: 1000;
	color: white;
	width:100%;
	text-align:center;
	}

	#chapter_title a {
	color: #DAA520;
	}

	#chapter_title a:hover {
	color: #DAA520;
	}

	#chapter_title_splash {
	font-family: verdana;
	font-size: 22px;
	background:rgba(0,0,0,.6);
	margin-top:175px;
	width: 600px;
	z-index: 1000;
	color: white;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

	#chapter_title_splash2 {
	font-family: verdana;
	font-size: 14px;
	background:rgba(0,0,0,.6);
	margin-top:125px;
	width: 800px;
	z-index: 1000;
	color: white;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

	#chapter_title_splash a {
	color: #c0c0c0;
	}

	#chapter_title_splash a:hover {
	color: #cccccc;
	}

	#chapter_title_splash2 a {
	color: #c0c0c0;
	}

	#chapter_title_splash2 a:hover {
	color: #cccccc;
	}

	#additional {
	position: absolute;
	top: 100px;
	right: 150px;
	height: 75%;
	width: 175px;
	z-index: 100;
	}
	.rightsized {
	width: 128px;
	height: 96px;
	}

	#footernav {
	color: white;
	font-size: 20px;
	font-family: verdana;
	bottom: 10px;
	width:100%;
	text-align:center
	}

	#tournav {
	color: white;
	font-size: 20px;
	font-family: verdana;
	position: absolute;
	bottom: 10px;
	width:100%;
	text-align:center
	}

	#footernav a {
	color: #DAA520;
	}

	#tournav a {
	color: #DAA520;
	}

	#lightbox {
	width: 100%;
	height: 100%;
	background: rgba(32,32,32,0.7);
	text-align: center;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 999999;
	display: none;
	}
	#lightbox img {
	position: relative;
	top: 200px;
	}
	#lightbox img:hover {
	cursor: pointer;
	}
	#additional-image-container {
	width: 310px;
	z-index: 150px;
	}
	.float-left {
	float: left;
	}

	</style>
	<script data-butter-exlude="true" type="text/javascript" src="https://browserid.org/include.js"></script><script src="../../butter/external/popcorn-js/popcorn.js"></script><script src="../../butter/external/popcorn-js/modules/player/popcorn.player.js"></script><script src="../../butter/external/popcorn-js/plugins/footnote/popcorn.footnote.js"></script><script src="../../butter/external/popcorn-js/plugins/attribution/popcorn.attribution.js"></script><script src="../../butter/external/popcorn-js/plugins/image/popcorn.image.js"></script></head><body class="butter-header-spacing">

	<!-- Top area -->
	<div id="topbar">

	<div class="toptext">
	My Tour
	</div>

	</div>

	<!-- Middle area -->

	<div>

	<div id="tour_area">
	<div style="display: none;">Here is some text.</div></div>

	<div id="video-area">
	</div>

	<!-- Sidebar -->

	<div id="additional">
	<div id="photo-title" class="toptext">
	Photos
	</div>
	<div id="additional-image-container">

	<div class="float-left">
	<div id="image1" class="showbox showoff"></div>
	<div id="image2" class="showbox showoff"></div>
	</div>

	<div style="">
	<div id="image3" class="showbox showoff"></div>
	<div id="image4" class="showbox showoff"></div>
	</div>
	</div>
	</div>

	</div>


	<div id="timeline_area">
	<div id="chapter_title"><div style="display: none;">Here is a footnote.</div></div>
	<div id="narration" data-butter-source="http://videos-cdn.mozilla.net/serv/webmademovies/popcorn101.ogg">
	<audio src="http://videos-cdn.mozilla.net/serv/webmademovies/popcorn101.ogg"></audio></div>
	</div>
	<div id="tournav">
	Made with <a href="http://mozillapopcorn.org">Mozilla Popcorn</a>
	</div>

	<div id="lightbox">
	</div>




	<div id="butter-modal-container"></div><script type="text/javascript">(function(){
	var popcorn = Popcorn.smart( '#narration', 'http://videos-cdn.mozilla.net/serv/webmademovies/popcorn101.ogg', {} );
	popcorn.text({
	start:'0',
	end:'3',
	text:'Here is some text.',
	target:'tour_area'});
	popcorn.footnote({
	start:'1',
	end:'2',
	text:'Here is a footnote.',
	target:'chapter_title'});

	return popcorn;
	}());</script></body></html>