diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index d82a6ca..49cbdcb 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -25,22 +25,19 @@ https://creativecommons.org/publicdomain/
     local("BebasNeue"),
     url("/css/bebas/BebasNeue.woff") format("woff");
 }
-@font-face {
-  font-family: "PatrickHand";
-  src:
-    local("PatrickHand"),
-    url("/css/PatrickHand/PatrickHand-Regular.ttf") format("ttf");
-}
 :root {
 	--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
 	--text-primary: #4d4d4d; /* HPR Grey */
 	--banner-text-primary: #000000;
-	--background-secondary: #4d4d4d;
+	--banner-background-color: #40a5b9; 
+	/* --background-secondary: #4d4d4d; */
+	--background-secondary: #00003e;
 	--text-secondary: #dfdfdf;
 	--link-primary: #004852 /*#154a60*/;
 	--link-primary-hover: #b54c08/*#f8961e*/;
 	--link-secondary: #a8f8ff;
 	--link-secondary-hover: #f9e9c2;
+	--link-title-color: #00003e;
 
 	--lane-button-border: #80b4c0;
 	--input-border-primary: #4d4d4d;
@@ -53,12 +50,22 @@ https://creativecommons.org/publicdomain/
 	--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
 	--shadow-secondary-color: hsl(0, 0%, 30.2%);
 	--shadow-cards: var(--shadow-secondary-color);
+
+	--content-max-width: 1080pt;
+
   /* screen breakpoints */
 	--for-phone-only: 599px;
     --for-tablet-portrait-up: 600px;
     --for-tablet-landscape-up: 900px;
 	--for-desktop-up: 1200px;
     --for-big-desktop-up: 1800px; 
+
+	--default-header-x-font-weight: bold;
+	--default-header-x-margin: 1.25rem 0 0.75rem 0;
+	--default-header-1-font-size: 1.5rem;
+	--default-header-2-font-size: 1.45rem;
+	--default-header-3-font-size: 1.25rem;
+	--default-header-4-font-size: 1.15rem;
 }
 
 html {
@@ -80,24 +87,27 @@ body {
 	padding: 0;
 	min-height: 100vh;
 }
-
-body > nav {
+#top_navigation {
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: space-between;
 	background-color: var(--background-secondary);
 	color: var(--text-secondary);
+	padding: 0.5rem;
 }
-body > nav a {
+#top_navigation > nav a {
 	color: var(--link-secondary);
 }
-body > nav a:hover {
+#top_navigation > nav a:hover {
 	color: var(--link-secondary-hover);
 }
-body > nav ul {
+#top_navigation > nav menu {
 	background-color: inherit;
 	color: inherit;
 	margin: 0;
 	padding: 0.25rem;
 }
-body > nav ul li {
+#top_navigation > nav menu li {
 	display: inline-block;
 	background-color: inherit;
 	color: inherit;
@@ -106,23 +116,30 @@ body > nav ul li {
 	padding: 0;
 	padding-right: var(--link-spacing-horizontal);
 }
-body > nav ul li a {
+#top_navigation > nav menu li a {
 	padding: 0.25rem 0;
 }
 body > header {
+	padding: clamp(0.5rem, -0.25rem + 3vw, 1rem) 0.25rem;
+	background-color: var(--banner-background-color);
+	background-image: url("/images/main-header-background.png");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: left top;
+	color: var(--banner-text-primary);
+	align-items: center;
+	border-top: var(--background-secondary) solid 1rem;
+}
+body > header .bounding-box {
+	background: none;
 	display: flex;
 	flex-direction: row;
 	flex-flow: wrap;
 	justify-content: space-between;
-	padding: 0.25rem;
-	background-image: url("/images/hpr-splatter-logo.svg"), url("/images/main-header-background.png");
-	background-size: 59%, cover;
-	background-repeat: no-repeat, no-repeat;
-	background-position: right -15px top -20px, left top;
-	color: var(--banner-text-primary);
-	align-items: center;
+	max-width: var(--content-max-width);
+	margin: 0 auto;
 }
-body > header > * {
+body > header .bounding-box > * {
 	margin: 0;
 	padding: 0;
 	flex: 1 1 auto;
@@ -132,6 +149,9 @@ body > header > * {
 body > main {
 	flex: 1 0 auto;
 	padding: 0.25rem;
+	max-width: var(--content-max-width);
+	margin-left: auto;
+	margin-right: auto;
 }
 body > footer {
 	flex: 0 1 auto;
@@ -142,6 +162,10 @@ body > footer {
 	text-align: center;
 	line-height: 1.25;
 }
+body > footer #copyright {
+	max-width: var(--content-max-width);
+	margin: 0 auto;
+}
 body > footer a {
 	color: var(--link-secondary);
 }
@@ -174,27 +198,27 @@ blockquote {
 }
 
 h1 {
-	font-size: 1.5rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-1-font-size);
+	margin: var(--default-header-x-margin);
 }
 
 h2,
 article * h1,
 section > header:first-child {
-	font-size: 1.45rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-2-font-size);
+	margin: var(--default-header-x-margin);
 }
 
 h3,
 article * h2 {
-	font-size: 1.25rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-3-font-size);
+	margin: var(--default-header-x-margin);
 }
 
 h4,
 article * h3 {
-	font-size: 1.15rem;
-	margin: 1.25rem 0 0.75rem 0;
+	font-size: var(--default-header-4-font-size);
+	margin: var(--default-header-x-margin);
 }
 
 img {
@@ -202,7 +226,7 @@ img {
 	height: auto;
 }
 
-ul {
+dl, ul {
 	padding-left: 1.15rem;
 }
 
@@ -213,9 +237,28 @@ li {
 li:last-child {
 	margin-bottom: 0.25rem;
 }
+
+dt, dd {
+	line-height: 1.25;
+}
+
+dt {
+    display: list-item;
+    list-style-type: disc;
+	margin-bottom: 0.15rem;
+}
+
+dd {
+	margin-bottom: 0.35rem;
+	margin-left: 1rem;
+}
+
 a {
-	text-decoration: none;
 	color: var(--link-primary);
+	text-decoration-style: dotted;
+	text-decoration-color: inherit;
+    text-decoration-thickness: .125rem;
+    text-underline-offset: 0.2rem;
 }
 a:hover {
 	cursor: pointer;
@@ -257,15 +300,21 @@ article > p,
 	flex-wrap: wrap;
 	gap: 1.0rem;
 	justify-content: space-around;
-	justify-items: space-around;
-
+}
+.lane.stack {
+	flex-direction: column;
+	justify-content: flex-start;
+}
+.lane.stack > * {
+	flex: 1 0 100%;
 }
 #podcast_lane > .lane,
 #project_lane > .lane,
 #latest_lane.lane {
-	justify-content: flex-start;
+	justify-content: flex-between;
 }
-.lane > article {
+.lane > article,
+#hosts tr {
 	/* Add shadows to create the "card" effect */
 	border-top: thin solid var(--shadow-cards);
 	border-left: thin solid var(--shadow-cards);
@@ -278,7 +327,8 @@ article > p,
 	overflow-x: scroll;
 	padding-bottom: 1rem;
 }
-.lane > article:hover {
+.lane > article:hover,
+#hosts tr:hover {
 	box-shadow: 
       4px 8px 8px var(--shadow-cards),
       8px 16px 16px var(--shadow-cards);
@@ -287,7 +337,8 @@ article > p,
 	margin-left: 1rem;
 	margin-right: 1rem;
 }
-.lane > article > header {
+.lane > article > header,
+.lane > article > h3 {
 	background: var(--background-secondary);
 	padding: 1.5rem 1rem 1rem 1rem;
 	margin: 0;
@@ -295,12 +346,22 @@ article > p,
 	font-size: 1.45rem;
 	color: var(--background-primary);
 }
-.lane > article > header a {
+.lane > article > header a,
+.lane > article > h3 a {
 	color: var(--link-secondary);
 }
-.lane > article > header a:hover {
+.lane > article > header a:hover,
+.lane > article > h3:hover {
 	color: var(--link-secondary-hover);
 }
+.lane.stack> * > header * {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+.lane.stack > * > header p {
+	font-size: var(--default-header-4-font-size);
+	margin-left: 22px;
+}
 a.lane-button {
 	display: flex;
 	flex-direction: column;
@@ -398,30 +459,60 @@ section:nth-of-type(even) .lane a:nth-of-type(4) {
 	text-transform: uppercase;
 }
 #tag_line {
-	line-height: 1;
+	line-height: 1.1;
 }
 #tag_line *,
 #title * {
 	margin: 0;
 	padding: 0;
+	flex: 1 1 auto;
+	background: none;
 }
-#title h1 {
+#title {
+	background-image:  url("/images/hpr-splatter-logo.svg");
+	background-repeat: no-repeat;
+	background-size: 15rem;
+	background-position: left 8.5em top -2em;
+}
+#title a {
+	color: var(--link-title-color);
+}
+#title a:hover {
+	color: var(--link-primary-hover);
+}
+#title #site_acronym {
 	font-size: 7.5rem;
 	letter-spacing: -0.65rem;
 	line-height: 0.75;
+	margin-bottom: 0.25rem;
+	color: transparent;
 }
-#tag_line h2 {
+#title #site_acronym a {
+	text-decoration: none;
+	text-shadow: 0 1px var(--link-secondary);
+}
+#title #site_name {
+	font-size: var(--default-header-2-font-size);
+	font-weight: bold;
+}
+#tag_line {
+	text-align: center;
+}
+#tag_line #tag1,
+#tag_line #tag2 {
 	text-transform: uppercase;
 	font-family: "BebasNeue", sans-serif;
