diff --git a/www/index.pl b/www/index.pl
index 535c200..08509b4 100755
--- a/www/index.pl
+++ b/www/index.pl
@@ -81,8 +81,11 @@ sub home {
        b $sys->[0]{name};
        if(@$sys > 1) {
          my $i = 0;
-         a href => "/browse/$_->{short}", ++$i > 3 ? (class => "old") : (), $_->{release} for(reverse @$sys);
-         a href => "#", 'more...' if $i > 3;
+         for(reverse @$sys) {
+           a href => "/browse/$_->{short}", ++$i > 3 ? (class => 'hidden') : (), $_->{release};
+           lit ' ';
+         }
+         a href => "#", class => 'more', 'more...' if $i > 3;
        }
       end 'a' if @$sys == 1;
      end;
diff --git a/www/man.css b/www/man.css
index a243a6f..055de95 100644
--- a/www/man.css
+++ b/www/man.css
@@ -50,10 +50,10 @@ td { padding: 1px 5px; font-size: 12px; border-left: 1px solid #ccc; }
 #nav b { font-family: "Verdana"; font-size: 13px; background: #cde; padding: 3px 5px;
   -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 
-#systems li { display: block; float: left; width: 360px; margin: 20px;  }
-#systems span { display: block; float: left; width: 50px; height: 50px; margin: 5px; background-repeat: no-repeat; }
+#systems li { display: block; float: left; width: 360px; margin: 20px 20px 0 20px;  }
+#systems span { display: block; float: left; width: 50px; height: 50px; margin: 5px 5px 25px 5px; background-repeat: no-repeat; }
 #systems b { font-size: 24px; display: block; }
-#systems .old { display: none; }
+#systems .hidden { display: none; }
 
 #external { list-style-type: none }
 
diff --git a/www/man.js b/www/man.js
index 7112246..2e73d01 100644
--- a/www/man.js
+++ b/www/man.js
@@ -6,6 +6,22 @@ var collapsed_icon = '▸';
 function byId(n) {
   return document.getElementById(n)
 }
+function byName(){
+  var d = arguments.length > 1 ? arguments[0] : document;
+  var n = arguments.length > 1 ? arguments[1] : arguments[0];
+  return d.getElementsByTagName(n);
+}
+function byClass() { // [class], [parent, class], [tagname, class], [parent, tagname, class]
+  var par = typeof arguments[0] == 'object' ? arguments[0] : document;
+  var t = arguments.length == 2 && typeof arguments[0] == 'string' ? arguments[0] : arguments.length == 3 ? arguments[1] : '*';
+  var c = arguments[arguments.length-1];
+  var l = byName(par, t);
+  var ret = [];
+  for(var i=0; i<l.length; i++)
+    if(hasClass(l[i], c))
+      ret[ret.length] = l[i];
+  return ret;
+}
 
 /* wrapper around DOM element creation
  * tag('string') -> createTextNode
@@ -40,6 +56,34 @@ function setText(obj, txt) {
     obj.innerText = txt;
 }
 
+function listClass(obj) {
+  var n = obj.className;
+  if(!n)
+    return [];
+  return n.split(/ /);
+}
+function hasClass(obj, c) {
+  var l = listClass(obj);
+  for(var i=0; i<l.length; i++)
+    if(l[i] == c)
+      return true;
+  return false;
+}
+function setClass(obj, c, set) {
+  var l = listClass(obj);
+  var n = [];
+  if(set) {
+    n = l;
+    if(!hasClass(obj, c))
+      n[n.length] = c;
+  } else {
+    for(var i=0; i<l.length; i++)
+      if(l[i] != c)
+        n[n.length] = l[i];
+  }
+  obj.className = n.join(' ');
+}
+
 
 
 /* What follows is specific to manned.org */
@@ -152,3 +196,18 @@ function navCreateLinks(nav) {
 if(byId('nav'))
   navCreate(byId('nav'));
 
+
+
+// The "more..." links on the homepage.
+if(byId('systems')) {
+  var f = function() {
+    var l = byName(this.parentNode, 'a', 'hidden');
+    for(var i=0; i<l.length; i++)
+      setClass(l[i], 'hidden', false);
+    setClass(this, 'hidden', true);
+    return false
+  };
+  var l = byClass(byId('systems'), 'a', 'more');
+  for(var i=0; i<l.length; i++)
+    l[i].onclick = f;
+}