diff --git a/css/viewer.css b/css/viewer.css
index be4225a..3583047 100644
--- a/css/viewer.css
+++ b/css/viewer.css
@@ -48,18 +48,19 @@ h1 {
 }
 
 h2 {
-	display: inline-block;
-	font-size: 130%;
 	font-weight: normal;
-	color: rgb(0,0,100);
-	margin-top: 1.75em;
-	margin-bottom: 1rem;
+	font-size: 115%;
+	margin: -2rem -1.8rem 2rem -2rem;
+	padding: 0.5rem 0 0.5rem 2rem;
+	background-color: rgb(0,60,120);
+	color: rgb(255,255,255);
 }
 
 h3 {
-	font-size: 125%;
-	color: rgb(0,0,100);
+	display: inline-block;
+	font-size: 115%;
 	font-weight: normal;
+	color: rgb(0,0,100);
 	margin: 0;
 }
 
@@ -102,6 +103,19 @@ dialog {
 	max-width: 80vw;
 }
 
+/* result dialog */
+
+dialog#result p,
+dialog#result ul {
+	margin-left: 3rem;
+}
+
+a.close {
+	position: absolute;
+	top: 0.5rem;
+	right: 2rem;
+}
+
 /* page headers and footers */
 
 header {
diff --git a/graphics/close-icon.png b/graphics/close-icon.png
new file mode 100644
index 0000000..6388869
Binary files /dev/null and b/graphics/close-icon.png differ
diff --git a/index.html b/index.html
index 3531e36..f4ed94b 100644
--- a/index.html
+++ b/index.html
@@ -48,13 +48,17 @@ <h1><img class="logo" src="graphics/daisy_high.jpg" alt="DAISY"> Accessibility M
 			<div><input type="button" onclick="processXML()" value="Preview"/></div>
 			
 			<dialog id="result">
-				<div id="result_body"></div>
-				<button>Close</button>
+				<h2>Metadata Display</h2>
+				<a href="#result-close" id="result-close-img" class="close" title="Close"><img src="graphics/close-icon.png" alt="Close"></a>
+				<div id="result-body"></div>
+				<button id="result-close-button">Close</button>
 			</dialog>
 			
 			<dialog id="explainer">
-				<div id="explainer_body"></div>
-				<button>Close</button>
+				<h2>Explainer</h2>
+				<a href="#explainer-close" id="explainer-close-img" class="close" title="Close"><img src="graphics/close-icon.png" alt="Close"></a>
+				<div id="explainer-body"></div>
+				<button id="explainer-close-button">Close</button>
 			</dialog>
 			
 			<section hidden="hidden">
diff --git a/js/metaViewer.js b/js/metaViewer.js
index 432d69e..822a0a0 100644
--- a/js/metaViewer.js
+++ b/js/metaViewer.js
@@ -1,11 +1,16 @@
 
 /* result dialog */
 
-var result_dialog = document.getElementById("result");
-var result_close = document.querySelector("dialog#result button");
+var result_dialog = document.getElementById('result');
+var result_close_button = document.getElementById("result-close-button");
+var result_close_img = document.getElementById("result-close-img");
 
-result_close.addEventListener("click", () => {
-  result_dialog.close();
+result_close_button.addEventListener("click", () => {
+  document.getElementById("result").close();
+});
+
+result_close_img.addEventListener("click", () => {
+  document.getElementById("result").close();
 });
 
 /* process input metadata */
@@ -15,7 +20,7 @@ function processXML() {
 	var xml = document.getElementById('input_packagedoc').value;
 	
 	// reest the result pane
-	var result_field = document.getElementById('result_body');
+	var result_field = document.getElementById('result-body');
 		result_field.textContent = '';
 	
 	console.clear();
@@ -62,16 +67,21 @@ function writeExplainerLink(id) {
 	return a;
 }
 
-var expl_dialog = document.getElementById("explainer");
-var expl_body = document.getElementById("explainer_body");
+var explainer_dialog = document.getElementById("explainer");
 
 function showExplainer(id) {
-	expl_body.innerHTML = document.getElementById(id).innerHTML;
-	expl_dialog.showModal();
+	var expl_body = document.getElementById("explainer-body");
+		expl_body.innerHTML = document.getElementById(id).innerHTML;
+	explainer_dialog.showModal();
 }
 
-var expl_close = document.querySelector("dialog#explainer button");
+var explainer_close_button = document.getElementById("explainer-close-button");
+var explainer_close_img = document.getElementById("explainer-close-img");
+
+explainer_close_button.addEventListener('click', () => {
+  explainer_dialog.close();
+});
 
-expl_close.addEventListener("click", () => {
-  expl_dialog.close();
+explainer_close_img.addEventListener('click', () => {
+  explainer_dialog.close();
 });
diff --git a/js/onixProcessor.js b/js/onixProcessor.js
index 8b1385a..eb3b68c 100644
--- a/js/onixProcessor.js
+++ b/js/onixProcessor.js
@@ -3,6 +3,8 @@
 
 var onixProcessor = (function() {
 
+	const hd_type = 'h3';
+	
 	function processOnixRecord(onix_record_as_text) {
 	
 		var result = document.createElement('div');
@@ -28,7 +30,7 @@ var onixProcessor = (function() {
 		
 		// 4.1.3 Instructions
 		
-		var vis_hd = document.createElement('h3');
+		var vis_hd = document.createElement(hd_type);
 			vis_hd.appendChild(document.createTextNode('Visual adjustments'));
 		result.appendChild(vis_hd);
 		
@@ -64,7 +66,7 @@ var onixProcessor = (function() {
 		
 		// 4.2.3 Instructions
 		
-		var nonvis_hd = document.createElement('h3');
+		var nonvis_hd = document.createElement(hd_type);
 			nonvis_hd.appendChild(document.createTextNode('Supports nonvisual reading'));
 		result.appendChild(nonvis_hd);
 		
@@ -108,7 +110,7 @@ var onixProcessor = (function() {
 		
 		// 4.3.3 Instructions
 		
-		var conf_hd = document.createElement('h3');
+		var conf_hd = document.createElement(hd_type);
 			conf_hd.appendChild(document.createTextNode('Conformance'));
 		result.appendChild(conf_hd);
 		
@@ -168,7 +170,7 @@ var onixProcessor = (function() {
 			result.appendChild(cred_p);
 		}
 		
-		var detconf_hd = document.createElement('h3');
+		var detconf_hd = document.createElement(hd_type);
 			detconf_hd.appendChild(document.createTextNode('Detailed Conformance Information'));
 		result.appendChild(detconf_hd);
 		
@@ -283,7 +285,7 @@ var onixProcessor = (function() {
 		
 		// 4.4.3 Instructions
 		
-		var prerec_hd = document.createElement('h3');
+		var prerec_hd = document.createElement(hd_type);
 			prerec_hd.appendChild(document.createTextNode('Prerecorded audio'));
 		result.appendChild(prerec_hd);
 		
@@ -323,7 +325,7 @@ var onixProcessor = (function() {
 		
 		// 4.5.3 Instructions
 		
-		var nav_hd = document.createElement('h3');
+		var nav_hd = document.createElement(hd_type);
 			nav_hd.appendChild(document.createTextNode('Navigation'));
 		result.appendChild(nav_hd);
 		
@@ -379,7 +381,7 @@ var onixProcessor = (function() {
 		
 		// 4.6.3 Instructions
 		
-		var cdmf_hd = document.createElement('h3');
+		var cdmf_hd = document.createElement(hd_type);
 			cdmf_hd.appendChild(document.createTextNode('Charts, diagrams, math, and formulas'));
 		result.appendChild(cdmf_hd);
 		
@@ -450,7 +452,7 @@ var onixProcessor = (function() {
 		
 		// 4.7.3 Instructions
 		
-		var haz_hd = document.createElement('h3');
+		var haz_hd = document.createElement(hd_type);
 			haz_hd.appendChild(document.createTextNode('Hazards'));
 		result.appendChild(haz_hd);
 		
@@ -522,7 +524,7 @@ var onixProcessor = (function() {
 		
 		// 4.8.3 Instructions
 		
-		var sum_hd = document.createElement('h3');
+		var sum_hd = document.createElement(hd_type);
 			sum_hd.appendChild(document.createTextNode('Accessibility summary'));
 		result.appendChild(sum_hd);
 		
@@ -597,7 +599,7 @@ var onixProcessor = (function() {
 		
 		// 4.9.3 Instructions
 		
-		var legal_hd = document.createElement('h3');
+		var legal_hd = document.createElement(hd_type);
 			legal_hd.appendChild(document.createTextNode('Legal considerations'));
 		result.appendChild(legal_hd);
 		
@@ -621,7 +623,7 @@ var onixProcessor = (function() {
 		 * 4.10 Additional accessibility information
 		 */
 		 
-		var aai_hd = document.createElement('h3');
+		var aai_hd = document.createElement(hd_type);
 			aai_hd.appendChild(document.createTextNode('Additional accessibility information'));
 		result.appendChild(aai_hd);
 		
diff --git a/js/packageProcessor.js b/js/packageProcessor.js
index 2292e24..50a3ad9 100644
--- a/js/packageProcessor.js
+++ b/js/packageProcessor.js
@@ -3,6 +3,8 @@
 
 var packageProcessor = (function() {
 
+	const hd_type = 'h3';
+	
 	function processPackageDoc(package_document_as_text) {
 	
 		var result = document.createElement('div');
@@ -28,7 +30,7 @@ var packageProcessor = (function() {
 		
 		// 4.1.3 Instructions
 		
-		var vis_hd = document.createElement('h2');
+		var vis_hd = document.createElement(hd_type);
 			vis_hd.appendChild(document.createTextNode('Visual adjustments'));
 		result.appendChild(vis_hd);
 			
@@ -68,7 +70,7 @@ var packageProcessor = (function() {
 		
 		// 4.2.3 Instructions
 		
-		var nonvis_hd = document.createElement('h2');
+		var nonvis_hd = document.createElement(hd_type);
 			nonvis_hd.appendChild(document.createTextNode('Supports nonvisual reading'));
 			
 			// add explainer
@@ -138,7 +140,7 @@ var packageProcessor = (function() {
 		
 		// 4.3.3 Instructions
 		
-		var conf_hd = document.createElement('h2');
+		var conf_hd = document.createElement(hd_type);
 			conf_hd.appendChild(document.createTextNode('Conformance'));
 		result.appendChild(conf_hd);
 		
@@ -199,7 +201,7 @@ var packageProcessor = (function() {
 				result.appendChild(cred_p);
 			}
 			
-			var detconf_hd = document.createElement('h2');
+			var detconf_hd = document.createElement(hd_type);
 				detconf_hd.appendChild(document.createTextNode('Detailed Conformance Information'));
 			result.appendChild(detconf_hd);
 			
@@ -283,7 +285,7 @@ var packageProcessor = (function() {
 		
 		// 4.4.3 Instructions
 		
-		var prerec_hd = document.createElement('h2');
+		var prerec_hd = document.createElement(hd_type);
 			prerec_hd.appendChild(document.createTextNode('Prerecorded audio'));
 		result.appendChild(prerec_hd);
 		
@@ -323,7 +325,7 @@ var packageProcessor = (function() {
 		
 		// 4.5.3 Instructions
 		
-		var nav_hd = document.createElement('h2');
+		var nav_hd = document.createElement(hd_type);
 			nav_hd.appendChild(document.createTextNode('Navigation'));
 		result.appendChild(nav_hd);
 		
@@ -380,7 +382,7 @@ var packageProcessor = (function() {
 		
 		// 4.6.3 Instructions
 		
-		var cdmf_hd = document.createElement('h2');
+		var cdmf_hd = document.createElement(hd_type);
 			cdmf_hd.appendChild(document.createTextNode('Charts, diagrams, math, and formulas'));
 		result.appendChild(cdmf_hd);
 		
@@ -441,7 +443,7 @@ var packageProcessor = (function() {
 		
 		// 4.7.3 Instructions
 		
-		var haz_hd = document.createElement('h2');
+		var haz_hd = document.createElement(hd_type);
 			haz_hd.appendChild(document.createTextNode('Hazards'));
 		result.appendChild(haz_hd);
 		
@@ -505,7 +507,7 @@ var packageProcessor = (function() {
 		
 		// 4.8.3 Instructions
 		
-		var sum_hd = document.createElement('h2');
+		var sum_hd = document.createElement(hd_type);
 			sum_hd.appendChild(document.createTextNode('Accessibility summary'));
 		result.appendChild(sum_hd);
 		
@@ -547,7 +549,7 @@ var packageProcessor = (function() {
 		
 		// 4.9.3 Instructions
 		
-		var legal_hd = document.createElement('h2');
+		var legal_hd = document.createElement(hd_type);
 			legal_hd.appendChild(document.createTextNode('Legal considerations'));
 		result.appendChild(legal_hd);
 		
@@ -571,7 +573,7 @@ var packageProcessor = (function() {
 		 * 4.10 Additional accessibility information
 		 */
 		 
-		var aai_hd = document.createElement('h2');
+		var aai_hd = document.createElement(hd_type);
 			aai_hd.appendChild(document.createTextNode('Additional accessibility information'));
 		result.appendChild(aai_hd);