-	font-size: 1.15rem;
+	font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size));
+	font-weight: var(--default-header-x-font-weight);
 	letter-spacing: 0.05rem;
 }
-#tag_line h2:first-child {
-	font-size: 2rem;
+#tag_line #tag1 {
+	font-size: clamp(2.1rem, calc(100vw - 360px + 2.1rem), 2.3rem);
 }
-#tag_line h3 {
+#tag_line #tag3 {
+	text-align: center;
 	text-transform: capitalize;
-	font-size: 1.15rem;
+	font-weight: var(--default-header-x-font-weight);
 }
 #site_url {
 	font-family: "GNUTypewriter", monospace;
@@ -448,7 +539,7 @@ fieldset > table {
 	width: calc(100vw + -16vw + -1rem);
 	max-width: 100%;
 }
-
+fieldset > input,
 fieldset > table td input,
 fieldset > table td textarea {
 	width: calc(100vw + -16vw + -1.5rem);
@@ -483,41 +574,127 @@ fieldset > table td input[type="radio"] {
 	width: initial;
 	margin-bottom: 0.5rem;
 }
-
-fieldset > input {
-	background: var(--background-secondary);
-	color: white;
-	font-weight: 600;
-	padding: 0.5rem;
-	border: thin solid var(--input-border-primary);
-	border-radius: 0.2rem;
+#search form {
+	flex: 1 1 auto
+}
+#search fieldset {
+	padding-top: 1rem;
+}
+#search fieldset > legend {
+	font-weight: var(--default-header-x-font-weight);
+}
+#search fieldset > input {
+	width: 94%;
+}
+#search fieldset > input[type="submit"] {
+	background-color: var(--background-secondary);
+	color: var(--text-secondary);
+	width: 100%;
+}
+#search fieldset > input[type="submit"]:hover {
+	background-color: var(--link-primary-hover);
+	color: var(--background-primary);
+}
+#search fieldset > p {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
 }
 .no-css {
 	display: none;
 }
