seantimm/content.html

## content.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Default Styles</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="remix">
  <tr><td>Item One</td><td>Subitem One</td></tr>
  <tr><td>Item Two</td><td>Subitem Two</td></tr>
</table>

<dl class="remix">
  <dd><span>Name</span><span>Type</span></dd>
  <dt>Barney the Dinosaur</dt>
  <dd><span>Barney</span><span>Dinosaur</span></dd>

  <dt>Mickey Mouse</dt>
  <dd><span>Mickey</span><span>Mouse</span></dd>
</dl>

<!-- Code below is to toggle source and load scripts -->
<button id="source">Toggle Source</button>
<script type="text/javascript"
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<script src="https://gist.github.com/2096690.js" type="text/javascript"></script>
</body>
</html>

## script.js
$(function() {
  $(".remix").on("click", function(event) {
    event.delegateTarget.className = "";
  });
  // Code to support toggling scripts
  $("#source").on("click", function(event) {
    $(".gist").toggle();
  });
});

## style.js
body {
  font-size: 4em;
}

table.remix, table.remix tr {
  border: none;
  display: block;
  width: auto;
}

table.remix td {
  border: none;
  display: list-item;
  list-style-type: disc;
  list-style-position: inside;
  margin: 0;
}

table.remix td + td {
  list-style-type: circle;
  padding-left: .5em;
}

dl.remix {
  display: table;
  width: 100%;
  border: 1px solid grey;
  border-spacing: 2px;
}

dl.remix dt {
  display: none;
}

dl.remix dd {
  display: table-row;
}

dl.remix dd > span {
  display: table-cell;
  border: 1px solid grey;
}

dl.remix dd:first-child span {
  text-align: center;
  font-weight: bold;
}

table, table td {
  border: 1px solid grey;
}

table {
  width: 100%;
}

/* end example */

/* Styles to support toggling the source view */
.gist {
  font-size: 0.5em;
  display: none;
}

div.gist .gist-file {
  position: relative;
  margin: 3em 0;
}

.gist-meta {
  position: absolute;
  top: -2.5em;
  left: -30000px;
}

.gist-meta a {
  display: none;
}

.gist-meta a:nth-child(2) {
  position: relative;
  padding-left: 30000px;
  display: inline;
}

#source {
  float: right;
}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head><title>Default Styles</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<table class="remix">
	<tr><td>Item One</td><td>Subitem One</td></tr>
	<tr><td>Item Two</td><td>Subitem Two</td></tr>
	</table>

	<dl class="remix">
	<dd><span>Name</span><span>Type</span></dd>
	<dt>Barney the Dinosaur</dt>
	<dd><span>Barney</span><span>Dinosaur</span></dd>

	<dt>Mickey Mouse</dt>
	<dd><span>Mickey</span><span>Mouse</span></dd>
	</dl>

	<!-- Code below is to toggle source and load scripts -->
	<button id="source">Toggle Source</button>
	<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
	<script src="https://gist.github.com/2096690.js" type="text/javascript"></script>
	</body>
	</html>
	$(function() {
	$(".remix").on("click", function(event) {
	event.delegateTarget.className = "";
	});
	// Code to support toggling scripts
	$("#source").on("click", function(event) {
	$(".gist").toggle();
	});
	});
	body {
	font-size: 4em;
	}

	table.remix, table.remix tr {
	border: none;
	display: block;
	width: auto;
	}

	table.remix td {
	border: none;
	display: list-item;
	list-style-type: disc;
	list-style-position: inside;
	margin: 0;
	}

	table.remix td + td {
	list-style-type: circle;
	padding-left: .5em;
	}

	dl.remix {
	display: table;
	width: 100%;
	border: 1px solid grey;
	border-spacing: 2px;
	}

	dl.remix dt {
	display: none;
	}

	dl.remix dd {
	display: table-row;
	}

	dl.remix dd > span {
	display: table-cell;
	border: 1px solid grey;
	}

	dl.remix dd:first-child span {
	text-align: center;
	font-weight: bold;
	}

	table, table td {
	border: 1px solid grey;
	}

	table {
	width: 100%;
	}

	/* end example */

	/* Styles to support toggling the source view */
	.gist {
	font-size: 0.5em;
	display: none;
	}

	div.gist .gist-file {
	position: relative;
	margin: 3em 0;
	}

	.gist-meta {
	position: absolute;
	top: -2.5em;
	left: -30000px;
	}

	.gist-meta a {
	display: none;
	}

	.gist-meta a:nth-child(2) {
	position: relative;
	padding-left: 30000px;
	display: inline;
	}

	#source {
	float: right;
	}