diff --git a/parser b/parser
index 452c264..bec27df 100755
--- a/parser
+++ b/parser
@@ -140,18 +140,18 @@ function lookup
 		if [[ "$line" =~ [0-9a-fA-F,.]{6,} ]]; then
 			mod="$($PCILOOKUP $line 2>&1)"
 			if [[ $? -eq 0 ]]; then
-				mod=$(echo $mod | sed 's/|/ /g')
+				mod=${mod//|/ }
 				cat <<EOF
-      <li class="outer">$mod
-	<ul>
+      <li>$mod
+	<ul class="entry">
 	  <li>Driver: $drv</li>
 	  <li>PCI ID: $line</li>
-	  <li>Originating manifest: $(basename $file)</li>
+	  <li>Originating manifest: ${file##*/}</li>
 	</ul>
       </li>
 EOF
 			else
-				p_bad="      <li>Unknown ID ($line) from driver: $drv mf: $(basename $file): $mod</li>\n$p_bad"
+				p_bad="      <li>Unknown ID ($line) from driver: $drv mf: ${file##*/}: $mod</li>\n$p_bad"
 			fi
 		else
 			drv=$line
@@ -168,46 +168,62 @@ function setup
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>illumos HCL - WIP</title>
-    <style>
-	.content {
-		padding: 25px 50px;
-		width: 750px;
-		margin: 25px auto;
-	}
-
-	h1.intro {
-		text-align: center;
-		margin-top: -65px;
-	}
-	li.outer {
-		margin-bottom: .75em;
-		font-size: 1.1em;
-	}
-	.outer ul {
-		display: none;
-	}.outer.expanded ul { display: block; }
-	.outer:hover {
-		list-style-type: circle;
-		cursor: pointer;
-	}
+    <style type="text/css">
+#head, #footer {
+  background-color: #e1dfe2; /* PaleGoldenRod, Lavender, LightGray, Khaki, Gold, Chartreuse, BlanchedAlmond, AntiqueWhite */
+  border-radius: 5px;
+}
+#footer p {
+  font-size: smaller;
+  text-align: center;
+  margin: 0 1ex;
+}
+.logo {
+  /* remove transparent padding in the logo - IMHO it should be cropped */
+  margin-left: -10px;
+  margin-right: -88px; /* 375 - 297 - 10 */
+}
+.title {
+  margin: 0.5ex 1ex;
+}
+.title, .logo {
+  display: inline-block;
+  vertical-align: middle;
+}
+#content {
+  max-width: 120ex;
+}
+#db {
+  /* font-size: larger; */
+  cursor: s-resize;
+  margin-bottom: 2em;
+}
+#db li:hover {
+  list-style-type: circle;
+  background-color: lime; /* something for the kiddies ;-) */
+}
+.entry {
+  font-size: smaller;
+  margin-bottom: .75em;
+  display: none;
+  cursor: n-resize;
+}
     </style>
   </head>
   <body>
-    <img src="./illumos_header.png" />
-    <h1 class="intro">Hardware Compatibility List</h1>
-    <div class="content">
-    <p>
-
-	Welcome to the illumos Hardware Compatibility List (HCL). This is a work
-	in progress. All the devices listed below are supported by the illumos
-	kernel. Note that some devices that are supported, may not be explicitly
-	listed here at this time.
-
-    </p>
+    <div id="head">
+      <img class="logo" src="./illumos_header.png" alt="illumos logo"/>
+      <h1 class="title">Hardware Compatibility List</h1>
+    </div>
+    <div id="content">
+    <p>Welcome to the illumos Hardware Compatibility List (HCL). This is a work 
+in progress. All the devices listed below are supported by the illumos 
+kernel. Note that some devices that are supported, may not be explicitly 
+listed here at this time.</p>
 
-    <p>Click a device to get more information.</p>
+    <p>Click a device to get more information or <a href="#db" id="tall">toggle all</a>.</p>
 
-    <ul>
+    <ul id="db">
 EOF
 }
 
@@ -215,30 +231,56 @@ function finish
 {
 	cat <<EOF
     </ul>	
-    <p>
-
-	The following are a list of devices and ids which are supported, but are
-	not currently in the PCI database. These represent errors both in our
-	manifests and omissions in the PCI database.
+    <p>The following are a list of devices and ids which are supported, but are 
+not currently in the PCI database. These represent errors both in our 
+manifests and omissions in the PCI database. 
     </p>
-    <ul>
+    <ul id="nodb">
 EOF
 	printf "$p_bad"
 	cat <<EOF
     </ul>
-    <p>
-      Generated by the <a href="https://github.com/rmustacc/illumos-hcl">illumos
-      hcl tool</a> at $(TZ=UTC date).
-    </p>
     </div>
-    <script type="text/javascript"
-       src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
-    </script>
-    <script type="text/javascript">
-       \$('.content > ul').on('click', 'li.outer', function() {
-            \$(this).toggleClass('expanded');
-       });
-    </script>
+    <div id="footer">
+    <p>Generated by the <a href="https://github.com/rmustacc/illumos-hcl"
+      >illumos hcl tool</a> at $(TZ=UTC date).</p>
+    </div>
+    <script type="text/javascript">/* <![CDATA[ */
+function haltEvent(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+document.getElementById('db').onclick = function clickHandler(event) {
+  if (!event.target) {
+    return;
+  }
+  haltEvent(event);
+  var on = event.target;
+  if (on.tagName === 'UL') { // HTML -> uppercase values
+    if (on.getAttribute('class') === 'entry') {
+      on.style.display = 'none';
+    }
+    return;
+  }
+  // li in ul.entry have no child
+  if (on.firstElementChild) {
+    // click on a parent of ul.entry
+    var el = on.firstElementChild;
+    var style = el.style.display;
+    el.style.display = (style === 'block' ) ? 'none' : 'block';
+  } else {
+    // click on a child of ul.entry
+    on.parentNode.style.display = 'none';
+  }
+};
+document.getElementById('tall').onclick = function(event) {
+  haltEvent(event);
+  var nl = document.getElementById('db').getElementsByTagName('UL');
+  for (var i=0; i < nl.length; i++) {
+    nl[i].style.display = nl[i].style.display === 'block' ? 'none' : 'block';
+  }
+};
+    /* ]]> */</script>
   </body>
 </html>
 EOF
@@ -261,3 +303,4 @@ elif [[ -f $p_targ ]]; then
 else
 	fail "invalid target: $p_targ must be a file or directory"
 fi
+# vim: ts=2 sw=2 expandtab smartindent