+#tags .date {
+	margin:0;
+	font-size: 1rem;
+}
+#tags #tag_initial_letter_index {
+	columns: 3 auto;
+}
+#tags #tag_initial_letter_index  li {
+	font-weight: bold;
+	list-style: none;
+}
+#tags .tag-index {
+	columns: 3 calc(var(--for-tablet-landscape-up) /3 );
+	column-gap: 1rem;
+}
+#tags .index-link {
+	text-align: right;
+}
+#comments > article > .show-meta {
+	font-size: smaller;
+}
+#hosts tr {
+	gap: 0;
+	justify-content: flex-start;
+}
+#hosts td {
+	display: inline-block;
+}
+#hosts td:nth-child(-n+2) {
+	background: var(--background-secondary);
+	color: var(--background-primary);
+}
+#hosts td:nth-child(-n+2) a {
+	color: var(--link-secondary);
+}
+#hosts td:nth-child(-n+2) a:hover {
+	color: var(--link-secondary-hover);
+}
+#hosts td:nth-child(2) {
+	padding: 0.25rem 0 0 8px;
+	width: calc(100% - 90px);	
+}
+
+#hosts td:nth-last-child(-n+2) {
+	padding: 0.5rem 0 0 95px;
+}
+#hosts td:nth-last-child(2)::before {
+	content: ;
+	content: "License: ";
+}
+#hosts td:nth-last-child(1)::before {
+	content: "Last Show: ";
+}
+#hosts td > img {
+	border-radius: 0.25rem;
+}
+.series-description {
+	margin: 0;
+	padding: 0;
+	font-style: italic;
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
 @media (min-width: 600px) {
-	body > header {
-		background-size: 200pt, cover;
-		background-position: left 128pt top -12pt, left top;
+	body > header .bounding-box {
 		justify-content: space-between;
 	}
 	#tag_line {
-		text-align: center;
+		line-height: 1;
 	}
-	#title h1 {
+	#title #tag1 {
 		font-size: 7.5rem;
 		letter-spacing: -0.65rem;
 		line-height: 0.75;
 	}
-	#tag_line h2 {
+	#tag_line #tag2 {
 		font-size: 1.82rem;
 		letter-spacing: 0.05rem;
 	}
-	#tag_line h2:first-child {
+	#tag_line #tag1 {
 		font-size: 4rem;
 	}
-	#tag_line h3 {
+	#tag_line #tag3 {
 		font-size: 1.85rem;
+		letter-spacing: 0.05rem;
 		margin-left: 5rem;
 	}
 	#qr_code {
@@ -568,23 +745,39 @@ fieldset > input {
 		margin-bottom: 1.0rem;
 		width: 100%;
 	}
+	#search fieldset > input {
+		width: 55%;
+	}
+	#search fieldset > input[type="submit"] {
+		width: 40%;
+	}
 	body > main {
 		padding: 0.25rem 2rem;
 	}
-	.lane > article {
-		max-height: 40vw;
-		overflow-y: scroll
-	}
 	#latest_lane.lane section > ul {
 		margin: 0.5rem 3rem 0 1rem;	
 	}
