/gist:84795387d09fe08ee8b6

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<meta charset="utf-8">
	<title>Demo: Interactive World Javascript Map</title>
	<script src="raphael-min.js"></script>
	<script src="worldmap.js"></script>

	<style>
	body {
		font: .88em/1.53em Arial, Helvetica, sans-serif;
		margin: 30px auto;
		color: #999;
	}


.loader {
    -webkit-animation: pulsate 1.5s ease-out; -webkit-animation-iteration-count: infinite;
        }

@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(1,1); opacity: 0.0;}
    50% {-webkit-transform: scale(1,1);opacity: 1.0;}
    100% {-webkit-transform: scale(1,1); opacity: 0.0;} }

	h1 {
		font-size: 1.3em;
		margin: 0 0 10px;
		color: #000;
	}
	h2 {
		font-size: 2.2em;
		line-height: 1.1em;
		margin: 0 0 10px;
		color: #000;
	}
	a {
		color: #69C;
		text-decoration: none;
	}
	a:hover {
		color: #F30;
	}
	p {
		margin: 0 0 10px;
	}
	em {
		font: italic 100% "Times New Roman", Times, serif;
	}
	.credits {
		border-bottom: solid 1px #eee;
		padding-bottom: 10px;
		margin: 0 0 50px;
	}
	#pagewrap {
		margin: 0 auto;
		width: 800px;
		max-width: 94%;
	}

	#map {
		width: 100%;
	}
	</style>
</head>

<body>
<div id="pagewrap">
		<h2>Demo: Interactive World Javascript Map</h2>
		<p class="credits">Tutorial by <a href="http://simplemaps.com">Chris Youderian</a> (read related <a href="http://webdesignerwall.com/tutorials/interactive-world-javascript-map">article</a>)</p>

		<h1 id="location_name">Hover over a city to see its name</h1>
	<div id="map"></div>
		<i><a href="img/credits.txt">Photo Credits</a></i>
	</div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<meta charset="utf-8">
	<title>Demo: Interactive World Javascript Map</title>
	<script src="raphael-min.js"></script>
	<script src="worldmap.js"></script>

	<style>
	body {
	font: .88em/1.53em Arial, Helvetica, sans-serif;
	margin: 30px auto;
	color: #999;
	}







	.loader {
	-webkit-animation: pulsate 1.5s ease-out; -webkit-animation-iteration-count: infinite;
	}

	@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(1,1); opacity: 0.0;}
	50% {-webkit-transform: scale(1,1);opacity: 1.0;}
	100% {-webkit-transform: scale(1,1); opacity: 0.0;} }

	h1 {
	font-size: 1.3em;
	margin: 0 0 10px;
	color: #000;
	}
	h2 {
	font-size: 2.2em;
	line-height: 1.1em;
	margin: 0 0 10px;
	color: #000;
	}
	a {
	color: #69C;
	text-decoration: none;
	}
	a:hover {
	color: #F30;
	}
	p {
	margin: 0 0 10px;
	}
	em {
	font: italic 100% "Times New Roman", Times, serif;
	}
	.credits {
	border-bottom: solid 1px #eee;
	padding-bottom: 10px;
	margin: 0 0 50px;
	}
	#pagewrap {
	margin: 0 auto;
	width: 800px;
	max-width: 94%;
	}

	#map {
	width: 100%;
	}
	</style>
	</head>

	<body>
	<div id="pagewrap">
	<h2>Demo: Interactive World Javascript Map</h2>
	<p class="credits">Tutorial by <a href="http://simplemaps.com">Chris Youderian</a> (read related <a href="http://webdesignerwall.com/tutorials/interactive-world-javascript-map">article</a>)</p>

	<h1 id="location_name">Hover over a city to see its name</h1>
	<div id="map"></div>
	<i><a href="img/credits.txt">Photo Credits</a></i>
	</div>
	</body>

	</html>