+	#hosts tbody.lane.stack {
+		flex-direction: row;
+		justify-content: space-between;
+		gap: 1rem
+	}
+	#hosts tr {
+		flex: 1 1 45%;
+		max-width: 45%;
+	}
 }
 @media (min-width: 900px) {
-	.lane > article {
-		flex-basis: 32%;
-		max-width: 32%;
+	#podcast_lane > .lane,
+	#project_lane > .lane {
+		justify-content: flex-start;
+		gap: 2rem;
 	}
 	#latest_lane.lane section {
 		flex: 1;
 	}
+	#hosts tr {
+		flex: 1 1 30%;
+		max-width: 30%;
+	}
 }
\ No newline at end of file
diff --git a/templates/content-comments_viewer.tpl.html b/templates/content-comments_viewer.tpl.html
index 2794925..28d40f6 100644
--- a/templates/content-comments_viewer.tpl.html
+++ b/templates/content-comments_viewer.tpl.html
@@ -7,7 +7,8 @@
 <h2>Comment Viewer</h2>
 <p>Because of the spammers we have had to turn on comment moderation. Sorry about the delay this will cause.</p>
 <p><a href="<!--% absolute_path(baseurl) %-->comments.rss">Subscribe</a> to the comment feed.</p>
-<hr />
+<hr class="no-css">
+<section id="comments" class="lane stack">
 <!--% FOREACH item IN DBI.query('
 		SELECT C.*, 
 			H.host, H.hostid AS host_id, 
@@ -26,18 +27,18 @@
 		LIMIT 30
 	')
 %-->
-
 <article>
-<header>
-	<h1><!--% item.comment_author_name %--> says: <!--% item.comment_title %--></h1>
-	<p><small>Posted at <!--% item.comment_timestamp %--> relating to the show <a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html">hpr<!--% item.eps_id %--></a> which was released on <!--% item.episode_date %--> by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a> entitled <em><!--% item.episode_title %--></em></small>
-</p>
-</header>
-<p class="comment">
-<!--% item.comment_text FILTER html_line_break %-->
-</p>
-<footer>
-Listen in <a href="<!--% media_path(item.eps_id, 'hpr', 'ogg', baseurl, media_baseurl) %-->">ogg</a>, <a href="<!--% media_path(item.eps_id, 'hpr', 'spx', baseurl, media_baseurl) %-->">spx</a>, or <a href="<!--% media_path(item.eps_id, 'hpr', 'mp3', baseurl, media_baseurl) %-->">mp3</a> format.</p></footer>
+	<header>
+		<h2><!--% item.comment_author_name %--> says: <!--% item.comment_title %--></h2>
+	</header>
+	<p class="show-meta">Posted at <!--% item.comment_timestamp %--> relating to the show <a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html">hpr<!--% item.eps_id %--></a> which was released on <!--% item.episode_date %--> by <a href="<!--% absolute_path(baseurl) %-->correspondents/<!--% zero_pad_left(item.host_id) %-->.html"><!--% item.host %--></a> entitled <em><!--% item.episode_title %--></em></small>
+	</p>
+	<p class="comment">
+	<!--% item.comment_text FILTER html_line_break %-->
+	</p>
+	<footer>
+		Listen in <a href="<!--% media_path(item.eps_id, 'hpr', 'ogg', baseurl, media_baseurl) %-->">ogg</a>, <a href="<!--% media_path(item.eps_id, 'hpr', 'spx', baseurl, media_baseurl) %-->">spx</a>, or <a href="<!--% media_path(item.eps_id, 'hpr', 'mp3', baseurl, media_baseurl) %-->">mp3</a> format.</p></footer>
 </article>
-<hr />	
+<hr class="no-css">	
 <!--% END %-->
+</section>
diff --git a/templates/content-correspondents.tpl.html b/templates/content-correspondents.tpl.html
index f4923be..4631c58 100644
--- a/templates/content-correspondents.tpl.html
+++ b/templates/content-correspondents.tpl.html
@@ -1,15 +1,17 @@
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS 'shared-avatar.tpl.html' %-->
-<article>
 	<h2 class="title">Correspondents</h2>
 	<p>For more information on how to become a Correspondent see our <a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">contribute</a></center> page. To add a logo here, either email one to admin at hpr or setup your email on <a href="https://en.gravatar.com/">Gravatar</a>. To protect your browsing privacy we gather the images every hour and serve them directly from HPR.<p />
 <!--% USE DBI(constants.driver) %-->
 <!--% host_cnt = 0 %-->
-	<table class="hosts">
-	<th >Avatar</th>
-	<th >Name &amp; Host ID</th>
-	<th >License</th>
-	<th >Last Show</th>
+	<table id="hosts" class="hosts lane stack">
+	<tbody class="lane stack">
+	<tr class="no-css">
+	<th>Avatar</th>
+	<th>Name &amp; Host ID</th>
+	<th>License</th>
+	<th>Last Show</th>
+	</tr>
 	<!--% FOREACH host IN DBI.query(
 		'select h.hostid, h.host, h.license, e.date, 
 		h.local_image 
@@ -18,7 +20,7 @@
 		on h.hostid = e.hostid
 		order by h.host'
 	) %-->
-	<tr>
+	<tr class="lane">
 	<td><!--% get_avatar(host.hostid, host.host, host_cnt > 8) %--></td>
 
 		<td><strong><!--% host.host %--></strong><br>
@@ -28,6 +30,6 @@
 		<td><!--% host.date %--></td>
 	</tr><!--% host_cnt = host_cnt + 1 %-->
 	<!--% END %-->
+	</tbody>
 	</table>
 	<p><a href="<!--% absolute_url(baseurl) %-->about.html#so_you_want_to_record_a_podcast">Become a Correspondent</a></p>
-</article>
diff --git a/templates/content-index.tpl.html b/templates/content-index.tpl.html
index d41d09e..98a5e8e 100644
--- a/templates/content-index.tpl.html
+++ b/templates/content-index.tpl.html
@@ -95,20 +95,20 @@
   <section id="latest_shows">
 	<header><h2>Latest Shows</h2></header>
 <!--% host_cnt = 0 %-->
-	<ul>
+	<dl>
 <!--% FOREACH latest_episodes IN DBI.query(query_latest_episodes)
 %-->
-		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> :: <!--% latest_episodes.title %--></a>
-		<ul><li>
+<dt><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> (<!--% latest_episodes.date %-->) :: <!--% latest_episodes.title %--></a> by <!--% latest_episodes.host %--></dt>
+		<dd>
 		<!--% latest_episodes.summary %-->
-        </li></ul>
+        </dd>
 <!--% host_cnt = host_cnt + 1 %-->
 <!--% END %-->
-	</ul>
+	</dl>
   </section>
   <section id="latest_comments">
 	<header><h2>Latest Comments</h2></header>
-	<ul>
+	<dl>
 <!--% FOREACH item IN DBI.query('
 		WITH episode_comment_rank AS (
 		SELECT 
@@ -135,13 +135,9 @@
 	
 	')
 %-->
-	<li>hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %-->
-	<ul>
-		<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comment_<!--% item.comment_id%-->">Comment <!--% item.comment_number %-->: <!--% item.comment_author_name %--> on <!--% item.comment_timestamp %-->: "<!--% item.comment_title %-->"</a>
-		</li>
-	</ul>
-	</li>
+<dt><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(item.eps_id) %-->/index.html#comment_<!--% item.comment_id%-->">Comment <!--% item.comment_number %-->: <!--% item.comment_author_name %--> on <!--% item.comment_timestamp %-->: "<!--% item.comment_title %-->"</a></dt>
+	<dd>on hpr<!--% item.eps_id %--> (<!--% item.episode_date %-->) "<!--% item.episode_title %-->" by <!--% item.host %--></dd>
 <!--% END %-->
-	</ul>
+	</dl>
   </section>
   </section>
diff --git a/templates/content-search.tpl.html b/templates/content-search.tpl.html
index 53e7a61..d79205c 100644
--- a/templates/content-search.tpl.html
+++ b/templates/content-search.tpl.html
@@ -1,45 +1,123 @@
- <article>
-    <header>
-        <h1>Search HPR.</h1>
-    </header>
-<hr />
-<h2>Search Show Tags</h2>
-<p>
-<a href="<!--% absolute_path(baseurl) %-->tags.html">Complete list of all the Tags</a></p>
-<hr />
-<h2>Google</h2>
-<form name="google-search" method="get" action="https://www.google.com/search">
-  <input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
-  <input name="q" type="text" placeholder="Search HPR with Google"/>
-  <input type="submit" name="sa" value="Search HPR with Google" />
-</form>
-<br />
-<a href="https://www.google.com/policies/privacy/">privacy policy</a>
-</p>
-<hr />
-<h2>DuckDuckGo</h2>
-<form method="get" id="search" action="https://duckduckgo.com/">
-  <input type="hidden" name="sites" value="https://www.hackerpublicradio.org/"/>
-  <input type="hidden" name="k8" value="#444444"/>
-  <input type="hidden" name="k9" value="#D51920"/>
-  <input type="hidden" name="kt" value="h"/>
-  <input type="text" name="q" maxlength="255" placeholder="Search HPR with DuckDuckGo"/>
-  <input type="submit" value="Search HPR with DuckDuckGo" />
-</form>
-<br />
-<a href="https://duckduckgo.com/privacy">privacy policy</a>
-</p>
-<hr />
-<h2>Bing</h2>
-<p>
-<form method="get" action="https://www.bing.com/search">
-<input type="hidden" name="cp" value="utf-8" />
-<input type="hidden" name="FORM" value="FREESS" />
-<input type="text" name="q" size="30" placeholder="Search HPR with Bing"/>
-<input type="submit" value="Search HPR with Bing" />
-<input type="hidden" name="q1" value="site:www.hackerpublicradio.org" />
-</form>
-<br />
-<a href="https://www.microsoft.com/privacystatement/en-us/bing/default.aspx">privacy policy</a>
-</p>
-  </article>
+<section id="search">
+	<header>
+		<h1>Search HPR.</h1>
+	</header>
+	<div class="lane">
+		<form name="google-search" method="get" action="https://www.google.com/search">
+			<fieldset><legend>Google</legend>
+				<input type="hidden" name="sitesearch" value="https://www.hackerpublicradio.org/" />
+				<input name="q" type="text" placeholder="Search HPR with Google"/>
+				<input type="submit" name="sa" value="Search HPR with Google" />
+				<p>
+				<a href="https://www.google.com/policies/privacy/">privacy policy</a>
+				</p>
+			</fieldset>
+		</form>
+		<form method="get" id="search" action="https://duckduckgo.com/">
+			<fieldset><legend>DuckDuckGo</legend>
+			<input type="hidden" name="sites" value="https://www.hackerpublicradio.org/"/>
+			<input type="hidden" name="k8" value="#444444"/>
+			<input type="hidden" name="k9" value="#D51920"/>
+			<input type="hidden" name="kt" value="h"/>
+			<input type="text" name="q" maxlength="255" placeholder="Search HPR with DuckDuckGo"/>
+			<input type="submit" value="Search HPR with DuckDuckGo" />
+			<p>
+			<a href="https://duckduckgo.com/privacy">privacy policy</a>
+			</p>
+			</fieldset>
+		</form>
+		<form method="get" action="https://www.bing.com/search">
+			<fieldset><legend>Bing</legend>
+				<input type="hidden" name="cp" value="utf-8" />
+				<input type="hidden" name="FORM" value="FREESS" />
+				<input type="text" name="q" size="30" placeholder="Search HPR with Bing"/>
+				<input type="submit" value="Search HPR with Bing" />
+				<input type="hidden" name="q1" value="site:www.hackerpublicradio.org" />
+				<p>
+				<a href="https://www.microsoft.com/privacystatement/en-us/bing/default.aspx">privacy policy</a>
+				</p>
+			</fieldset>
+		</form>
+	</div>
+</section>
+<section id="tags">
+<!--% PROCESS 'shared-utils.tpl.html' %-->
+<!--% PROCESS "queries-tags.tpl.html" %-->
+<!--% USE DBI(constants.driver) %-->
+<!--% PERL %-->
+$Template::Stash::PRIVATE = undef; # Allow . in tag
+<!--% END %-->
+<!--% USE String %-->
+<!--% uniq_tag_count = 0 %-->
+<!--% FOREACH episode IN DBI.query(query_tags);
+    ep_id = episode.id;
+    ep_tags = episode.tags;
+    FOREACH tag_str IN ep_tags.csv_parse;
+        NEXT UNLESS tag_str;
+        NEXT IF tag_str == '';
+        tag = tag_str.lower;
+		tag_index = String.new(tag).push('_');
+        first_char = tag.substr(0,1);
+        IF first_char == '.';
+            first_char = '&#x0002E;'; # Unicode .
+        END;
+        IF all_tags.${first_char}.exists(tag_index);
+            all_tags.${first_char}.${tag_index}.count = all_tags.${first_char}.${tag_index}.count + 1;
+            all_tags.${first_char}.${tag_index}.urls.push(ep_id);
+        ELSE;
+            all_tags.${first_char}.${tag_index}.count = 1;
+            uniq_tag_count = uniq_tag_count + 1;
+            all_tags.${first_char}.${tag_index}.urls = [ep_id];
+        END;
+    END;
+END %-->
+<!--% USE date %-->
+<!--% all_first = ['#','&#x0002E;','/','0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] %-->
+<header>
+	<hgroup>
+	<h1 id="TOP" class="title">Search by Tag</h1>
+	<p class="date">Generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></p>
+	</hgroup>
+</header>
+	<p>This section summarises all of the tags currently used throughout the
+	database. The tags are in alphabetical order and each is followed by links to
+	the show numbers where it is used so you can see the context the author used
+	it in. There are currently <!--% uniq_tag_count %--> unique tags in the system.</p>
+	<h4>Alphabetical index</h4>
+	<p>This is an index to the initial letters of the tags below.</p>
+	<ul id="tag_initial_letter_index">
+    <!--% FOREACH first_char IN all_first %-->
+        <!--% IF all_tags.${first_char} %-->
+            <li><a href="<!--% absolute_path(baseurl) %-->search.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
+        <!--% END %-->
+    <!--% END %-->
+	</ul>
+	<hr class="no-css">
+    <!--% FOREACH first_char IN all_first %-->
+        <!--% IF all_tags.${first_char} %-->
+		<p class="index-link"><a href="<!--% absolute_path(baseurl) %-->search.html#TOP">&UpArrow; Go to index</a></p>
+	        <h3>Tags beginning with '<!--% first_char %-->'</h3>
+	        <ul class="tag-index">
+                <!--% FOREACH tag_index IN all_tags.${first_char}.keys.sort %-->
+				<!--% tag = String.new(tag_index).chop; tag_id = String.new(tag_index).chop; %-->
+    	        	<li>
+    	        		<a id="<!--% tag_to_id(tag_id) %-->"><strong><!--% tag %--></strong></a>: 
+                        <!--% ep_links = [] %-->
+                        <!--% FOREACH ep_id IN all_tags.${first_char}.${tag_index}.urls.nsort;
+							ep_links.push("<a href=\"${absolute_path(baseurl)}eps/hpr" _ zero_pad_left(ep_id) _ '/index.html"'
+                                ' target="_blank" aria-label="' _ tag _
+                                ' - show ' _ ep_id _ '">' _ ep_id _ '</a>');
+                        END %-->
+                        <!--% ep_links.join(', ') %-->
+    	        	</li>
+                <!--% END %-->
+	        </ul>
+        <!--% END %-->
+    <!--% END %-->
+	<p><a href="#TOP">Go to TOP of page</a></p>
+</article>
+<!--% PERL %-->
+$Template::Stash::PRIVATE = 1;
+<!--% END %-->
+
+</section>
diff --git a/templates/content-series.tpl.html b/templates/content-series.tpl.html
index 35303ca..84e7915 100644
--- a/templates/content-series.tpl.html
+++ b/templates/content-series.tpl.html
@@ -2,8 +2,9 @@
 <!--% PROCESS "queries-series.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
 <h1 class="title">In-Depth Series</h1>
-<div class="lane">
+<div class="lane stack">
 <!--% FOREACH series IN DBI.query(query_episodes) %-->
+
   <article>
 	<header><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></header>
 	<ul>
@@ -13,7 +14,7 @@
 		<li>Date of latest show: <!--% series.latest_show %--></li>
 		<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
 	</ul>
-	<em><!--% series.description %--></em>
+	<div class="series-description"><!--% series.description %--></div>
   </article>
 <!--% END %-->
 </div>
diff --git a/templates/content-series_episode.tpl.html b/templates/content-series_episode.tpl.html
index eea11de..557e14c 100644
--- a/templates/content-series_episode.tpl.html
+++ b/templates/content-series_episode.tpl.html
@@ -5,7 +5,6 @@
 <!--% query_series = DBI.prepare(query_series_sql)
 %-->
 <!--% series_result = query_series.execute(id) %-->
-<article>
 <!--% FOREACH series IN series_result %-->
 <h1 class="title">In-Depth Series: <!--% series.name %--></h1>
 <ul>
@@ -15,13 +14,16 @@
 	<li>Date of latest show: <!--% series.latest_show %--></li>
 	<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->&full=1&gomax=1">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->&full=1&gomax=1">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->&full=1&gomax=1">mp3</a></li>
 </ul>
-<div><em><!--% series.description %--></em></div>
-<!--% END %-->
+<p><em><!--% series.description %--></em></p>
+<section id="series_episodes" class="lane stack">
 <!--% query_shows = DBI.prepare(query_shows_sql)
 %-->
 <!--% show_results = query_shows.execute(id) %-->
 <!--% FOREACH show IN show_results %-->
+<article>
 <!--% show_summary(show) %-->
-<p class="listen-in"><!--% display_listen_in(show.id) %--></p>
-<!--% END %-->
+<footer class="listen-in"><!--% display_listen_in(show.id) %--></footer>
 </article>
+<!--% END %-->
+</section>
+<!--% END %-->
diff --git a/templates/content-syndication.tpl.html b/templates/content-syndication.tpl.html
index f378905..ce6ebea 100644
--- a/templates/content-syndication.tpl.html
+++ b/templates/content-syndication.tpl.html
@@ -3,7 +3,7 @@
   <p>
   Great that you want to listen. Have a look below at the feeds that best suite your listening habits.
   </p>
-  <div class="lane">
+  <div class="lane stack">
   <article>
   <header>
 	<hgroup>
@@ -78,7 +78,7 @@
 <div>
 <hr class="no-css">
 <h1>Other Download Options</h1>
-<div class="lane">
+<div class="lane syndication">
 <article>
   <header>
     <h2>Site Replication Sources</h2>
diff --git a/templates/content-tags.tpl.html b/templates/content-tags.tpl.html
index 13a9dd3..170da33 100644
--- a/templates/content-tags.tpl.html
+++ b/templates/content-tags.tpl.html
@@ -1,3 +1,4 @@
+<section id="tags">
 <!--% PROCESS 'shared-utils.tpl.html' %-->
 <!--% PROCESS "queries-tags.tpl.html" %-->
 <!--% USE DBI(constants.driver) %-->
@@ -30,39 +31,31 @@ $Template::Stash::PRIVATE = undef; # Allow . in tag
 END %-->
 <!--% USE date %-->
 <!--% all_first = ['#','&#x0002E;','/','0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] %-->
-
-<style>
-    .columns3 { columns: 3 auto; list-style-type: none }
-    hr.thin {
-        border: 0;
-        height: 0;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    }
-    p.ralign { text-align: right }
-</style>
-<article>
-	<a id="TOP"><h1 class="title">Tag summary</h1></a>
-	<h4 class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></h4>
+<header>
+	<hgroup>
+	<h1 class="title"><a id="TOP">Search by Tag</a></h1>
+	<p class="date">Page generated on <!--% date.format(date.now, format => '%Y-%m-%d at %H:%M:%S UTC', gmt => 1) %--></p>
+	</hgroup>
+</header>
 	<p>This section summarises all of the tags currently used throughout the
 	database. The tags are in alphabetical order and each is followed by links to
 	the show numbers where it is used so you can see the context the author used
 	it in. There are currently <!--% uniq_tag_count %--> unique tags in the system.</p>
 	<h4>Alphabetical index</h4>
 	<p>This is an index to the initial letters of the tags below.</p>
-	<ul class="columns3">
+	<ul id="tag_initial_letter_index">
     <!--% FOREACH first_char IN all_first %-->
         <!--% IF all_tags.${first_char} %-->
-            <li><a href="<!--% absolute_path(baseurl) %-->tags.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
+            <li><a href="<!--% absolute_path(baseurl) %-->search.html#<!--% tag_to_id(String.new(all_tags.${first_char}.keys.sort.first).chop) %-->"><strong><!--% first_char %--></strong></a></li>
         <!--% END %-->
     <!--% END %-->
 	</ul>
-	<hr>
+	<hr class="no-css">
     <!--% FOREACH first_char IN all_first %-->
         <!--% IF all_tags.${first_char} %-->
-		<p class="ralign"><a href="<!--% absolute_path(baseurl) %-->tags.html#TOP">&UpArrow; Go to index</a></p>
+		<p class="index-link"><a href="<!--% absolute_path(baseurl) %-->search.html#TOP">&UpArrow; Go to index</a></p>
 	        <h3>Tags beginning with '<!--% first_char %-->'</h3>
-	        <ul>
+	        <ul class="tag-index">
                 <!--% FOREACH tag_index IN all_tags.${first_char}.keys.sort %-->
 				<!--% tag = String.new(tag_index).chop; tag_id = String.new(tag_index).chop; %-->
     	        	<li>
@@ -84,3 +77,5 @@ END %-->
 <!--% PERL %-->
 $Template::Stash::PRIVATE = 1;
 <!--% END %-->
+
+</section>
\ No newline at end of file
diff --git a/templates/page.tpl.html b/templates/page.tpl.html
index fe19ab1..4bcdff3 100644
--- a/templates/page.tpl.html
+++ b/templates/page.tpl.html
@@ -12,15 +12,6 @@
   <meta http-equiv="last-modified" content="<!--% format_feed_date(date.now) %-->">
   <meta name="keywords" content="Technology, Tech News, Education, Training" />
   <meta name="description" content="Hacker Public Radio is a podcast that releases shows every weekday Monday through Friday. Our shows are produced by the community (you) and can be on any topic that is of interest to hackers and hobbyists." />
-  <!-- Internal CSS -->
-  <style type="text/css">
-  article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
-          display: block;
-  }
-  #list1, #list2, #list3 {
-          display:none;
-  }
-  </style>
   <link rel="shortcut icon" href="<!--% absolute_url(baseurl) %-->hpr.ico" >
   <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Opus RSS" href="<!--% absolute_path(baseurl) %-->hpr_opus_rss.php" />
   <link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Ogg Vorbis RSS" href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php" />
@@ -36,31 +27,31 @@
 </head>
 
 <body>
-<nav id="accessible_menu">
-   <a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a>
-   - <a href="#main_content">skip to main content</a>
-</nav>
-<nav id="main_menu" class="menu" role="navigation">
-<!--% INCLUDE "navigation-main.tpl.html" %-->
-</nav>
+<div id="top_navigation" class="sr-only">
+	<nav id="accessible_menu">
+		<menu>
+			<li><a href="#main_content">Skip to Main Content</a></li>
+			<li><a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a></li>
+		</menu>
+	</nav>
+	<hr class="no-css">
+</div>
 <header role="banner">
-  <div id="title">
-	  <h1 id="site_acronym">HPR</h1>
-      <h2 id="site_name">
+<div class="bounding-box">
+  <hgroup id="title">
+	  <h1 id="site_acronym"><a href="<!--% absolute_path(baseurl) %-->index.html">HPR</a></h1>
+      <p id="site_name">
         <a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">H</a>acker
         <a href="<!--% absolute_path(baseurl) %-->comments_viewer.html">P</a>ublic
         <a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio
-      </h2>
-	  <h3 id="site_url">https://HackerPublicRadio.org</h3>
-  </div>
-  <div id="tag_line">
-    <h2>The Community Podcast</h2>
-	<h2>Sharing your ideas, projects, opinions since 2005</h2>
-    <h3>New episodes every weekday </h3>
-  </div>
-  <div id="qr_code">
-	  <img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="HPR logo as a QR code to the HPR URL">
-  </div>
+      </p>
+  </hgroup>
+  <hgroup id="tag_line">
+    <h2 id="tag1">The Community Podcast</h2>
+	<p id="tag2">Sharing your ideas, projects, opinions since 2005</p>
+    <p id="tag3">New episodes every weekday </p>
+  </hgroup>
+</div>
 </header>
 <main id="main_content" role="main">
 <!--% INCLUDE $content %-->